I'm trying to set up a script to automatically localize a web application. As the web application is intended to use HTML5's offline caching ability, it needs to be able to work offline. As such, JavaScript seems to me to be the best option.

I'd prefer to put all the strings for all localizations in a single JSON file like so:

{
    "en": {
        "application_description": "This is the application's description in English.",
        "application_name": "This is the application's name in English."
    },
    "ja": {
        "application_description": "This is the application's description in Japanese.",
        "application_name": "This is the application's name in Japanese."
    }
}

I was thinking maybe of giving all elements that will be localized a custom attribute linking to the intended message (eg: i18n="application_name").

I can retrieve the browser's language using navigator.language, though I think some results will have to be split into just their first section (eg: "en-US" "en-GB" and "en-AU" should all refer to "en").

However, my JavaScript knowledge is basic, and while I've thought about it, I cannot determine how to actually implement this.

Many thanks to anyone who can offer any tips or examples!

I'm trying to set up a script to automatically localize a web application. As the web application is intended to use HTML5's offline caching ability, it needs to be able to work offline. As such, JavaScript seems to me to be the best option.

I'd prefer to put all the strings for all localizations in a single JSON file like so:

{
    "en": {
        "application_description": "This is the application's description in English.",
        "application_name": "This is the application's name in English."
    },
    "ja": {
        "application_description": "This is the application's description in Japanese.",
        "application_name": "This is the application's name in Japanese."
    }
}

I was thinking maybe of giving all elements that will be localized a custom attribute linking to the intended message (eg: i18n="application_name").

I can retrieve the browser's language using navigator.language, though I think some results will have to be split into just their first section (eg: "en-US" "en-GB" and "en-AU" should all refer to "en").

However, my JavaScript knowledge is basic, and while I've thought about it, I cannot determine how to actually implement this.

Many thanks to anyone who can offer any tips or examples!

• javascript
• json
• web-applications
• localization

• 2 Language switching w/o realod isn't actually required, thus it will be better to place each language in its own file. – kirilloid Commented Feb 23, 2011 at 12:10

3 Answers 3

You can use Wikimedia's JQuery.i18n.

• Documentation: https://github.com/wikimedia/jquery.i18n/wiki/API
• Demo: http://thottingal.in/projects/js/jquery.i18n/demo/
• Message Syntax: https://github.com/wikimedia/jquery.i18n/wiki/Message-Syntax

http://keith-wood.name/localisation.html

https://github.com/coderifous/jquery-localize

I don't have any personal experience in either but both appear to be fairly well documented.

Depending on your needs, the jquery-localize function might work well. If you need a more complex structure that mirrors that of your website, the localize library might be more useful: https://github.com/kflorence/localize