All Projects → ruyadorno → Dom I18n

ruyadorno / Dom I18n

Licence: mit
Provides a very basic HTML multilingual support using JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language
js
455 projects

Projects that are alternatives of or similar to Dom I18n

Pseudo Localization
Dynamic pseudo-localization in the browser and nodejs
Stars: ✭ 109 (-12.8%)
Mutual labels:  translation, i18n, localization, internationalization, l10n
Mojito
An automation platform that enables continuous localization.
Stars: ✭ 256 (+104.8%)
Mutual labels:  translation, i18n, localization, internationalization, l10n
Node Gettext
A JavaScript implementation of gettext, a localization framework.
Stars: ✭ 175 (+40%)
Mutual labels:  translation, i18n, localization, internationalization, l10n
i18n
internationalize projects to Arabic
Stars: ✭ 67 (-46.4%)
Mutual labels:  i18n, translation, internationalization, localization, l10n
Fluent.js
JavaScript implementation of Project Fluent
Stars: ✭ 622 (+397.6%)
Mutual labels:  translation, i18n, localization, internationalization, l10n
inlang
Open Source Localization Solution for Software.
Stars: ✭ 160 (+28%)
Mutual labels:  i18n, translation, internationalization, localization, l10n
Weblate
Web based localization tool with tight version control integration.
Stars: ✭ 2,719 (+2075.2%)
Mutual labels:  translation, i18n, localization, internationalization, l10n
rosetta
A blazing fast internationalization (i18n) library for Crystal with compile-time key lookup.
Stars: ✭ 23 (-81.6%)
Mutual labels:  i18n, translation, internationalization, localization, l10n
labels
Bolt Labels extension - Translatable labels for Bolt
Stars: ✭ 18 (-85.6%)
Mutual labels:  i18n, translation, internationalization, localization, l10n
React Intl Hooks
React hooks for internationalization without the hassle ⚛️🌍
Stars: ✭ 64 (-48.8%)
Mutual labels:  translation, i18n, localization, internationalization
Gotext
Go (Golang) GNU gettext utilities package
Stars: ✭ 292 (+133.6%)
Mutual labels:  translation, i18n, internationalization, l10n
Locale2
💪 Try as hard as possible to detect the client's language tag ("locale") in node or the browser. Browserify and Webpack friendly!
Stars: ✭ 65 (-48%)
Mutual labels:  i18n, localization, internationalization, l10n
Js Lingui
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript
Stars: ✭ 3,249 (+2499.2%)
Mutual labels:  translation, i18n, localization, internationalization
Eo Locale
🌏Internationalize js apps 👔Elegant lightweight library based on Internationalization API
Stars: ✭ 290 (+132%)
Mutual labels:  translation, i18n, localization, internationalization
Redux React I18n
An i18n solution for React/Redux and React Native projects
Stars: ✭ 64 (-48.8%)
Mutual labels:  i18n, localization, internationalization, l10n
Tower
i18n & L10n library for Clojure/Script
Stars: ✭ 264 (+111.2%)
Mutual labels:  translation, i18n, localization, l10n
Easy localization
Easy and Fast internationalizing your Flutter Apps
Stars: ✭ 407 (+225.6%)
Mutual labels:  translation, i18n, localization, internationalization
Keys Translations Manager
KTM, a locale management web app built on MERN stack, lets you manage and control locales in one place. It's particularly useful for someone who needs to manage multiple internationalization/localization projects.
Stars: ✭ 81 (-35.2%)
Mutual labels:  i18n, localization, internationalization, l10n
React Localize Redux
Dead simple localization for your React components
Stars: ✭ 384 (+207.2%)
Mutual labels:  translation, i18n, localization, internationalization
Laravel Js Localization
🌐 Convert your Laravel messages and consume them in the front-end!
Stars: ✭ 451 (+260.8%)
Mutual labels:  i18n, localization, internationalization, l10n

dom-i18n

NPM version Build Status Code coverage

Provides a very basic HTML multilingual support using JavaScript

http://ruyadorno.github.io/dom-i18n

Sauce Test Status

About

This is a lightweight (less than 1KB minified/gzipped) JavaScript module that offers an alternative for supporting internationalization on HTML static pages that have no better option than to serve many languages at once.

It's a smart way of providing support to multiple languages without having to rely on many HTML files, it will also not require a page reload to change languages. The original requirement for creating this script was to provide multilingual support to a CMS in which I only had control to its template code (in my case it was a Shopify store) but the script is very flexible and can be used in any HTML page.

Features: UMD definition, IE9+ support, examples provided.

Usage

Just add the script in your HTML file, then invoke the domI18n method defining the languages you will support:

  <script src="../dist/dom-i18n.min.js"></script>
  <script>
    domI18n({
      languages: ['en', 'fr']
    });
  </script>

Mark what elements should be translatable within your page by adding a data-translatable attribute:

  <h1 data-translatable></h1>

Two simple ways to specify translations

Both methods can be used at the same time in an HTML page, just make sure that you don't mix them within the same element.

Using child elements

Inside your translatable element, define one child element for each language you support, in the same order as they appear in the languages property.

  <h1 data-translatable>
    <span>Hello world</span>
    <span>Bonjour le monde</span>
  </h1>

This is the most flexible way of defining translations and it allows for the use of nested child elements! If you need to support translated links, this is the only possible choice

Using string separators

Just provide both language values separated by // - note that this is the standard value and can be changed on the initialization options that we are going to cover in more detail below.

  <h1 data-translatable>Hello world // Bonjour le monde</h1>

This is the most simple way to define translations and is very useful if you're limited to a CMS interface.

Options

The script is highly configurable, many options are available when invoking the domI18n method that allows the customization of your multi language support.

Here is the complete list of properties you can set on startup and their default values:

  • rootElement:HtmlElement - Container element used to narrow the lookup for translatable elements, can be used to define more restricted translatable areas on your page, defaults to window.document.
  • selector:string | array-like object - Defines which objects have multilingual support, can be a query selector string or an array like object, such as a jQuery selector. Defaults to a '[data-translatable]' query selector string.
  • separator:string - A string that will be used to separate the different languages on your element, defaults to ' // '.
  • languages:array - The main source to define what languages the translation should support, please note that the languages should be listed on the same order as they appear here. Defaults to a ['en'] array.
  • defaultLanguage:string - Defines a default language to be used in the application. Should be a string reference to one of the languages defined on the languages array. Defaults to 'en'.
  • currentLanguage:string - Defines the language to be used when starting the transation script, defaults to 'en'.
  • translatableAttr:string - Reference to a dataset attribute name that points to an element text attribute that should be tranlsated, useful when you want to translate attributes such as title, alt or similar. Defaults to 'data-translatable-attr'.
  • enableLog:boolean - If true log messages are enabled (e.g. error if language not found). Defaults to true.

Example:

Below is an example of initializing domI18n with the most common used options:

  <h1 data-translatable>Hello world // Bonjour le monde</h1>
  <p data-translatable>The quick brown fox jumps over the lazy dog. // Le rapide renard marron saute par-dessus le chien paresseux.</p>
  <script src="../dist/dom-i18n.js"></script>
  <script>
    domI18n({
      selector: '[data-translatable]',
      separator: ' // ',
      languages: ['en', 'fr'],
      defaultLanguage: 'en'
    });
  </script>

API

The domI18n method also returns an object providing a changeLanguage method to change the language on the fly. That can be very useful for setting up a language selection interface.

var i18n = window.domI18n({
  selector: '[data-translatable]',
  separator: ' // ',
  languages: ['en', 'fr'],
  defaultLanguage: 'en'
});

i18n.changeLanguage('fr');

DISCLAIMER: Please note that this is a hacky way of integrating internationalization support into your application and its use probably only makes sense when you have big limitations, such as having zero control over the server-side code or no JavaScript framework in use.

License

MIT © Ruy Adorno

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].