i18next or how to easily build multi-language web applications in javascript

Posted by on August 3, 2014

i18next is a full-featured i18n javascript library for translating your webapplication . Runs in browser, under node.js, rhino and other javascript runtimes.

I have discovered this just recently, but i think i18next will be perfect for mobile webapps, those i release with Phonegap/Cordova.

So lets watch a simple sample.

page source:

<!DOCTYPE html>
<html>
  <head>
  	<!-- optional -->
    <script type="text/javascript" src="[PATH]/jquery.js" />
    <script type="text/javascript" src="[PATH]/i18next.js" />
  </head>
  <body>
    <ul class="nav">
      <li><a href="#" data-i18n="nav.home"></a></li>
      <li><a href="#" data-i18n="nav.page1"></a></li>
      <li><a href="#" data-i18n="nav.page2"></a></li>
    </ul>
  </body>
</html>

loaded resource file (locales/en/translation.json):

{
  "app": {
    "name": "i18next sample"
  },
  "nav": {
    "home": "Home",
    "page1": "Page One",
    "page2": "Page Two"
  }
}

javascript code:

i18n.init({
    debug: true,
    fallbackLng: 'es'
}, function(t) {     
    
    //translate just nav
    $(".nav").i18n();
    
    //or you can translate everything
    $("body").i18n();
	
    // programatical accessing resources
    var appName = t("app.name");
    
    
});

You can run the translation by querystring. Just add ‘?setLng=en-US’ to the location href.

For more info on i18next and better examples and uses case please go to http://i18next.com


Related Posts