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
Resources To Initialize With
TJust Pass resources to initialize with and every time the link is clicked i18next loads the translation text without page reload.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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.init({
        resources: {
            en: {
                translation: {
                    key: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
                }
            },
            es: {
                translation: {
                    key: "Lorem Ipsum es simplemente un texto ficticio de la industria de impresión y composición. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde los años 1500, cuando una impresora desconocida tomó una galera de tipo y la revolvió para hacer un libro de muestras tipo. Ha sobrevivido no sólo cinco siglos, sino también el salto a la tipografía electrónica, permaneciendo esencialmente sin cambios. Fue popularizado en la década de 1960 con el lanzamiento de hojas de Letraset que contenían pasajes de Lorem Ipsum, y más recientemente con software de publicación como Aldus PageMaker incluyendo versiones de Lorem Ipsum."
                }
            },
            pt: {
                translation: {
                    key: "Lorem Ipsum é simplesmente um texto fictício da indústria gráfica e tipográfica. Lorem Ipsum tem sido o texto padrão do manequim da indústria desde os anos 1500, quando uma impressora desconhecida tomou uma galera de tipo e mexidos-lo para fazer um livro tipo espécime. Ele sobreviveu não apenas cinco séculos, mas também o salto para a composição eletrônica, permanecendo essencialmente inalterado. Foi popularizado na década de 1960 com o lançamento de folhas Letraset contendo Lorem Ipsum passagens, e mais recentemente com software de editoração como Aldus PageMaker incluindo versões de Lorem Ipsum."
                }
            },
            fr: {
                translation: {
                    key: "Lorem Ipsum est simplement un texte fictif de l'industrie de l'impression et de la composition. Lorem Ipsum a été le texte fictif standard de l'industrie depuis les années 1500, lorsqu'une imprimante inconnue a pris une galère de type et l'a brouillée pour faire un livre de spécimen de type. Il a survécu non seulement cinq siècles, mais aussi le passage à la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la publication de feuilles de Letraset contenant des passages de Lorem Ipsum et plus récemment avec des logiciels de publication assistée comme Aldus PageMaker, y compris des versions de Lorem Ipsum."
                }
            }
        },
        debug: !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
});