Right-to-left languages#

Curity UI Kit screenshot rendered with Arabic text

A multi-language setup might include a language with a different reading direction, Right-to-Left (RTL) instead of Left-to-Right (LTR). To support and display languages like Arabic and Hebrew properly, some changes are necessary.

How the Curity Identity Server 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 lang="ar" dir="rtl">

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

Curity UI Kit screenshots rendered with Arabic text

Set up the language#

When a request is received, a preferred locale will be selected based on the user preference as set in the ui_locales-parameter. If that is not there, or unknown or unsupported languages are asked for, the request’s Accept-Language header will be evaluated. If this header is not specified or if the preferred locale is not one that messages have been localized into, the server’s default locale is used as the preferred locale.

Read more about localization .

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.

Default RTL Languages#

The Curity Identity Server 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 the 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=تسجيل الدخول

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 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
margin-rightmargin-inline-end
margin-leftmargin-inline-start
padding-rightpadding-inline-end
padding-leftpadding-inline-start
text-align: lefttext-align: start
text-align: righttext-align: end
leftinset-inline-start
rightinset-inline-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.

Was this helpful?