Get Started

LíngAwesome: Simplify Multilingual Web Development in minutes not days


Discover LíngAwesome, your ultimate solution for multilingual web development. With a comprehensive set of 299 tokens, this powerful toolkit allows you to streamline and standardize your web localization effortlessly.

Seamlessly integrate LíngAwesome into your HTML code and empower developers to create multilingual web pages, forms, and apps with ease. Unlock the full potential of your website's global reach with LíngAwesome's SEO-friendly approach to multilingual development.

Instructions

1. Include the lingAwesome script

Add the <script> tag in your HTML file to include the lingAwesome-latest.js script. Make sure to provide the correct path to the script file.

<script src="lingAwesome-latest.js"></script>

2. Initialize the lingAwesome toolkit

Call the init function to initialize the toolkit. You can pass an options object to configure the toolkit behavior.

window.lingAwesome.init(options);

3. Options

The options object allows you to customize the toolkit's behavior. Here are the available options:

  • debug (default: true): Set it to true to enable debug mode and view console logs from the toolkit.
  • base (default: "en"): The base language code to use as a fallback if the translation is not available for a specific language.
  • language (optional): Specify the desired language code to force the toolkit to use a specific language. If not provided, it will try to determine the language from the URL query parameter "ljs". Or, defaul to the browsers local language setting.
  • observe (default: true): Set it to false to disable the automatic observation of the DOM for updates. When disabled, you'll need to manually call the translateDocument or refreshDocument functions to update translations.
  • refreshOnLoad (default: false): Set it to true if you want to automatically refresh the translations when the page loads.
  • storagePrefix (default: "lingAwesome"): The prefix used for storing language toolkits in the browser's local storage.
  • tokenAttribute (default: "ta-kit"): The attribute name used to identify translation tokens in the HTML elements.

4. Updating the Whole Page

To update the translations for the entire page, you can call the translateDocument function.

window.lingAwesome.translateDocument();

5. Updating Part of the Page

To update translations for a specific element or a set of elements, you can provide the root element as an argument to the translateDocument function.

const element = document.getElementById("myElement");
window.lingAwesome.translateDocument(element);

6. Auto-Updating a Page

If the observe option is set to true (which is the default), the toolkit will automatically observe the DOM for changes and update translations whenever new elements are added or modified. You don't need to manually call any functions for auto-updates to work.

7. Manually Refreshing the Page

If the automatic observation is disabled or you want to trigger a manual update, you can use the refreshDocument function. If you provide a specific element as an argument, it will update translations for that element and its descendants. Without an argument, it will update translations for the entire page.

window.lingAwesome.refreshDocument(); // Update the whole page
const element = document.getElementById("myElement");
window.lingAwesome.refreshDocument(element); // Update translations for a specific element and its descendants

8. Ignoring Elements and Children

To skip translation for specific elements or their children, you can use the ta-ignore and ta-ignore-all attributes.

  • ta-ignore: Add ta-ignore="true" to an element to skip translation for that element.
  • ta-ignore-all: Add ta-ignore-all="true" to an element to skip translation for that element and all its children.
<p ta-ignore="true">This text will not be translated.</p>
<div ta-ignore-all="true">
  <h1>This heading and its content will not be translated.</h1>
  <p>This paragraph and its content will not be translated.</p>
</div>