Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Converting your UI for right-to-left languages

Updated on December 13, 2022
Applicable to Cosmos React and Theme Cosmos applications

Meet the needs of audiences who use languages such as Arabic or Urdu by adapting your user interface to accommodate the right-to-left (RTL) text direction. By localizing your application into RTL languages, you expand your user base and provide native RTL language speakers with an interface that is friendly and intuitive.

Pega Platform uses tools built into Java and HTML to automatically handle RTL conversion based on the user's (operator) locale. When you assign an RTL language as the default for an operator, that operator sees the application in RTL alignment, with menus on the right, and breadcrumbs arranged right-to-left. If you do not set a default language for the operator, the system sources it from the browser's region settings.

Note: The system handles font sizes and layout alignment automatically, but does not reverse icons. You can provide RTL versions of left-to-right (LTR) icons by saving them under the same name followed by _rtl. For example, an LTR name.png icon has an RTL counterpart name_rtl.png that the application displays in RTL locales.
  1. Change the locale settings for the operator:
    Note: Switching between LTR and RTL locales with the UpdateLocaleSettings Activity at run time is not supported.
    ChoicesActions
    Yourself
    1. In the footer of Dev Studio, click the operator icon, and then click Operator.
    2. On the operator tab, in theLocalization section, in the Default locale field, enter the target language ISO code.
      For example: For Arabic (Saudi Arabia), enter ar_SA.
    3. Click Save.
    Another operator
    1. In the navigation pane of Dev Studio, click Records.
    2. Expand the Organization category, and then click Operator ID.
    3. Open the operator record that you want to edit.
    4. On the operator tab, in theLocalization section, in the Default locale field, enter the target language ISO code.
      For example: For Arabic (Saudi Arabia), enter ar_SA.
    5. Click Save.
  2. Optional: To keep the Dev Studio interface in English, perform the following actions:
    1. In the footer of Dev Studio, click the operator icon, and then click Preferences.
    2. In the Preferences window, select the Ignore locale checkbox.
    3. Click Save, and then re-log to the application.
For example:
Left-to-right portal
LTR portals typically have menus on the left side of the screen.
Right-to-left portal
RTL portals typically have menus on the right side of the screen.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

100% found this content useful

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us