Localization of user interface elements

Last update: 2023-11-03
  • Created for:
  • Developer
    User

Certain content that the Spin Viewer displays is subject to localization, including zoom buttons and a full-screen button.

Every textual content in the viewer that can be localized is represented by a special Viewer SDK identifier called SYMBOL. Any SYMBOL has a default-associated text value for the English locale ( "en") supplied with the out-of-the-box viewer. It can also have user-defined values set for as many locales as needed.

When the viewer starts, it checks the current locale to see if there is a user-defined value for each supported SYMBOL for the locale. If there is, it uses the user-defined value; otherwise, it falls back to the out-of-the-box default text.

User-defined localization data can be passed to the viewer as a localization JSON object. Such object contains the list of supported locales, the SYMBOL text values for each locale, and the default locale.

An example of such a localization object is the following:

{
"en":{
"CloseButton.TOOLTIP":"Close",
"ZoomInButton.TOOLTIP":"Zoom In"
 },
 "fr":{
"CloseButton.TOOLTIP":"Fermer",
"ZoomInButton.TOOLTIP":"Agrandir"
},
defaultLocale:"en"
}

In the above example, the localization object defines two locales ( "en" and "fr") and provides localization for two user interface elements in each locale.

The web page code should pass the localization object to the viewer constructor, as a value of localizedTexts field of the configuration object. An alternative option is to pass the localization object by calling the setLocalizedTexts(localizationInfo) method.

The following SYMBOLs are supported:

SYMBOL

Tooltip for the...

Container.LABEL

ARIA label for top-level viewer element.

SpinView.ROLE_DESCRIPTION

ARIA role description for main view component.

SpinView.USAGE_HINT

ARIA usage hints for keyboard users.

CloseButton.TOOLTIP

Close button.

ZoomInButton.TOOLTIP

Zoom in button.

ZoomOutButton.TOOLTIP

Zoom out button.

ZoomResetButton.TOOLTIP

Zoom reset button.

FullScreenButton.TOOLTIP_SELECTED

full-screen button in normal state.

FullScreenButton.TOOLTIP_UNSELECTED

full-screen button in full-screen state.

PanLeftButton.TOOLTIP

Spin left button.

PanRightButton.TOOLTIP

Spin right button.

On this page