A Guide to Design, Develop, and Test User Interfaces for Right to Left Languages

Arshi Annafi.

Last modified: 2023-01-01.

Glossary

Introduction

Building the application in RTL involves considering the flow of content and the visual hierarchy in a way that is culturally appropriate.

This article will focus on text direction, layout direction and spacing, and icons and imagery.

Design

When designing the UI in RTL, arrange the elements in their reverse order.

Consider figure 1 and 2.

Figure 1 and 2 are images of Jostle’s Entity Face Component in LRT and RTL respectively. In the application, the Entity Face Component serves to show the profile picture of the user, their online status (green circle if they are online), and one other indicator (orange triangle).

In LTR (figure 1), these elements appear in the order that they are described. And their layout is as follows:

• Row 1 - The profile picture.
• Row 2 - Online indicator and orange triangle.

However, in RTL (figure 2), the entire component start from the right and their order is reversed. And the order of the elements are as follows:

• Row 1 - The profile picture.
• Row 2 - The orange triangle then the online indicator.

As the profile picture is the only UI element in row 1, it didn’t change places with other UI elements in the row. However, online indicator and the orange triangle changed places as they are both on row 2.

Also note that the profile picture is not reflected. This is because images typically are not part of the flow of the content. Example of images that are part of the flow of the content and should be reflected along the y-axis are question mark, right arrow, etc.

Now consider the component in figure 3 and 4.

In LTR (figure 3), the layout is as follows:

• Row 1 - The input label and character limit counter.
• Row 2 - The input with some text filled in.
• Row 3 - The error message.

In RTL (figure 4), this component starts from the right and the layout becomes:

• Row 1 - Character limit counter then the input label.
• Row 2 - The input with the text starting from the right.
• Row 3 - The error message staring from the right.

These ideas also carry over to abstract UI elements. E.g. the skeleton of a component in figure 5 and 6.

Images and Icons

Reflecting is not Always Required

Images and icons are not always required to reflect along the y-axis if the direction of the icon does not convey any message. E.g. reflecting a “Globe Icon” (🌐) is not required due to symmetry. Reflecting the “Search Icon” (🔍) may not be required as it may not change the meaning or the message that is conveyed with the icon in the context.

When Reflecting the Images is Required

Certain icons require transformation. E.g. Icons such as “Forward Arrow” (➡️), “Backward Arrow” (⬅️), “Help Icon” (question mark as used in the language), etc. This is because right indicates “back” and left indicates “forward” in RTL.

Development

RTL-safe CSS rules

“Never use CSS to apply the base direction, but do use logical (‘end’ and ‘start’) on properties or values related to margins, padding, alignment, etc., to make it easy to manage direction changes during localization. Avoid HTML attributes with values of ‘right’ and ‘left’.” [1]

Padding

Use padding-inline-start instead of padding-left.

And padding-inline-end instead of padding-right.

Read more: [2]

Margin

Use margin-inline-start instead of margin-left.

And margin-inline-end instead of margin-right.

Read more: [3]

Recommended Approach for CSS Rules with 4 Values

Values for CSS rules like

.container {
    /* padding: top | right | bottom | left */
    padding: 0 16px 8px 4px;
}

should be written as

.container {
    padding-inline-start: 4px;
    padding-inline-end: 14px;
    padding-bottom: 8px;
}

Note that there are CSS rules for top and bottom. But as they do not affect “left” and “right” directions, we can simply use the top and bottom rules.

Read more: [4]

Testing RTL

There are many tools and browser plugins that can with RTL development. However a quick way to test if that the layout and spacings are correct in RTL is forcing the DOM to render in RTL. This can be achieved by opening the Dev Tools and:

1. Add direction: rtl in element.styles, or
2. Add dir="rtl" attribute to the div (or other HTML elements)

1. Adding CSS in Element Style

Here, rendering in RTL is achieved by adding direction: rtl in element.styles.

2. Adding “dir” Attribute to HTML Elements

Here, RTL is achieved by adding dir="rtl" attribute to the div.

References and Bibliography

This article is adapted from documentation that was initially published internally for Jostle on Dec 17, 2021. It was later release for publication on Oct 24, 2023.