Internationalization

Intake24 is designed to be used in multiple languages and regions. It supports internationalization (i18n) and localization (l10n) features to provide a seamless experience for users around the world.

Process involves several steps:

• User Interface (UI) translation
• Adapting date, time, and number formats
• Food index search and matching
• Food database
• Survey content

User Interface (UI) translation

Translating the UI involves creating language files for the target languages.

Files are locales in i18n package

packages
└─ i18n
   └─ src
      ├─ admin - Admin tool translations
      │  ├─ en
      │  │  ├─ survey.json
      │  │  └─ ...
      │  └─ ...
      ├─ api - API translations
      │  ├─ en
      │  │  ├─ validation.json
      │  │  └─ ...
      │  └─ ...
      ├─ shared - Translations required by both admin and survey frontend
      │  ├─ en
      │  │  ├─ common.json
      │  │  └─ ...
      │  └─ ...
      └─ survey - Survey frontend translations
         ├─ en
         │  ├─ recall.json
         │  └─ ...
         └─ ...

To add a new language, create a new folder with the appropriate language code (e.g., fr for French) in each of the relevant directories (admin, api, shared, survey) and populate it with the necessary translation files. Reach out to the development team or submit a pull request with the necessary translations to support the desired language.

TIP

Not all files are required for every language. For example, if you only want to translate the survey frontend, you can create translation files only in the shared and survey directories.

Format of the file is JSON and and each contains key-value pairs where the key is a unique identifier for a phrase and the value is the translated text in the target language.

When translating JSON files, ensure the structure of the files remains the same, i.e. the keys remain consistent across all languages, and only the values are translated. This allows the application to correctly map the translations to the appropriate UI elements.

Basic translation example

Most basic translation files contain simple key-value pairs for static text in the UI.

English - survey/en/common.json

{
  "_": "Intake24",
  "home": "Home",
  "dashboard": "Dashboard",
}

French - survey/fr/common.json

{
  "_": "Intake24",
  "home": "Accueil",
  "dashboard": "Tableau de bord",
}

Dynamic content placeholders

Translation files can also include placeholders for dynamic content.

WARNING

When placeholders are used, ensure that the placeholder syntax is unchanged.

English - survey/en/common.json

{
  "welcome": "Welcome, {name}!"
}

French - survey/fr/common.json

{
  "welcome": "Bienvenue, {name}!"
}

Adapting date, time, and number formats

Requires minor code changes into the frontend UI to adapt date, time, and number formats according to the target region. Reach out to the development team or submit a pull request with the necessary changes to support the desired formats.

Food index search and matching

Requires to set up a food index backend support for the target languages / locale. Reach out to the development team or submit a pull request with the necessary changes to support the desired languages / locale.

Food database

Intake24 food database includes several locales, for current list, reach out to the development/research team.

Survey content

Survey content (e.g. instructions, questions, etc.) is stored in the database and can be translated using the admin tool UI.