MFE Translation How To's

1 How to internationalize your React App
2 How to format strings
- 2.1 Using the “description” field
- 2.2 Plurals vs. Singular
- 2.3 Gender agreement
3 How to get strings translated in MFE’s

How to internationalize your React App

https://github.com/edx/frontend-platform/blob/master/docs/how_tos/i18n.rst

This is a step by step guide to making your React app ready to accept translations. The instructions here are very specific to the edX setup.

How to format strings

There are two main ways we format strings for translations.

Using strings directly in <FormattedMessage /> components.

<FormattedMessage
  id="myApp.genericString.okay"
  defaultMessage="Okay"
/>

Separating strings into a messages.js file and then using intl.formatMessage()

const myString = {
  id: "myApp.genericString.okay",
  defaultMessage: "Okay",
};

function OkayButton({ intl }) {
  return (
    <>
      {intl.formatMessage(myString)}
    </>
  );
}

OkayButton.propTypes = {
  intl: intlShape.isRequired,
};

export default injectIntl(OkayButton);

For more context: https://github.com/edx/studio-frontend/tree/master/src/data/i18n#using-translated-strings

Using the “description” field

The description field is used to provide context of our strings to translators. When the context of a string is not obvious, it can lead to inconsistent translations across our platform.

In the following example, the string “Apply” may be translated to “Aplicar” in Spanish, which is incorrect in this scenario. The correct Spanish translation would be “Actualizar.” This is why it’s important to provide context!

Don’t write a vague description about the HTML element itself

'applyLinkLabel': {
  id: 'myApp.application.apply',
  defaultMessage: 'Apply',
  description: 'a link label',
}

Plurals vs. Singular

The English language only has "singular" and "plural" (or "not singular"); other languages such as Russian or Arabic have more than two options, depending on whether zero, one, two, a few, or many items exist. If we do not handle these cases, a string as incorrect as 1 results may be rendered in those languages.

Gender agreement

It’s important to be aware of when gender agreement may be a factor in translations. In the English language, verbs, adjectives, adverbs, etc. do not have gender forms. The following example demonstrates how in the Polish language, the gender of the subject of the sentence impacts the gender form of the verb.

How to get strings translated in MFE’s

Get access to the Jenkins translation jobs by asking your Embedded SRE to add you to the Github team, or if you don’t have an Embedded SRE filing an SRE ticket.
Get access to the translations Google Group.
Add your strings in their respective components (see above for formatting in MFE’s), merge your changes to master.
Run the command to run the Transifex job for the repo your string are in.
1. For example, Learning MFE push translations.
Your strings will be translated by translators in Transifex, and approved.
1. If this is a time sensitive translation, contact an edX engineer who has translation permissions to approve the new strings.
2. If this is not time sensitive, most MFE’s have an edX Transifex Bot that will capture new strings and automatically create a new pull request. Please note the pull request will not be automatically deployed to prod. Example pull request.
Run the command to pull translations in for the same repo.
1. For example, Learning MFE pull translations.
After the translation update build finishes deploying to stage, check the page you added the translations to see if they are in fact translated correctly. If something needs to be edited, forward fix them.
Deploy to prod and verify prod is translated as expected.