Multi-Language Support on Open edX

One of the more challenging aspects of developing a site on a global scale is enabling it to manage multiple languages. For sites based on Open edX , integrating multilingual features is certainly no easy task. To make things easier however

, we’ve provided a clear step by step solution to this.

First off, there are two possible services available that can help make an Open edX site multilingual:

  1. Transifex
  2. Localizejs

Transifex: 
Officially supported by Open edX to localize  edX site,s Transifex is where all translation of the Open edX framework is currently hosted. Here’s a link to their site: www.transifex.com

Here’s how you can integrate this in your code:

Section 1: Developer Stack Configurations
Step 1: Switch to edXapp environment:

  1. sudo -H -u edxapp bash
  2. source /edx/app/edxapp/edxapp_env
  3. cd /edx/app/edxapp/edx-platform

Step 2: Configure your ~/.transifexrc file:

  1. [https://www.transifex.com]
    hostname = https://www.transifex.com
    username = user
    password = pass

    token =
  2. *Make sure the token is left blank*

Step 3:  Make sure all languages you wish to download are present and uncommented in

  • conf/locale/config.yaml.

Example: If you wish to download Arabic and Chinese (China), make sure your config.yaml file looks like this:

  • locales:
    • ar  # Arabic 
    • zh_CN  # Chinese (China)

Step 4: Configure LANGUAGE_CODE in your LMS (lms/envs/common.py). Or, for development purposes, create a dev file called dev_LANGCODE.py – eg dev_es.py – with the following:

  1. from .dev import *

    USE_I18N = True
    LANGUAGES = ( (‘es-419’, ‘Spanish’), )
    TIME_ZONE = ‘America/Guayaquil’
    LANGUAGE_CODE = ‘es-419’

Step 5: Configure EDXAPP_LANGUAGE_CODE in your configuration files. Here’s an example:

  1. https://github.com/edx/configuration/blob/master/playbooks/roles/edxapp/defaults/main.yml#L246

Step 6: Execute the following command in your edx-platform directory with your edx-platform virtualenv:

  1. $ paver i18n_robot_pull
    • This command will pull reviewed translations for all languages that are listed in conf/locale/config.yaml.
    1. To only pull down some languages, edit conf/locale/config.yaml appropriately.
    2. To pull unreviewed translations along with reviewed translations, edit edx/app/edxapp/venvs/edxapp/src/i18n-tools/i18n/transifex.py

Note: When you launch your LMS instance you can launch it normally and things should display properly. However, if in Step 4 you created a special “dev_LANGUAGECODE” file, you’ll need to launch the LMS with the environment file explicitly stated:

  • $ paver lms -s dev_es -p 8000

Note: If you experience issues along the way:

  • Be sure your browser is set to prefer the language set in LANGUAGE_CODE.
  • In common/djangoapps/student/views.py the user’s language code is trying to be obtained from a saved preferences file. Therefore, if you’re having issues seeing your language served up, it may be because your User object has a different language saved as a preference. Try creating a new user in your environment, this should clear up the issue.


Section 2: MultiLingual edX site

Setting the LANGUAGE_CODE enables one language as your installation’s default language. You’re probably asking: “What if you want to support more than one language? To “release” a second (or third, or hundredth) language here is a list of instructions to do so:

Step 1: First, you have to configure the languages in the admin panel.

Step 2: While the LANGUAGE_CODE variable is used to determine your server’s default language, in order to “release” additional languages, you have to turn them on in the dark lang config in the admin panel. Here’s an example link of where the dark lang config is located in the admin panel:
YourAwesomeDomain.com/admin/dark_lang/darklangconfig/
    

Step 3: After this, add the language codes for all additional languages you wish to “release” in a comma separated list. For example, to release French and Chinese (China), you’d add  fr, zh-cn to the dark lang config list.

Note: You don’t need to add the language code for your server’s default language, but it’s certainly not a problem if you do.

Note: Remember that language codes with underscores and capital letters need to be converted to using dashes and lower case letters on the edX platform. For example the language code of Chinese (Taiwan) is “zh_TW” on Transifex, but “zh-tw” on the edX system.

Confusing? I know. However, the benefits definitely outweigh the initial confusion. Benefits include that you can preview languages before you release them by adding: ?lang-code=xx to the end of any url, and ?clear-lang to undo this. Here’s an example:

  • 127.0.0.1:8000/dashboard?preview-lang=fr       #French
  • 127.0.0.1:8000/dashboard?clear-lang       #Sets the site back to default language

Section 3: Full stack Configurations
For a Local Full stack installation, follow Step One and Two from the Devstack deployment section and then follow these steps:

Option 1: If you only need to pull translations of one language, simply execute the following command in your edx-platform directory with your edx-platform virtualenv:

  •  $ tx pull -l <lang_code>
    • *The <lang_code> here should be replaced by the language code on Transifex of the language you want to pull (for example, zh_CN for Chinese (China)).

Note: This option will overwrite the .po files located in conf/locale/<lang_code>/LC_MESSAGES with the contents retrieved from Transifex, so please only do this step when Transifex is newly installed or when you really want a new version of translation from Transifex.

Option 2: If you already have your own changes of edX-platform’s source code in your local installation or the source files on Transifex is not up-to-date, you may need to extract strings manually. The following steps below will show you how:

Step 1: Execute the following command in your edx-platform directory with your edx-platform virtualenv:

  • $ paver i18n_extract    
    • This command will extract translatable strings into several .po files located in the conf/locale/en/LC_MESSAGES.

Step 2: After this extraction process, you can merge the newly extracted strings into the corresponding .po files located in conf/locale/<lang_code>/LC_MESSAGES (except django.po and djangojs.po, which are generated by i18n tools automatically from other .po files).

Step 3: Edit the .po file and then recompile them using: $ paver i18n_fastgenerate
Note: If you want to change the default language code of a Full Stack, you can modify the value of LANGUAGE_CODE inside lms.env.json and/or the cms.env.json located in /edx/app/edxapp before restarting your Full Stack.

Result: After completing these steps, you should see updated translations. If for some reason they don’t show up, try to restart the nginx server and/or clear your browser’s cache.

Localizejs:
Localize is a promising and insanely easy-to-use service that runs on your website by executing from a one-line JavaScript snippet. This one line of code will load Localize on your site and automatically change the language based on the language preference of visitors.

How it works:
By loading Localize code onto your website, it can:

  • Identify text on your website,
  • Replace text with translations, when available,
  • Adapt the text for pluralization and variables,
  • Order translations for unrecognized content,
  • Help you go global!

The Localize library translates the phrases on your pages and sends unrecognized phrases to the Localize dashboard for later translation. On the Localize dashboard, you can:

  • View content and translations
  • Add or remove languages
  • Translate content
  • Order translations (machine or human)

Steps for using localizejs:
Integrating localizejs is a very straightforward process:

Step 1: Create a project account on localizejs.com. As a result, a localized code snippet with project id is generated.

Step 2: Add this code snippet to the header file of the website.
   for eg:  1) main.html
               2) django_main.html

Results: After reloading the page, a toggle menu bar will appear on the page with languages ts hat you selected in your localizejs account. This enables users to select a language of his/her choice. And as soon as they do this, bingo, the language on all pages that have the snippet is changed based on the user’s choice.

Afterthoughts:
Following the successful installation of either of the two services, the sheer number of languages provided makes the whole process worth it. From Arabic to Swahili, both of these solutions provide an astounding 93 languages in total. When you’re trying to attract customers from around the world, comprehensibility plays a critical role in this. By integrating multiple languages on an edX site, not only is it a huge step towards fixing localization issues, but you’re developing a higher standard of consideration towards your visitors.

Reference: https://github.com/edx/edx-platform/wiki/Internationalization-and-localization