Javascript: Translating a page or app

Today when working a HTML5 app I realized that it would be sweet to translate it into other languages. It suited perfect for translation as it was a small app with little text and so I googled the subject and came into contact with a jQuery library called i18n which I found on github. It looked sweet and I tested it out using its small but concise guid (found here).

In short I created a structure that looked like this:

- bundle/
- js/
--- app.js
- index.htm

The translations were added into a file called which followed ISO-639 and ISO-3166 language and country code standard (such as
The process of fetching the translation was quite simple (as explained in their example):

#General stuff
general_save = Save
general_cancel = Cancel

#Home stuff
home_header = Welcome to my site!

#General stuff
general_save = Spara
general_cancel = Avbryt

#Home stuff
home_header = Välkommen till min sida!


	<h1 id="home_header"></h1>
	<button id="save_stuff" class="general_save"></button>
	<button id="cancel_stuff" class="general_cancel"></button>


//This will loop through all ID´s and classes it
//can find in its arrays and exchange their content with
//the translated content
var translationLoop = function ()
	//Translate all id´s
	var ids = ["home_header"];

	for (var i = 0; i < ids.length; i++)
		var id = ids[i];
		$("#" + id)

	//Translate all classes
	var classes = ["general_save", "general_cancel"];

	for (var i = 0; i < classes.length; i++)
		var c = classes[i];
		$("." + c)

var generalTranslation = function (language)
		name: 'resources',
		path: 'bundle/',
		mode: 'both',
		language: language,
		callback: function () {
			//Once the translation file is found and loaded,
			//run the translation for our content

	.ready(function ()

Leave a Reply