Internationalization

In this document
chevron_rightUpdating the DOM

Internationalization is supported by WebViewer through the use of JSON language files. There is an internationalization sample provided that shows how to add a custom button that allows the user to select their preferred language.

Creating your own translations

Several translation files are provided by default in html5/Resources/i18n. It is recommended that you create a copy of the English translation file (translation-en.json) and work from there.

Your custom file should have a file name in the form translation-languagecode.json and simply needs to be placed in the same directory.

To edit the translation file you need to change the values to the right of the colon. For example to edit the “Full Screen” translation:

"controlbar": {
  "fullScreen": "My New Translation",}

A couple of the translation values have text that starts and ends with two underscores:
"pageNumber": "Page __number__"

In this case __number__ is a variable and will have its value substituted in at run time (for example Page 5). Only the non-variables should be changed for these translations (for example "Página __number__").

Updating the DOM

WebViewer uses the i18next library to handle translations. With this library the translation codes are added as a data attribute to the DOM elements and the i18n function is called on the element to translate it.

By default WebViewer will call $(document.body).i18n() after i18next is loaded to translate the entire UI. If you add your own custom elements you'll need to call i18n yourself after adding them to the DOM.

For example, if you want to add a new button to the top toolbar that jumps to the last page you could first create the element in your config file:

var button = $('<span data-i18n="[title]controlbar.goToLastPage">').attr({
  'id': 'lastPageButton',
  'class': 'glyphicons circle_info'
})
.on('click', function() {
  readerControl.goToLastPage();
});

container.append(button);

button.i18n();

The value inside the square brackets is the element attribute that you want to set. If no square brackets are specified it will set the text content.

If you have a variable in the translation value you can use i18n-options. For example:

$element.attr('data-i18n', '[title]notesPanel.annotLineDesc');
$element.data('i18n-options', {
  pageNumber: annotation.PageNumber,
  subject: annotation.Subject,
  author: annotation.Author
});