Hello folks.
We are all wondering what the best approach to localize a website is. How do you switch your content, labels and text to a different language when creating a translated version of your website?
There are a lot of libraries for localization. However, in this post we will use a simple non-complex method.
Start by creating files
Each language you wish to integrate into your website needs to have a file containing the code of that language. For instance, my site will support the “English”, “French” and “Arabic” languages. Therefore, I will create 3 files with the names “en.local”, “fr.local” and “ar.local”.
Each file will contain a simple JSON object containing a list of keywords with their corresponding values. The keyword should be unique and the same in all the local files whereas the values differ depending on the files language. An example of the JSON object is located below:
{
"subject": "Subject",
"body": "Body",
"username": "Username"
}
Prepare the html
In order to make a multi-language site, the HTML has to be configured. The lang attribute should be defined in the html and/or body tag. This attribute will be used to determine the language of the current website and to handle the translation process.
<html lang="en">
<head>
<title></title>
</head>
<body lang="en">
</body>
</html>
An event listener can be added to handle the change in the lang attribute. Afterwards, when the user clicks on a button or link to change the language, the “changeLang” function should be called. Doing so will set the html/body lang attribute and fire the “change” event.
$(document).on('lang-changed', function() {
//language event changed.
alert('changed');
});
function changeLang(lang){
$('html,body').attr('lang', lang);
$(document).trigger('lang-changed');
}
Translating controls
Referring to my post which discusses html mapping, we need to add some attributes to identify which fields have to be translated. The “data-translate” attribute will be added and will contain one of the keys placed in the translation files mentioned earlier. This attribute will determine which key is being used in order to get the corresponding value.
As an example, lets consider having three buttons to change the language to 3 different languages along with 3 controls to be translated.
<button id="btnChange" onclick="changeLang('fr');">Fr</button>
<button id="btnChange" onclick="changeLang('en');">En</button>
<button id="btnChange" onclick="changeLang('ar');">Ar</button>
<h2 data-translate="subject"><h2>
<span data-translate="body"></span>
<label data-translate="username"></label>
The translate method which translates the controls is quite easy. First, it will load the right object related to the chosen language. Second, it will iterate all the controls having the “data-translate” attribute in order to get the relative key and update the text as per the chosen language.
var path = "locals/";
var postfix = ".local";
translate();
$(document).on('lang-changed', function() {
//language event changed.
translate();
});
function changeLang(lang) {
$('html,body').attr('lang', lang);
$(document).trigger('lang-changed');
}
function translate(){
var lang = $('html').attr('lang') || $('body').attr('lang');
jQuery.get(path + lang + postfix, function(data) {
var list = $('[data-translate]');
for (var i = list.length - 1; i >= 0; i--) {
var $item = $(list[i]);
var key = $item.attr('data-translate');
$item.text(data[key]);
};
}, 'json');
}
This was a simple tutorial for localizing your site. It’s quite good and fast in loading.
Stay tuned for the next post 🙂