Translations

The viewer speaks the user’s language: it picks the best match from the browser’s languages. To choose one yourself, set locale:

{ locale: 'de' }

locale follows its prop, so a language switch in your app switches the viewer too. Without it, or with 'auto', the viewer follows the browser.

The languages it speaks#

English, German, French, Spanish, Italian, Dutch, Portuguese, Polish, Japanese, Chinese (Simplified), Korean, Arabic and Hebrew. Each one loads only when it’s needed. For Arabic and Hebrew, the viewer is right-to-left: the bars mirror, and start and end swap sides.

A language matches in its own script: readers of Traditional Chinese (zh-TW, zh-HK) see English, not Simplified Chinese, until there are strings for zh-TW.

Change a word#

A built-in button’s label has the command’s id as its key. Give a new one, per language:

{
  strings: {
    en: { 'document:download': 'Save a copy' },
    de: { 'document:download': 'Kopie speichern' },
  },
}

Translate your own buttons#

Give a command a labelKey instead of a label, and its words per language:

{
  commands: [{ id: 'acme:send', labelKey: 'acme.send', icon: 'signature', run: send }],
  strings: {
    en: { 'acme.send': 'Send for signature' },
    nl: { 'acme.send': 'Verstuur ter ondertekening' },
  },
}

Panels and mode bars take a titleKey the same way, for their title.

The style panel’s words have keys too: each property and option by what it says (annotation.style.stroke, annotation.flags.noView, annotation.lineEndings.openArrow), and a form field’s settings by theirs (form.settings.tooltip). Change one like any other word:

{ strings: { en: { 'annotation.style.stroke': 'Line' } } }

A language of your own#

Give strings for a language the viewer doesn’t have, and it becomes one of its languages. Anything you don’t translate shows in English, or in the plugins’ own words where they have that language (in Swedish, the zoom, page and copy buttons):

{
  locale: 'sv',
  strings: { sv: { 'document:download': 'Ladda ner', 'zoom:in': 'Zooma in' } },
}

It reads right to left when its code says so: a right-to-left language such as fa or ur, or a right-to-left script such as ku-Arab.

Good to know#

Change the language from code#

viewer.get('i18n').setLocale('fr') does the same as the locale prop, and returns a promise that resolves once the language has loaded.

Add words while the app runs#

viewer.get('i18n').addTranslations('nl', { … }) adds or replaces words in a language without starting over, for words that arrive from your own translation service.

Labels in the toolbar#

The toolbar measures the words it shows, so a longer translation moves fewer or more buttons into the “More” menu by itself.