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.
Depending on if your language is one of the supported languages, the dir attribute will be added to the HTML element.
1
<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.
dir
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 Localizing Resources.
During development with the UI builder you set the $_language using either #set ($_language = 'ar') or by adding a variable to the listing page:
$_language
#set ($_language = 'ar')
You can then view screens with right to left text.
Curity supports the 10 most commonly used RTL languages.
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.
1 2 3 4
├── 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:
1 2
meta.title=تسجيل الدخول page.title=تسجيل الدخول
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.
margin-right
margin-inline-end
margin-left
margin-inline-start
padding-right
padding-inline-end
padding-left
padding-inline-start
text-align: left
text-align: start
text-align: right
text-align: end
left
inset-inline-start
right
inset-inline-end
If you need to implement custom styling for RTL we can style like this:
1 2 3 4 5 6 7 8 9
[dir='rtl'] .selector { } // or :dir(rtl) .selector { }
Alternatively, you can use direction: rtl; if a top level direction is not set.