I18N.md

Coding with Chrome - i18n translation

Adding additional language support

Create a language folder

If your language is currently not supported, create a new folder under locales/[language code]/.

For the language code, please use the ISO 639-3 definitions. Example: locales/deu/

Add the language identifier file

After creating the folder, please make sure to add the identifier file. locales/[language code]/_[language code].js for e.g. locales/deu/_deu.js.

Add the language code to the supportedUserLanguage

Add the new language code to the supported user language in the file src/locales/supported.js like:

Locales['supportedLanguages'] = [
  'deu',
  'eng',
  'jpn',
+ '[language code]',
];

Add language mapping to i18n tool

To make sure we are mapping the language correctly, please add the corresponding language mapping to src/utils/i18n/i18n_mapping.js.

Add additional build rule

Create a new build rule in the file build/cwc/locales.js.

Example for the "deu" translation:

/**
 * DEU Translation.
 */
closureBuilder.build({
  name: 'Locales.deu',
  srcs: glob([
    'locales/deu/_deu.js',
    'locales/deu/**/*.js',
  ]),
  externs: [
    'build/externs/locales.js',
  ],
  compress: true,
  options: {
    closure: {
      rewrite_polyfills: false,
    },
  },
  out: 'genfiles/core/js/locales/deu.js',
});

Adjust Blockly translation build rule

Adjust the Blockly translation build rule in the file build/external/extra_files.js to include the new supported language.

Example for the "deu" translation:

/**
 * Blockly translation
 */
closureBuilder.build({
  name: 'Blockly language files',
  resources: [
    ...
    BlocklyPath + 'msg/js/de.js',
    ...
  ],
  out: 'genfiles/third_party/external/blockly/msg/',
});

Additional language support

Take a look into the locales/eng/ folder and start translating the different type of text.

(Skip the deprecated locales/eng/translation.js file!)

Please make sure that you only add translated text into this new file. It also fine to start with a few lines and adding the rest later.

If the new file is ready, create a pull request under the following URL: https://github.com/google/coding-with-chrome/pulls

Translation Key Format

For i18t(...) and {msg ...}

The translation key has the following format for the i18t(...) and {msg ...} implementation:

@@[Group]__[Key] (e.g. @@WELCOME_SCREEN__TITLE)

Group Most of the translations are defined for one group like "WELCOME_SCREEN__".

Key The key is used to identify the correct translation text like "TITLE".

Language translation files

All language translation files under locales/[language]/*.js using the following structure:

Locales[Language][Group] = {
  'Key': 'Translated text',
  ...
};

Example:

Locales['deu']['WELCOME_SCREEN'] = {
  'TITLE': 'Willkommen zu Programmieren mit Chrome!',
  'DESCRIPTION': 'Coding with Chrome ist eine pädagogische Entwicklerumgebung',
  ...
};

Missing translations

If you miss the translation for certain UI parts, please submit pull request to add them. All translations are using a KEY for the translation and maybe separates files like locales/deu/welcome_screen.js.

In JavaScript files

Use the global "i18t" function to add the translation to any text. Please keep in mind that it could be that some text is already translated by general functions.

  i18t('@@TEST__UNIQUE_TEXT_KEY')

Variable support

The i18t library also supports variables for dynamic content like:

Locales['deu']['WELCOME_SCREEN'] = {
  'HELLO_NAME': 'Willkommen {$user} zu Programmieren mit Chrome!',
  ...
};

  i18t('@@WELCOME_SCREEN__HELLO_NAME', {'user' : 'Tester'})

In soy files

For soy files, use the {msg desc=""} {/msg} tags to mark any text. Please keep in mind that it could be that some text is translated by general functions instead directly.

  {msg desc=""}
    @@TEST__UNIQUE_TEXT_KEY
  {/msg}