Supporting RTL language layout in your web application

Introduction#

Logto is your better choice of Customer Identity and Access Management (CIAM) solution. It's open-source and backed by a lively community. Recently, our community (credit @zaaakher) contributed Arabic language translation to both Logto Admin Console and Logto Sign-in Experience, making it more accessible to Arabic-speaking users.

However, we understand that having a translation alone is not enough. We need to ensure that the UI layout is also optimized for right-to-left (RTL) languages. In this tutorial, we will talk about the common challenges in RTL compatibility and how to address them in your web application.

What does RTL web application look like?#

In a left-to-right (LTR) web application, the layout is designed to start from the left side of the screen. The content flows from left to right, and the scrollbar is on the right side of the screen. In contrast, an RTL web application starts from the right side of the screen. The content flows from right to left, and the scrollbar is on the left side of the screen.

Taking Logto Console screenshot as an example:

Challenges in RTL compatibility#

When converting an LTR web application to RTL friendly, you may encounter the following challenges:

1. Text alignment: Text alignment should be right-aligned in RTL mode.
2. Direction of content: The direction of content should be right-to-left in RTL mode. E.g. Navigation sidebar, charts, etc.
3. Scrollbar position: The scrollbar should be on the left side of the screen in RTL mode.
4. Icons and images: Some icons and images should be mirrored in RTL mode. E.g. Chevron icons, etc.
5. Localize date and numbers: Format date and use "Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩)" instead of "Western Arabic numerals (0-9)" in RTL mode.
6. Spacing, positioning, and more: Other minor adjustments that need to be taken care of, including margins and paddings, border-radius, absolute positioning, animations, etc.

How do we beat the challenges above?#

Here are some tips and tricks that we did to make Logto RTL friendly:

Use HTML attribute dir="rtl"#

Apply HTML attribute dir="rtl" to the root element of your web application, if the current language is Arabic or any other RTL languages.

This helps the browser to understand that the content should be displayed in RTL mode, and it will automatically adjust the first three challenges (text alignment, direction of content, and scrollbar position). However, if you are using a custom scrollbar, you may need to adjust the position manually.

Implement a component to flip icons in RTL mode.#

When the language is RTL, we can use the CSS transform: scaleX(-1); to flip the icons horizontally. Here is an example written in React and TypeScript:

With this component, you can wrap the icon component and it will automatically flip the icon in RTL mode.

Localize date, time and numbers.#

Use the JavaScript function toLocalString to localize date, time and numbers. For example:

Date and time localization#

You can also choose to use a library like date-fns to handle date and time localization.

Number localization#

For numbers, you can also use the toLocaleString method, but with the ar-u-nu-arab option to display Arabic-Indic numerals.

Explanation

• ar: Indicates the Arabic language.
• u: Stands for Unicode, allowing for extensions.
• nu-arab: Specifies the use of Arabic-Indic numerals.

Adjust spacing, positioning, and more.#

You may need to adjust the spacing, positioning, border-radius, and other CSS styles accordingly. Here are some common cases:

Margins and paddings#

Instead of writing margin-left, margin-right, padding-left, and padding-right, you can use margin-inline-start, margin-inline-end, padding-inline-start, and padding-inline-end to handle both LTR and RTL modes.

Absolute positioning#

When using absolute positioning, you can use inset-inline-start and inset-inline-end instead of left and right.

Border radius#

When using border-radius, you can use border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius to handle both LTR and RTL modes.

Miscellaneous others#

There might still be some corner cases that you cannot handle with the above methods. In such cases, you can use the :dir() pseudo-class to apply different styles based on the direction of the text.

Summary#

In this tutorial, we discussed the challenges when implementing RTL friendly UI, and shared how we addressed them in Logto Console and Logto Sign-in Experience. By applying the tips and tricks mentioned above, you can also make your web application more accessible to RTL language users.