Skip to content

Translations & Localization

Jump to bottom
Paninee K edited this page Mar 25, 2022 · 10 revisions

Localization

Overview & work flow

We are using Phrase for translation management, machine translations and human translation verification. In the app we are using a node.js i18n library to serve the correct locale files. To add or edit new content, update locales/en.js following the key naming conventions outlined below. Once you have added new content to /locales/en.js you will need upload /locales/en.js to Phrase which will kick off the automatic machine translations for the other languages. Once those are complete, you need to download the other language *.js files and open a PR with the updated files.

Phrase editing and verification instructions for editors can be found here: https://docs.google.com/document/d/1qHoyDOVS2N1eOyCwZvt1LiTZ9YYm_rJlIOpacuSI1V8/edit

Rendering localized text in HBS templates

Use the t helper function and pass the key of the string you wish to render.

<p>{{t "research.surveys.p1"}}</p>

For strings that require interpolation of variables, use the __ function in the template and %s in the string definition to represent each variable you are passing in:

string definition in en.js:

"about.cases.example": "For example, this case on %sParis’s 2017 Participatory Budget%s
is one of over 160 case entries documenting the use of participatory methods to give
citizens stronger influence over the distribution of public resources.",

in HBS template:

{{{__ "about.cases.example" "<a href='/case/5008'>" "</a>"}}}

Getting localized text in a controller

req.__("title_label")

Key Best Practices

  • for single words and short titles or phrases, use the actual text as the key.
{
  "Cases": "Cases",
  "Publish": "Publish",
  "Project Director and Co-Founder": "Project Director and Co-Founder",
}
  • for page/section specific text use dot-notation to name space pages/sections
{
  "about.cases.p1": "Cases are events and instances of participatory politics
   and governance of all shapes and sizes.",

  "about.ckmc.title": "Communications & Knowledge Mobilization Committee",

  "research.tagline": "Participedia is guided by the research question:
   What kinds of participatory processes work best, for what purposes,
   and under what conditions?",
}

Dynamic keys

values for field options can be retrieved using this key format: name:${fieldName}-key:${fieldOptionKey} eg: name:implementers_of_change-key:experts

labels, instructional text and placeholders for articles are in this format: ${article.type}_${view}_${name}_label eg: case_edit_title_label eg: case_view_title_label

Supporting a new language

To support a new language we should do these steps:

  1. Add new language in the switcher

Add a new language in switcher on the top right position of the page and on the bottom left position of the page as well. To do this we should add this:

In the handlebars-helper.js in method getLanguageSelectorTabs, we should add a new title of the language like this

{ title: i18n("Dutch", context), key: "nl" },

And in constants.js should add this

{
    twoLetterCode: "nl",
    name: "Dutch"
}
  1. Add new locale

Translate all static text via Phrase and add them into the project.

  1. Add new language in creating/editing entry in dropdown input

We need to allow the user to create an entry in the new language as well. To do so add these code:

Add this in select.html file

<option {{#if (isEqual req.locale "nl" )}}selected{{/if}} value="nl">{{t 'name:nl'}}</option>

And this in submit-form-language-selector.html file

<span class="js-form-language-selector" data-language="nl">Dutch</span>
  1. Run scripts/generate-entry-i18n-single-language.js to translate all existing data into the new language. Change the language object variable accordingly.

Supporting a new search language

If we want to support search engines in a new language we should create a migration script for the search index on the language that we want to support. To create a migration script we should do next:

  1. In the migration folder we should create a new sql file. The name of the file should contain migration and increase the number of the last sql file created.
  2. Content of the file should be the same as what we have in files from migration_052 to migration_057. We can copy that and we should change the language on what we want to support.
  3. Now we need to run the script. First, in package.json we need to change migratelatest to support our script. Example how it can look likes.
"migratelatest": "f(){ psql -d \"postgres://postgres:12345@localhost:5432/participedia\" -f \"migrations/migration_051.sql\"; };f",

Then we just need to run the script with this command:

npm run migratelatest
Clone this wiki locally