AsTeRICS

# Internationalization

There are two aspects of internationalization in AsTeRICS Grid:

This developer documentation explains the technical background of both forms of translations.

# Translation of contents

The data model of Grid and GridElement (see Data model) have a label property which contains an object as a map of translated labels. For instance:

{
  "en-us": "Fries",
  "en-gb": "Chips",
  "de": "Pommes",
  "es": "Patatas fritas"
}

The key is the ISO 639-1 (opens new window) language code which can be combined with ISO 3166-1 alpha-2 (opens new window) codes for localization of the languages. Possible combinations are predefined, see variable “allLangCodes” in i18nService.js (opens new window).

The modal component gridTranslateModal.vue (opens new window) allows to define these translations of element labels.

The property “lang” for word forms (opens new window) also contains the same ISO 639-1 / ISO 3166-1 alpha-2 language codes as described above and defines the language for a specific word form. Word forms are set up in editElementWordForms.vue (opens new window).

# Translation of the app

All app translations are located in folder app/lang (opens new window). This folder contains a file for each language where app translations are existing. Important infos:

  • the translations are managed by crowdin (opens new window)
  • the source of the translations are the English translations in i18n.en.json (opens new window), all other translations files should not be altered manually
  • Workflow:
    • change / add English translation in i18n.en.json
    • push changes to master branch on GitHub
    • wait for crowdin so sync with master or manually sync in crowdin at Integrations -> GitHub -> Sync Now
    • translate to other languages in the crowdin dashboard (opens new window)
    • crowdin creates a pull-request on GitHub from branch l10n_master which can be merged to master
  • theoretically also localized languages are possible as app languages, crowdin is configured to use the %osx_locale% placeholder for filenames. Reason: little changes to existing file names when set up. This can be changed at crowdin: Integrations -> GitHub -> Edit -> Edit (pencil)
  • App languages that can be used in the app are defined in i18nService.js (opens new window). Currently this doesn’t include localized languages, maybe needs some adaptions in order to integrate them.

# Translations in code

There are several possibilities to get translations while coding.

# Get app language translations

In Vue templates it’s possible to simply use the function $t() of the used vue-i18n (opens new window) plugin:

  • $t('someKey') retrieves the translation if it’s defined like "someKey": "my translation" in i18n.en.json
  • $t('someKey', {paramKey: "some param"}) retrieves a translation defined like "someKey": "my translation with {paramKey}" in i18n.en.json

It’s also possible to use i18nService.t() the same way outside a Vue context.

# Get content language translations

For retrieving content language translations in code, you can use i18nService.getTranslation(). It takes a key/value object as described in translation of contents above and returns the translation in the current content language set in the application. So i18nService.getTranslation(gridElement.label) returns the current label of a grid element.

← Previous Chapter Next Chapter →

Back to Overview

← Tutorial →