Connect with a Global Audience with Right-to-Left Language Support

On this page

When people choose a language for their device they expect the interface to adapt in various ways. There are a few languages in the world that read their texts right-to-left rather than left-to-right. Adding Right-to-left (RTL) support means that we make the content compatible with languages like Arabic, Hebrew, Persian, and Urdu, which are all written from right to left.

There are over 400+ million native RTL speakers around the world so supporting RTL is important for several reasons:

  • Improved User Experience: RTL support can significantly improve the User Experience for users who speak RTL languages. The content and layout of your website will be optimized for the way these users read, making it more intuitive and easier to navigate so they may be more willing to use the product.
  • Increased Accessibility: Making the product more accessible to a broader audience. By accommodating RTL languages, we make it more inclusive and welcoming to users from diverse linguistic backgrounds.

How Curity supports Right-to-left languages

Depending on if your language is one of the supported languages, the dir attribute will be added to the HTML element.

<html dir="rtl" lang="ar">

Based on the dir attribute, the browser interprets the dir attribute value and automatically flips and renders the content of the website.

During development with the UI builder you set the $_language using either #set ($_language = 'ar') or by adding a variable to the listing page:

Curity UI Kit variables

You can then view screens with right to left text. The following example shows the Authentication selection screen rendered with Arabic text:

Phone screenshot rendered with Arabic text

Default Languages

Curity supports the 10 most commonly used RTL languages.

  1. ar - Arabic
  2. he - Hebrew
  3. fa - Persian (Farsi)
  4. ur - Urdu
  5. ps - Pashto
  6. ku - Kurdish
  7. sd - Sindhi
  8. prs - Dari
  9. arc - Aramaic
  10. ms - Malay

Message Files

String translations for RTL languages are not included in Curity Identity Server. To add support for Arabic you would create a copy of the English files, which use an en suffix and create equivalent files with an ar suffix. Then gradually update the text to Arabic.

Messages files use the following structure. Start with the core files. If you use overrides or template areas, also update the text in those files.

├── messages
│   ├── core // Core language files for en, pt, pt-pt and se
│   ├── overrides // Place custom language files here
│   └── template-areas // Or here depending on your setup

For example: to add Arabic translations for the HTML authenticator; create src/curity/messages/overrides/ar/authenticator/html-form/authenticate/messages and add translations like this:

meta.title=تسجيل الدخول
page.title=تسجيل الدخول

To test a language other than English in the UI Builder, open another browser window and navigate to http://localhost:3000/listing. Set the Velocity variable _locale to a value for which translations exist, such as ar. You can also test using the ?locale=ar query parameter. http://localhost:3000/authenticator/group/authenticate/get?locale=ar

CSS Logical Properties

It is possible to automatically align our content right-to-left, without the hassle of writing additional CSS. Use logical properties like start and end, rather than left or right.

CSS Logical Properties

CSS Logical Properties and Values provide the ability to control layout through logical, rather than physical, direction and dimension mappings. Logical properties define direction-relative equivalents of their corresponding physical properties

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

Physical PropertyLogical Property
text-align: lefttext-align: start
text-align: righttext-align: end

Custom Styling

If you need to implement custom styling for RTL we can style like this:

[dir='rtl'] .selector {
// or
:dir(rtl) .selector {

Alternatively, you can use direction: rtl; if a top level direction is not set.


Right-to-left language support comes with Curity Identity Server 9.3. To add RTL support you make additive changes in the UI builder, and these changes are maintained on upgrades. You can learn more about options for Branding and UX in Extended Look and Feel Customization with the UI Builder.

Join our Newsletter

Get the latest on identity management, API Security and authentication straight to your inbox.

Start Free Trial

Try the Curity Identity Server for Free. Get up and running in 10 minutes.

Start Free Trial