Localization of user interface elements

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

Certain content that the eCatalog Viewer displays is subject to localization, including zoom buttons, page change buttons, thumbnail button, full-screen button, close button, and scroll bar buttons.

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, and also may 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 in 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 an object contains the list of supported locales, SYMBOL text values for each locale, and the default locale.

An example of such localization object:

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

In the example above, 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 such 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 setLocalizedTexts(localizationInfo) method.

The following SYMBOLs are supported (assuming containerId is theID of the viewer container):

SYMBOL

Tool tip for...

Container.LABEL

ARIA label for the top-level viewer element.

PageView.ROLE_DESCRIPTION

ARIA role description for the main view component.

PageView.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.

ScrollUpButton.TOOLTIP

Scroll up button.

ScrollDownButton.TOOLTIP

Scroll down button.

<containerId>_rightButton.PanRightButton.TOOLTIP

Large next page button.

<containerId>_leftButton.PanLeftButton.TOOLTIP

Large previous page button.

<containerId>_lastPageButton.PanRightButton.TOOLTIP

Last page button.

<containerId>_secondaryLastPageButton.PanRightButton.TOOLTIP

Last page button.

<containerId>_firstPageButton.PanLeftButton.TOOLTIP

First page button.

<containerId>_secondaryFirstPageButton.PanLeftButton.TOOLTIP

First page button.

<containerId>_toolBarRightButton.PanRightButton.TOOLTIP

Next page button.

<containerId>_toolBarLeftButton.PanLeftButton.TOOLTIP

Previous page button.

ThumbnailPageButton.TOOLTIP_SELECTED

Thumbnails button in thumbnails mode.

ThumbnailPageButton.TOOLTIP_UNSELECTED

Thumbnails button in normal mode.

CloseButton.TOOLTIP

Close button.

InfoPanelPopup.TOOLTIP_CLOSE

Info Panel close button.

SocialShare.TOOLTIP

Social share tool.

EmailShare.TOOLTIP

Email share button.

EmailShare.HEADER

Email dialog header.

EmailShare.TOOLTIP_HEADER_CLOSE

Email dialog box upper-right close button.

EmailShare.INVALID_ADDRESSS

Error message displayed in case email address is malformed.

EmailShare.TO

Label for the "To" input field.

EmailShare.TOOLTIP_ADD

Add Another Email Address button.

EmailShare.ADD

Add Another Email Address button.

EmailShare.FROM

From input field.

EmailShare.MESSAGE

Message input field.

EmailShare.TOOLTIP_REMOVE

Remove Email Address button.

EmailShare.CANCEL

Caption for the Cancel button.

EmailShare.TOOLTIP_CANCEL

Cancel button.

EmbedShare.ACTION

Caption for the Select All button.

EmbedShare.TOOLTIP_ACTION

Select All button.

EmailShare.CLOSE

Caption for the close button displayed in the bottom of dialog after form submission.

EmailShare.TOOLTIP_CLOSE

Close button that is displayed in the bottom of dialog after form submission.

EmailShare.ACTION

Caption for the form submission button.

EmailShare.TOOLTIP_ACTION

Form submission button.

EmailShare.SEND_SUCCESS

Confirmation message displayed when email was sent successfully.

EmailShare.SEND_FAILURE

Error message that is displayed when email was not sent successfully.

EmbedShare.TOOLTIP

Embed share button.

EmbedShare.HEADER

Embed dialog box header.

EmbedShare.TOOLTIP_HEADER_CLOSE

Embed dialog box upper-right close button.

EmbedShare.DESCRIPTION

Description of the embed code text.

EmbedShare.EMBED_SIZE

Label for the embed size combo box.

EmbedShare.CANCEL

Caption for the Cancel button.

EmbedShare.TOOLTIP_CANCEL

Cancel button.

EmbedShare.CUSTOM_SIZE

Text for the last "custom size" entry in the embed size combo box.

LinkShare.TOOLTIP

Link share button.

LinkShare.HEADER

Link dialog box header.

LinkShare.TOOLTIP_HEADER_CLOSE

Link dialog box upper-right close button.

LinkShare.DESCRIPTION

Description of the share link.

LinkShare.CANCEL

Caption for the Cancel button.

LinkShare.TOOLTIP_CANCEL

Cancel button.

LinkShare.ACTION

Caption for the Select All button.

LinkShare.TOOLTIP_ACTION

Select All button.

FacebookShare.TOOLTIP

Facebook share button.

TwitterShare.TOOLTIP

Twitter share button.

Print.TOOLTIP

Print button.

Print.HEADER

Print dialog header.

Print.TOOLTIP_HEADER_CLOSE

Print dialog box top right close button.

Print.PRINT_RANGE

Label for the "Select Print Pages" section.

Print.PRINT_RANGE_CURRENT

Caption for the "Current pages" radio button.

Print.PRINT_RANGE_FROM

Caption for the "Spread range from" radio button.

Print.PRINT_RANGE_TO

Caption for the "to" numeric picker.

Print.PRINT_RANGE_ALL

Caption for the "All pages" radio button.

Print.PAGE_HANDLING

Label for the "Page Handling" section.

Print.PAGE_HANDLING_ONE

Caption for the "1 page per sheet" radio button.

Print.PAGE_HANDLING_TWO

Caption for the "2 pages per sheet" radio button.

Print.CANCEL

Caption for the Cancel button.

Print.TOOLTIP_CANCEL

Cancel button.

Print.ACTION

Caption for the Send to print button

Print.TOOLTIP_ACTION

Send to print button.

FavoritesMenu.TOOLTIP

Favorites menu button.

AddFavoriteButton.TOOLTIP_SELECTED

"Add favorite" button in edit Favorites mode.

AddFavoriteButton.TOOLTIP_UNSELECTED

"Add favorite" button in normal mode.

RemoveFavoriteButton.TOOLTIP_SELECTED

"Remove favorite" button in edit Favorites mode.

RemoveFavoriteButton.TOOLTIP_UNSELECTED

"Remove favorite" button in normal mode.

ViewAllFavoriteButton.TOOLTIP_SELECTED

"View all favorites" button when Favorites view is active.

ViewAllFavoriteButton.TOOLTIP_UNSELECTED

"View all favorites" button when Favorites view is inactive.

FavoritesEffect.TOOLTIP

Single favorite icon.

MediaSet.LABEL_XX[_YY]

Page label that is generated by the viewer at load time.

The name of that symbol is a template, where XX is a zero-based spread index in landscape orientation, and optional YY is a zero-based page index inside the spread targeted by XX .

Applies only for the initially loaded asset; ignored if an asset is changed using the setAsset() API call.

MediaSet.LABEL_DELIM

Character used as a page labels delimiter in case labels are defined for left and right pages within a spread.

ScrollLeftRightButton.TOOLTIP_SELECTED

Main control bar scroll left button.

ScrollLeftRightButton.TOOLTIP_UNSELECTED

Main control bar scroll right button.

SearchPanel.PLACEHOLDER

Localized prompt shown inside search input box before user starts entering the search text.

SearchPanel.INFO_PROMPT

Localized message shown when the search panel is opened for the first time, suggesting user perform the search.

SearchPanel.INFO_NO_RESULTS

Localized message shown when the search did not return any results.

This symbol supports the following runtime replacement token: $SEARCH_TEXT$ . The component replaces it with the search text entered by the user.

SearchPanel.INFO_RESULTS

Localized message shown when the search is successfully completed and returneds at least one result.

This symbol supports the following runtime replacement tokens:

  • $SEARCH_TEXT$ - The search text entered by the user.
  • $HIT_COUNT$ - The total number of search hits found.
  • $PAGE_COUNT$ - The number of catalog pages that contain at least one search hit.

SearchPanel.THUMBNAIL_LABEL

Localized label for results thumbnail of search panel.

This symbol supports the following runtime replacement tokens:

  • $PAGE$ - Page number.
  • $PAGE_HIT_COUNT$ - The number of search results found on the page.

SearchPanel.LABEL

Defines a value of the aria-label ARIA attribute for the entire search panel.

Previous page
Next page

On this page