Localizing the Adapt It Mobile User Interface

We currently are using i18next.js, an open source javascript library, to localize the Adapt It Mobile UI. Current localizations include:

• English (en / default)
• French (fr)
• Spanish (es)
• Tok Pisin (tpi / Papua New Guinea)

Localized strings are found in the www/locales folder, under the ISO 639 code for the locale.

To Add a string

1. Open up the www/locales/dev/translation.json file and search for the comment:

   // Add new strings BEFORE this line!

2. Add a new line before the comment, and type in the name of the string key and value like this (make sure your key is unique so that it can be found by i18next when it does the lookup):

   "myNewKey": "My cool new localized string value.",

3. Copy this new line to the clipboard.

4. Open each of the translation.json files -- there should be one in each locale folder -- and paste the line in just before the comment line. This is probably the most important step, to make sure each locale stays in sync.

tip: to verify the json syntax, do the following:

1. Copy the ENTIRE translation.json file text to the clipboard.
2. Open up a browser window and navigate to http://jsonlint.com/.
3. Paste the translation.json text into the text area.
4. Click the Validate button.

To Use a localized string

Because we are using Handlebars.js for templated html, there are a couple places where localized strings show up in the code.

Localized strings in handlebars templates

To add a localized string to one of the handlebars template files (under www/tpl), add it in the following form:

{{ t 'view.myNewKey'}}

There is a handlebars helper function in router.js called 't' that will do the localization for you as the handlebars file is being "compiled" to html.

Localized strings in the javascript code

There are also some places where localized strings show up in the javascript code. For these, use the i18n.t method:

// assuming a var i18n = require('i18n'); is at the top of the file somewhere...
var localizedString = i18n.t('view.myNewKey');