l10n – a jQuery plugin

written by Christoph Müller-Spengler in October 2008

l10n is a jQuery plugin that allows you to localize the content in your page. Since version 1.0 it is possible to localize all html elements that can contain texts and even handle images.

All of your strings have to be stored in JSON format in nice “packages” (*.js-files).

These “packages” can be created e.g. out of a .NET *.resx-file using XML2JSON

This plugin is based on jQuery Localisation by Keith Wood.

This plugin supports an unlimited number of “packages”

• Current version: 1.0.0 (14. July 2009)
• Filesize: 3.920 bytes
• Filesize minified: 2.584 bytes
• License: MIT/GPL
• Tested in: Firefox 3.5, IE 7 + 8, Google Chrome 2.0, Opera 9
• Required: jQuery 1.3.2

Files / Links

• Download & Demo
• Release Notes
• Project Home

Documentation

The HTML

All Elements that contain texts that have to be localized should have the class “.l10n”.

This is not essential, as the usual jQuery selectors are supported as well, but that makes it easier to find the elements that really have to be localized so that we can use this as our selector.

In this example i have two strings in the first package “a_package” and two strings in the second package “package_b”

	<i>a1:</i> <span class="l10n" id="a1"></span>.<i>a2:</i> <span class="l10n" id="a2"></span>

	<i>b1:</i> <span class="l10n" id="b1"></span>.<i>b2:</i> <span class="l10n" id="b2"></span>

The JavaScript

$(document).ready(function(){
	$(".l10n").l10n({
		pkg: ['packages/a_package','packages/package_b'],
		language: $.defaultLanguage,
		name: ['first','second']
	});
});

The Options

Name	Type	Description
pkg	Array	Array of packages to load. Please refer with relative URL to the different *.js-files. e.g. “packages/a_package”
language	String	Language to load. This defines which suffix the packages will have that will be loaded. e.g. “en-GB” This will load the file “a_package-en-GB.js”
name	Array	Array of names of the JSON Objects. The order of the names must not correspond to the order of the packages mentioned in pkg. It is not necessary to name the objects like the files but it helps not to loose control.

The Design of the packages to load

The packages have to fulfil the JSON Notation. As i do a lot with .NET and use the *.resx files for our L10N

I converted these files into JSON to be able to read them (The converter himself is not content of this plugin).

The result contains a lot of overhead that comes with the resx-file, but that is not necessary. The valuable information about

the name/value pairs comes at the beginning, the rest could be truncated.

The converted files look like this:

{
	"root": { "data": [
		{"name": "a1", "value": "Das hier ist die erste Überschrift des Packages a", "xml:space": "preserve" },
		{"name": "a2", "value": "Der zweite Text des Packages a", "xml:space": "preserve" },
		{"name": "a3", "value": "und weil es so schön war, nochmal der dritte Text des Packages a", "xml:space": "preserve" }
	], . . .

If you intend to load the content dynamically into your JavaScript objects these should then look like this. In our project we will store all the data in our .NET resource files and load the content dynamically once the language is switched. The “name” has to match the “id” of the element that has to get the text that is specified by “value”.

var first  = '{ "root": { "data": [';
	first += '{"name": "a1", "value": "Das hier ist ein Text in <strong>de</strong>"},';
	first += '{"name": "a2", "value": "Lorem ipsum dolor sit amet in <strong>de</strong>"}';
	first += ']}}';