Making Your Static HMTL/Js Application Multilingual with i18next

i18next is a very rich ecosystem, has lots of options/possibilities for internalization/localization. This article will cover just a little portion of its capabilities that were enough to make Mahalle Boyamaca multilingual.

Mahalle Boyamaca is a static hmtl/js application with which one can generate thematic maps. If it were a server-side coded application, internalization would have been fairly easier. I had the chance to try GetText for such a task, I remember coming accross others, too.

For Mahalle Boyamaca, there were two types of text that needed to be multilingual; static text in html and text that is displayed on some conditions which resides in javascript code.

It is stated that it would be possible to use i18next without jquery, but since MahalleBoyamaca uses jquery, i did not bother with how it would be done. The first thing to do is to include the scripts;

Then we need to initialize i18next. A possible place would be the begining of jquery document ready;

 

 

The initialization code is mostly self explanatory. The only part that needs further explation is the resources part. The structure and some of the content of rsc object is as below:

Clearly one can add more than 2 languages in the resources. Moreover the content of every language does not need to be loaded to the client, the resources for each language can be kept in the server as a seperate file and loaded when necessary- i18next has that capability- but it is outside the scope of this article. Since there were just 2 languages that Mahalle Boyamaca need to support and there are just 29 expressions that are to be translated, the resources of Mahalle Boyamaca is kept in the js file.

After determining what to be translated and included in the resource object (or file if need be), the next and only thing to do is to mark the items that are going to be affected.

For static html tags, adding the attribute data-i18n with the key defined in the resource section is required:

translates into

Drag and drop the base image to the box below

For items where the value attribute is needed to be set, the format i18next uses is:

translates into

This format can be used to set any attribute value necessary.

For the js part, the translation function is called explicitly:

For items that require a parametrized structure, in the resource section, the part that is to be parametrized is written within two curly braces:

and the translation function is called with the parameter object:

This sums up pretty much everything required to make Mahalle Boyamaca multilingual.

Later on, it is decided that it would be better if the user can change the language. The language flags are added to the top right corner of the page. When clicked, the same page is called with the get parameter ‘lang’ set to either of the language values; ‘en’ or ‘tr’ : URL?lang=en.

Then the initialization part of i18next is changed so as to make use of the parameter provided if there is any:

 

Leave a Reply

Your email address will not be published. Required fields are marked *