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

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 += ']}}';
Advertisements

10 Responses to l10n – a jQuery plugin

  1. Pingback: uploaded l10n - my first jQuery plugin « cms4j

  2. Pingback: l10n 1.0 « cms4j

  3. Unknown says:

    Hey thank you for the wonderful article it had been genuinely useful , I hope you will just publish additional about this ! This topic rocks

  4. PHAM says:

    Hello,

    According to your plugin, the content of an element tag is changed base on the id of an HTML tag.

    In this case, it won’t be impossible to change 2 elements with a simple rule.
    For example, I have 10 submit button with the same id and I want to change their value from Submit to Abschicken with a single definition in a package file instead of 10 definitions. I can perhaps assign them all with a single id but it’ll be against the rule of HTML which says that ID is an unique element.

    I think that instead of using id attribut, you can use another customized attribut such as langtag for example. It’ll create no dependent with the existing HTML document so it’ll be easy for deployment.

    Looking forward to your reply,

    Best regard,
    PHAM

    • cms4j says:

      hello pham,

      you are right, but this is not a problem of my plugin, but a general problem.
      If one codes his HTML pages in that way giving unique IDs to more than one element than he has to cope with all side effects that are procuded.

      I created that plugin from the point of view of a developer of more or less huge web applications with unique element-IDs.
      So for that usecase the plugin works i think.

      Regards,
      Christoph

  5. Catrice Gayo says:

    Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed surfing around your blog posts. After all I’ll be subscribing to your feed and I hope you write again very soon!

  6. Great approach thanks. What about If I want to localize dynamic content handled by Jquery:

    $(‘#frontStatus’).html( ‘Calling…’ );

    will not work, isn’t it?

    • cms4j says:

      Hello Bogomil, you are right, this alone will not work as you can not identify the text to be translated in any way.

  7. $(‘#frontStatus’).html( ‘. class=”l10n” id=”jcalling”>Calling…’ );

    • cms4j says:

      Hello again,

      yes, this one is better. You have got an id to identify the element you want to translate and you have applied the class that makes it easier for the plugin as it does not have to run through all the elements in your page.
      Summed up: that will do.

      Christoph

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s