Pitcher JavaScript Platform

# Translations

In this section, marking the strings for translation, extracting strings to .po files, converting .po files to .json files will be covered.

# Workflow

  1. Mark strings for translation
  2. Collect strings with npm run gettext:extract
  3. Edit .po files
  4. Transform .po files to json with npm run gettext:compile

# Marking strings for translation

There are 3 global functions available for marking the strings for translation.

These are:

  • $t for single translations
  • $gettext for single translations (long version of $t)
  • $ngettext fur plural translations

WARNING

Using these functions with conditions or variables will NOT work as extract logic reads the files as raw text files and collects the strings.

# HTML

<div>{{ $t('some text to be translated') }}</div>

<!-- OR -->
<div>{{ $t('Good morning {username}.', { username: user.username }) }}</div>

<!-- OR -->
<div>{{ $gettext('some text to be translated') }}</div>

# For plurals

<div>{{ $ngettext('I have { num } tickets for {user}', num, { num, user }) }}</div>

# JavaScript

const string = $t('translate me')

// OR
const username = 'John Doe'
const string $t('Good morning {username}.', { username: username })

// OR
const string = $gettext('translate me')

# For plurals

const num = 3
const user = 'John Doe'
const string = $ngettext('I have { num } tickets for {user}', num, { num, user })

# String collection and translation

After all strings have been marked like this we will need to collect all this marked strings.

npm run gettext:extract

This will collect all $t $gettext and $ngettext strings marked as such and write them into the locale folder into .po files. .po files can be edited with a tool such as PoEdit (opens new window).

WARNING

By default all strings will be auto translated with google translate. But all strings will be marked "fuzzy".
This means you should check them and remove the "fuzzy" label or in PoEdit remove the "needs work".

After the translations have been done another run of npm run gettext:compile will transform the .po file into json files in the public/translations folder.

For more details about extracting, translating and compiling files, check Scripts section.

# Adding more languages

If you want to add more languages to the process, edit gettext.config.js file and add more languages.

← Scripts →