Localization in a web app using JavaScript and JSON

Question

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!

Answer 1

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

Answer 2

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.