i18n framework for HTML pages – jQuery
The problem is quite simple. You have HTML pages as your front end and you are not using any server side scripting to display your pages i.e. you are not using jsp or php or servlets to get HTML content. Application is HTML pages and javascript which is using Ajax to talk to back end and getting and sending data to server according to user actions and on certain events and Multi-lingual interface is the requirement i.e. require i18n for front-end.
As most of the static content is coded in your HTML pages, one way to do this is figuring out user’s context and display him specific HTML page accordingly. That means maintaining different HTML pages for each language you want to support for your web application. This approach is little difficult because generally we get changes very frequently on HTML pages so for maintaining it you also need to make changes in rest of HTML files for other languages. This requires testing for all languages as HTML files will also have some functional code with it and it may break for some languages while making changes.
We tried to solve this problem in slightly different manner. We tried to separate the display strings from HTML controls and tried to replace them with translations by figuring out the user’s language dynamically. In this way we have only one HTML page to maintain but we do have multiple resource files for language translations which keeps all static display strings translated for a certain language. As we need to do it on client side these resource files are basically Java script files having JSON objects with key and values. Keys are used to retrieve the display string value and replaced on HTML page. Following are the steps while loading the HTML page:
- Very first included javascript after library javascripts is i18n.js on the page.
- i18n.js tries to load language from a cookie value, if it is not set then tries to get language setting of user from server using an Ajax request.
- Once language is known, it downloads the translated javascript file from server e.g. if user language is French i.e. fr, it will load javascript file from http://server/contextpath/js/lang/’ + _language + ‘/’ + getPageName() + ‘.js’.
- All translated Java script files should reside in respective language folders and their names should match the page name i.e. the HTML page name so that a generic code can be written to retrieve correct translated Java script file.
- In case there are some common strings used for all pages in web application, a common file _common.js can be created per language and can be downloaded along with page specific js.
- Once you have all the resource ready. replace all display string placeholders from HTML page so that page can be viewed in user’s language.
- Any other display message like Success and warning messages or any other content which is not the part of HTML page but getting generated dynamically using Java script should use the translated file to retrieve values against keys and display the translated text.
Question is how to replace display strings in HTML page. Here is the way you should write your HTML page so that you can replace strings according to the language.
- Use span tag to enclose all Strings used on page as labels, texts etc. Have an id of each span and this id will be used to replace the language text for that span tag.
- For controls like Select boxes and input tags use below code to replace texts
- Use following geti18N() function to get translated text for the page while making dynamic strings
<span id="mylabel.id" class="i18n"></span>
<input type="button" id="form.submit.button" name="form.submit.button" class="i18n"></input>
<select id="someSelect" class="i18n">
<option id="select.option1" value="1"></option>
<option id="select.option2" value="2"></option>
</select>
function translate() {
if (_translator) {
$("span.i18n").each( function (i) {
$(this).html(_translator[this.id]);
});
$("input.i18n").each( function (i) {
$(this).val(_translator[this.id]);
});
$("select.i18n").each( function (i) {
var opts = $(this)[0].options;
if (opts)
for(var i=0; i<opts.length; i++) {
opts[i].text = _translator[opts[i].id];
}
});
}
}
You can see in the function above that class is used to for replacing translations in HTML file. Here _translator is the JSON object which is already loaded with translations as described earlier. Here is the example of translation file
{
"key":"value",
"mylabel.id":"My Label",
"form.submit.button":"Submit",
"select.option1":"Option 1",
"select.option2":"Option 2"
}
For all dynamic Strings which are required while your getting success or error from server, you can use following function to get translated string from _translator object
function getI18N(key) {
var s = '';
if(_translator[key]) {
s = _translator[key];
}
return s;
}
Please post comments if you find it can be improved. Thanks
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
[...] i18n framework for HTML pages – jQuery [...]