How to :: manage languages in Toucan¶
Locale vs language: what’s the difference?¶
Locale includes language and other elements that are attached to the language.
For instance in the French locale (
fr) we use the French language
but we also use space as a thousand separator and
, as a decimal
On the other hand, in the English locale (
en) we use the English
. as thousand and decimal separator
The locales of the app are set up in the
is accessible from the instance page, after clicking on Parameters.
You can set up:
- availables locales
- default locale
It should look like this:
i18n: available_locales: [ "fr" "en" ] default: "en"
This locale sets up:
- the language used in the menu (Glossary vs Glossaire, etc.). No need to set up a translation for those. The translation is automatic. Available languages menu : French and English.
- the format used for number (thousands and decimal separator) and dates. No need to set up expected format for those. The “translation” is automatic. Available formats : French and English.
- the translation to use for your slides (if you have set up a translation, see below).
The possible locales are:
Let your users choose the language of their application directly from the home page!
To activate translation, your locales should be set up properly as explained above.
To setup translation you’ll need to work on two things:
- your stories
- a dictionary file
Set up your stories¶
Before starting, make sure you have the following set up in your
front_config.cson file, at the root of the config.
While configuring your stories, you have to flag the elements to translate. Like templating, you need to indicate to Toucan that this word will be dependending on the language picked by the user.
You need to type something like :
"<%= lang.ELEMENT_TO_TRANSLATE %>".
You can translate most of your story’s elements: Title, commentary, recommendations…
ELEMENT_TO_TRANSLATE needs to be unique! It will be your
translation key in the dictionary.
Set up the dictionary¶
The translation dictionary is available from the Assets menu. At the
bottom, you can download the
For each language you make available in your application, a traduction key must be written.
In the dictionary, all you need to do is write down the traduction key an it’s translated value for each of the language available to your user.
It should look like this:
en: "ELEMENT_TO_TRANSLATE_1": "Global sales" "ELEMENT_TO_TRANSLATE_2": "Slide Title" fr: "ELEMENT_TO_TRANSLATE_1": "Ventes Globales" "ELEMENT_TO_TRANSLATE_2": "Titre Slide"
Don’t forget to drop the modified
locales.cson file, and you’re all