LocalePlanet

HOWTO: How to localize a JavaScript application

Using GNU GetText and the LocalePlanet API

Step by Step

  1. Add the LocalePlanet scripts to your pages:
    <script src="http://www.localeplanet.com/api/auto/icu.js"></script>
    <script src="http://www.localeplanet.com/api/translate.js"></script>
  2. Everywhere you display a number or date, use one of the icu.js functions to format it first.
    For example, you would change
    today.getDay() + '/' + today.getMonth() + '/' + today.getFullYear()
    to
    icu.getDateFormat('SHORT_CENTURY').format(today)
  3. Everywhere you display text, pass it to the _() function.
    For example, you would change
    alert('Hello, world!');
    to
    alert(_('Hello, world!'));.
  4. You can use the previous two steps together. For example, you would change
    alert('Today is ' + today.getDay() + '/' + today.getMonth() + '/' + today.getFullYear());
    to
    alert(_("Today is {0}", icu.getDateFormat('SHORT_CENTURY').format(today)));
  5. Use the GNU gettext programs to extract the text from your pages. You end up with a .po file with just the text strings in your native language.
  6. Translate the .po file. Most translators/services/etc. can work with them. I recommend poedit, a simple GUI program that works on Windows/Mac/Linux. You will end up with an additional .po file for each translated language.
  7. Use the po2js or po2json scripts to convert the .po files to something usable by JavaScript. Put these files on your website and add the appropriate one to your pages.
  8. Call _.setTranslation() with the JSON data from the previous step.

Notes