This blog post will guide you through the fundamental steps to implement RTL (Right-to-left) language support in your web application effectively.
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.
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:
When converting an LTR web application to RTL friendly, you may encounter the following challenges:
Here are some tips and tricks that we did to make Logto RTL friendly:
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.
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.
Use the JavaScript function toLocalString to localize date, time and numbers. For example:
You can also choose to use a library like date-fns to handle date and time localization.
For numbers, you can also use the toLocaleString method, but with the ar-u-nu-arab option to display Arabic-Indic numerals.
Explanation
You may need to adjust the spacing, positioning, border-radius, and other CSS styles accordingly. Here are some common cases:
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.
When using absolute positioning, you can use inset-inline-start and inset-inline-end instead of left and right.
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.
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.
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.