Managing string localization in javascript files

by Cedric Dugas on November 11, 2010

One thing that is really frustrating to deal with is localization. There is nothing funny about localizing text from your application. But this is a necessary step when you want to go for very a broad market in multiple languages. So while your there, why not having a localization infrastructure in all your front-end.

Most PHP frameworks and JS widget libraries can now be easily customized as far as localization is concerned. However your bound to have some string messages in your javascript modules. Not thinking about the localization of these little pesky messages leads to painful hours of looking through every files to find some strings that have not been localized.

Consolidating your localization architecture

Okay your widget has 2 or 3 files, each for one language, that’s a start, but why not centralized all that on the front-end? The idea here is to create one one or multiple objects, that will handle all the localization for your application.

Meaning that in your javascript application code, instead of actually writing down the localization, you will be doing a look up using a function to a single object that will be containing every language localization for this string. That also means that you need to set a variable with the current language your app is in.

Let’s try to be a little bit clearer

Here is what we are going to do.

1. First we need a way of knowing your current language state. It could be a javascript variable outputted form your framework or an attribute on your body tag, that you will store in js, for exmaple:

<body lang="fr">

of simply

<script>
currentLanguage ="fr";
</script>

2. Create a JSON object (or multiple) with all your languages translations

var globalTranslations = {
	"en":{
		"myquote": "English quote"
	}
	"fr":{
		"myquote": "Quote en francais"
	}
}

The idea here is to use the current language and fallback to english if some strings are missing. So a good idea could be to separate the object in separate files per language and only load the english localization and the _insert current language_.


3. A central function that will route all messages to the current language state.

This part is little bit more complicated but, the idea is that when you need a string, your going to call the function like this : tools.getLocalisation(globalTraductions[currentLanguage], ['validation', 'required'])

For example, this would look in your object for globalTraductions.en.validation.required node. The way getLocalisation is written, if the string is not found, it’s going to default to the “default language” (currently English), and if this is still undefined, it’s going to actually output the object lookup (in this case: validation required)

Download the source code View demo

That’s it

Following this pattern you never create javascript error with undefined properties, and it can also default to English or to a, somewhat, understandable state. Hope it can help you guys get your localizations going!



9 comments

Nice!
One comment: usually, you don’t want to load all your “traductions” string (in traduction.js), you only load one language, for performance reason. But I guess that if you split your traductions.js file into 2 files (traduction.en.js and traduction.fr.js) and only load the language you need, it will still work, right?

by Saad on November 11, 2010 at 11:16 pm. Reply #

“Complicated” seems a bit of an understatement; do you really write all that function everywhere you need a localized string?
I’m doing this somewhat differently. First of all the proper place for the lang attribute should be the HTML element, so that it applies to the page title and META stuff too. Next step is to declare an empty ‘var lang = {};’ at the top of my script; at document.ready the script reads out the declared language, makes an Ajax call to the server with that language as a parameter and gets in return a JSON response containing the localized strings, storing them in ‘lang’. Done that it’s just a substitution task: every string in the original script is replaced by lang.name_of_string.

by Dejan Kozina on November 12, 2010 at 12:25 am. Reply #

I agree with you that internalization & localization can be really frustrating. However there is services that can help you with it, see for example Get Localization (http://www.getlocalization.com). Also see blog post about dynamic JavaScript localization:

http://blog.getlocalization.com/2010/05/25/dynamic-localization-in-javascript/

by Petteri on November 12, 2010 at 1:28 am. Reply #

@Saad yea that would still work, It really depend how big is your object and how you want to handle it.

@Dejan Well the idea is to write once and never touch your localized string again, I do call this function each time, tested it in dynatrace, it take less than 1 ms to retrieve a string in ie8.

My script is for string localization in javascript files (like form validation errors), we do not use that stuff for page title and meta, or anything like that, this is handled in the back-end.

But you know, your way of doing seems to fit perfectly what you need, so that is cool too :P

Our setup is a bit user driven, and we might have missing strings in spanish, so we want that english take over if the spanish version is not there.

by Cedric Dugas on November 12, 2010 at 10:02 am. Reply #

How does SEO fit with javascript-based localization? Search engines from multiple languages will not index well in that scenario. I prefer javascript or specifically jquery to server-side any day but not realistic other than for messaging that is non-seo.

by what about SEO? on November 16, 2010 at 5:05 pm. Reply #

You should not use this method with website content.

This is specifically for text in warning messages, and text string across your javascript files

by Cedric Dugas on November 17, 2010 at 1:15 pm. Reply #

you spelled “you’re” wrong, twice.
:D

by polaretto on December 1, 2010 at 10:20 am. Reply #

Thank You for sharing this material, very interesting

by praca maturalna on March 24, 2011 at 3:48 pm. Reply #

Can’t access the project on github :(

by Semih Balkanci on February 23, 2012 at 3:33 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.