English

rtl-language
rtl-friendly
arabic
arabic-language
right-to-left

Supporting RTL language layout in your web application

This blog post will guide you through the fundamental steps to implement RTL (Right-to-left) language support in your web application effectively.

Charles

Developer

10/5/20244 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

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: Logto Console in RTL mode

Challenges in RTL compatibility

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

Text alignment: Text alignment should be right-aligned in RTL mode.
Direction of content: The direction of content should be right-to-left in RTL mode. E.g. Navigation sidebar, charts, etc.
Scrollbar position: The scrollbar should be on the left side of the screen in RTL mode.
Icons and images: Some icons and images should be mirrored in RTL mode. E.g. Chevron icons, etc.
Localize date and numbers: Format date and use "Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩)" instead of "Western Arabic numerals (0-9)" in RTL mode.
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.

Try Logto Cloud for free

Introduction#

What does RTL web application look like?#

Challenges in RTL compatibility#

How do we beat the challenges above?#

Use HTML attribute dir="rtl"#

Implement a component to flip icons in RTL mode.#

Localize date, time and numbers.#

Date and time localization#

Number localization#

Adjust spacing, positioning, and more.#

Margins and paddings#

Absolute positioning#

Border radius#

Miscellaneous others#

Summary#

Introduction#

What does RTL web application look like?#

Challenges in RTL compatibility#

How do we beat the challenges above?#

Use HTML attribute dir="rtl"#

Implement a component to flip icons in RTL mode.#

Localize date, time and numbers.#

Date and time localization#

Number localization#

Adjust spacing, positioning, and more.#

Margins and paddings#

Absolute positioning#

Border radius#

Miscellaneous others#

Summary#

Introduction

What does RTL web application look like?

Challenges in RTL compatibility

How do we beat the challenges above?

Use HTML attribute `dir="rtl"`

Implement a component to flip icons in RTL mode.

Localize date, time and numbers.

Date and time localization

Number localization

Adjust spacing, positioning, and more.

Margins and paddings

Absolute positioning

Border radius

Miscellaneous others

Summary

Introduction

What does RTL web application look like?

Challenges in RTL compatibility

How do we beat the challenges above?

Use HTML attribute `dir="rtl"`

Implement a component to flip icons in RTL mode.

Localize date, time and numbers.

Date and time localization

Number localization

Adjust spacing, positioning, and more.

Margins and paddings

Absolute positioning

Border radius

Miscellaneous others

Summary