Localizing the Adapt It Mobile User Interface

We currently have user interface localizations for:

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

Reporting a problem

If you come across an untranslated or mistranslated string in the user interface, you can use the issue tracker to report the issue to us. Please provide the following information, and we can correct the problem:

• What the UI string currently says
• What it should say

Localizing the Adapt It Mobile user interface

No Code option :-)

If you are not comfortable making modifications to the code, but would still like to add your language, just let us know. We can perform the following steps for you, and you would only need to provide the localized strings. Thanks!

To add a language

1. Create a new subfolder under www/locales with the ISO 639-1 code for the language (use the ISO 639-3 code if there is no 2-character ISO 639-1 code defined).
2. Copy the two files local.strings and translation.json from the www/locales/dev directory into the newly-created directory.
3. Add your language code and name as an option to the file www/tpl/UILanguage.html. This will ensure that users will be able to switch to your language even if their mobile device doesn't directly support it (like Tok Pisin).
4. Localize the strings found in the translation.json file copy in your new directory.
5. Test the changes you've made by changing the user interface language in Adapt It Mobile to your language.

To add a string

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

1. Open up the www/locales/[your language code]/translation.json file and search for the line:

   "_comment" : "Add new strings BEFORE this line!"

2. Add a new line before the line, 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.

---

Implementation details and development instructions

We are currently using i18next.js, an open source javascript library, to localize the Adapt It Mobile UI. We also have some helper methods written to integrate the strings with our Handlebars.js templates. 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'}}

For variable replacement, use this form:

{{ tr this key='view.myNewKey' }} 

There are a set of helper methods in the file www/js/utils/HandlebarHelpers.js 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...
// simple localized string
var localizedString = i18n.t('view.myNewKey');
// localized string with variable replacement
var localizedString = i18next.t('view.myNewKey', {var: myVariable});