JavaScript string localization done right

December 1st 2010

I live and work in a bilingual environment and most of the things I work on needs to be localized.

While it’s easy to do localization on the server side, it’s not so easy on the client side. There are several solutions available online, but most of the times they are either over-complicated or contains all the languages strings in one file, none of them really cut it for me.

Since I’m obsessed with optimization and performance in the things I develop, I tried to come up with the best solution in that sense. Please note that this method works well if you have a back-end to feed you the localized strings, if you have to do localization that usually means you have some kind of framework running behind the front-end.

So basically, I always only include one localized JavaScript file in my projects, let’s call it “localization.php” and here’s a sample:

<?php header("Content-type: text/javascript"); ?>

var localized_errors = {
	connect : "<?php echo _('Oops! We couldn\'t connect you to the server') ?>",
	loging : "<?php echo _('Oops! We couldn\'t log you onto the server') ?>"
}

var localized_label = {
	previous : "<?php echo _('Previous') ?>",
	next : "<?php echo _('Next') ?>"
}

Now you might have noticed that it’s a PHP file that contains JavaScript, the key here is to make sure that this PHP file is served as JavaScript using the correct header.

Note the the variable scope is global so these are accessible from any javascript file elsewhere in my projet.

Now if you looked closely, you’ll see the I reference the gettext PHP function. If you’ve never heard of it, I highly suggest you read into it, if you’re already using something similar, you should see where I’m going 🙂

The gettext function basically takes a label for parameter and then go look for that label in the proper translation table. So all of the hard work is done on the server side, none of it really happen in the JavaScript.

Here’s what the browser actually see:

var localized_errors = {
	connect : "Oops! We couldn't connect you to the server",
	loging : "Oops! We couldn't log you onto the server"
}

var localized_label = {
	previous : "Previous",
	next : "Next"
}

See that? It’s a nice JavaScript file containing two JSON objects, nothing else. It cannot get easier than this.

Now to reference the labels from anywhere in you application you only need to reference them like so:

alert(localized_errors.connect);

Now let me explain why it’s better to use that method.

The usual localization solutions for JavaScript are done using a JSON object containing all the localized labels, that means that not only do you have to maintain your usual localization tables, but you also need to maintain it for your front-end and experience tells me that you’re just adding another potential breaking point.

Also, if you use the “traditional” method and you have 3 languages, your localized JavaScript is three times bigger as it should be, bigger is not alway better 😉

So that’s it, let me know what you think of if you have any other better method.

8 Responses to “JavaScript string localization done right”


  1. […] This post was mentioned on Twitter by Stephane Caron, montrealhackers. montrealhackers said: JavaScript string localization done right http://bit.ly/hKvjaK […]

  2. Cedric Dugas says:

    Love it, obviously of you cache the php file it is better 😛

  3. Stephane says:

    Yeah for sure, even tho the processing is far from being hardcore.

  4. Great, I do something similar using JavaScript + Java.

  5. Chad says:

    I think this is fine for small apps. For larger apps why wouldn’t you make this part of your build process so that when you compile the build process reads your Resx files and builds the localized JS files automatically. I also add a comment in my Resx files to indicate if the resource can also be used locally in order to reduce the size of the file. This approach has the added benefit that once you are done it will work on any project… Just a thought.

  6. finally found it. great!

  7. Daniel says:

    nice, you’re the greatest.

  8. […] JavaScript and html5). I came across – MVC JavaScript localization of external .js files, http://www.no-margin-for-errors.com/blog/2010/12/01/javascript-string-localization-done-right/ etc. But which would be the best way to do […]

Leave a Reply