Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image

Internationlization

i18next Internationlization
Load Resources Using XHR
Every time the link is clicked, i18next loads json file with selected language and initialize translation again, so new language appears without page reload.

Example markup:


<ul class="navbar-varient-submenu profile-sub-menu ">
    <li>
        <a href="#" data-lng="en">
            <i class="flag-icon flag-icon-gb m-r-5"></i>
            English
        </a>
    </li>
    <li>
        <a href="#" data-lng="es">
            <i class="flag-icon flag-icon-es m-r-5"></i>
            Spanish
        </a>
    </li>
    <li>
        <a href="#" data-lng="pt">
            <i class="flag-icon flag-icon-pt m-r-5"></i>
            Portuguese
        </a>
    </li>
    <li>
        <a href="#" data-lng="fr">
            <i class="flag-icon flag-icon-fr m-r-5"></i>
            French
        </a>
    </li>
  </ul>

JS code example:


 i18next.use(window.i18nextXHRBackend).init({
        debug: !0,
        fallbackLng: !1,
        backend: {
            loadPath: "../assets/locales/{{lng}}/{{ns}}.json"
        },
        returnObjects: !0
    },
    function(err, t) {
        jqueryI18next.init(i18next, $)
    })
i18next library

Overview

i18next is a very popular internationalization library for browser or any other javascript environment (eg. node.js). i18next is exported in UMD format and can be loaded via commonjs, requirejs (AMD) or will be added to global scope window.i18next.

Internationalization and localization are means of adapting web applications to different languages, regional differences and technical requirements of a target market. Internationalization is the process of designing an application so that it can potentially be adapted to various languages and regions. Localization is the process of adapting internationalized application for a specific region or language by adding locale-specific components and translating text. Framework template uses i18next library for internationalization and localization.

Benifits

  • Support of variables
  • Support of nesting
  • Support of context
  • Support of multiple plural forms
  • Gettext support
  • Sprintf support
  • Detect language
  • Graceful translation lookup
  • Custom post processing
  • Post missing resources to server
  • Resource caching in browser
  • Fetch resources from server

Basic Usage

i18next is a full-featured i18n javascript library for translating your web application. By default, Framework template supports language switching in 2 different ways, language detection according to the user navigator language and fallback languages. All plugin settings also support and use cookies by default. For demonstration purposes, main structure of this page was translated to russian, ukrainian and default english languages. You can change current language by choosing it in the dropdown menu located in top navbar.

Page markup:


<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
<ul class="navigation">
    <li>
        <a href="#" data-i18n="nav.dash.main"></a>
    </li>
    <li>
        <a href="#" data-i18n="nav.email.main"></a>
    </li>
    <li>
        <a href="#" data-i18n="nav.snippets.main"></a>
    </li>
</ul>

<!-- i18next.min.js -->
<script type="text/javascript" src="[PATH]/i18next.min.js"></script>
<script type="text/javascript" src="[PATH]/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="[PATH]/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="[PATH]/jquery-i18next.min.js"></script>
</body>
</html>

Loaded resource file (assets/locales/*.json):


{
    "app": {
        "name": "Framework template"
    },
    "nav": {
        "dash": {
            "main": "Dashboards"
        },
        "email": {
            "main": "Email templates"
        },
        "snippets": {
            "main": "Snippets"
        }
    }
}

Javascript code:


 i18next.use(window.i18nextXHRBackend).init({
        debug: !0,
        fallbackLng: !1,
        backend: {
            loadPath: "../assets/locales/{{lng}}/{{ns}}.json"
        },
        returnObjects: !0
    },
    function(err, t) {
        jqueryI18next.init(i18next, $)
    })
Library options

Querystring param:

The current locale to set will be looked up in the new parameter: ?lang=en-US. Default is ?setLng=en-US.


 i18n.init({
    detectLngQS: 'lang'
});

Cookie name:

The current locale to set and looked up in the given cookie parameter.


 i18n.init({
    cookieName: 'lang' // default 'i18next'
});

Cookie domain:

Sets the cookie domain to given value.


 i18n.init({
    cookieDomain: '*.mydomain.com'
});

Cookie usage:

Use this only if your sure that language will be provided by the other lookup options or set programatically.


 i18n.init({
    useCookie: false
});

Preload additional languages on init:

The additional languages will be preloaded on init.


i18n.init({
    preload: ['de-DE', 'fr']
});

Preload additional languages after init:

The additional languages will be preloaded after init by calling this function.


i18n.preload([lngs], callback)

Languages whitelist:

Only specified languages will be allowed to load.


i18n.init({
    lngWhitelist: ['de-DE', 'de', 'fr']
});

Additional namespaces:

The additional namespaces will be loaded.


// Single
i18n.loadNamespace('myNamespace', function() {
    // loaded
});

// or multiple
i18n.loadNamespaces([
    'myNamespace1',
    'myNamespace2'
], function() {
    // loaded
});

Unset/Set fallback language:

If not set it will default to 'dev'. If turned on, all missing key/values will be sent to this language.


// Single
i18n.init({
    fallbackLng: 'en'
});

// or multiple
i18n.init({
    fallbackLng: ['fr', 'en']
});

Turn off fallback:

As the fallbackLng will default to 'dev' you can turn it off by setting the option value to false. This will prevent loading the fallbacks resource file and any futher look up of missing value inside a fallback file.


i18n.init({
    fallbackLng: false
});

Load locales:

If load option is set to current i18next will load the current set language (this could be a specific (en-US) or unspecific (en) resource file).


i18n.init({
    load: 'current'
});

If set to unspecific i18next will always load the unspecific resource file (eg. en instead of en-US).


i18n.init({
    load: 'unspecific'
});

Caching with localStorage:

Caching is turned off by default. If the resouces in a given language had been stored to localStorage they won't be fetched / reloaded from online until set localStorageExpirationTime expired. So if they had been cached once and you add new resources, they won't be reloaded until expired. But you can easily remove the values from localstorage by calling, eg.: localStorage.removeItem("res_en" ).


i18n.init({
    useLocalStorage: true | false,
    localStorageExpirationTime: 86400000 // in ms, default 1 week
});

Null values:

Default is true.


i18n.init({
    fallbackOnNull: true | false
});

Empty string values:

Default is false.


i18n.init({
    fallbackOnEmpty: true | false
});

Debug output:

If something went wrong you might find some helpful information on console log.


i18n.init({
    debug: true
});