Tuesday, June 25, 2013

Localization of HTML Elements

When creating a SPA (Single Page Application), many times we like it to be localization-ready,
meaning it can be easily translated to other languages. 
Without getting into the many aspects of localization (and sometimes internationalization), 
I would like to present a simple way to localize HTML elements using HTML5 "data-" attribute.

The idea is to add a key attribute to the HTML element that we want to localize. 
For example:

<span data-key="txt1"></span>

We then create a JSON file holding all the application text as key-value pairs. For example:

"txt1": "translated text 1",
"txt2": "translated text 2",
"txt3": "translated text 3"

For each language we create a separate JSON file.
When the application loads, we use jQuery to load and parse the JSON file.
Then we access each HTML element by its data-key and set its HTML to the corresponding value from the JSON data file:

  var appNS;
  (function (appNS) {
      appNS.initApp = function(){
      // load language file
      $.getJSON('en_us.json', function(data) {
        // json loaded - save to object
        appNS.Lang = data;
        for (var key in appNS.Lang)
  } (appNS = appNS || {}));
  $(document).ready(function () {

In this example, I've also used a name space and a JavaScript module.
A working demo can be seen in this plnkr.

No comments:

Post a Comment

About Me

My photo
I've been developing Internet and rich-media application for 15 years. In my work I emphasis usability and best user experience as well as sleek design. My main expertise are JavaScript, Flex and Flash.