RTL and Bidi

What is RTL?

In right-to-left (RTL) languages, script starts from the right of the page and continues to the left, proceeding from top to bottom for new lines. This can be contrasted with left-to-right writing systems such as English or other Latin text, where writing starts from the left of the page and continues to the right. Although RTL script is displayed right-to-left, embedded numbers or text in other scripts (such as Latin script) still runs left-to-right. Text in other languages, such as English, can also be bidirectional if it includes excerpts from languages such as Arabic and Hebrew.

What is Bidi?

Bi-Directional (Bidi) languages refer to the ones that are written and read mainly from right-to-left (RTL). These languages include Arabic, Hebrew, Persian (Farsi), Azerbaijani, Urdu, Punjabi (in Pakistan), Pushto, Dari, Uigur, and Yiddish. While these languages follow the right-to-left direction, they may include text written in Western languages that follows the left-to-right (LTR) direction. Languages that include both RTL and LTR directionality are called Bidi languages.

Guidelines

There is more to meeting RTL and Bidi requirements than flipping your UI's 'x-axis'. For example, in an interface that supports both text directions, words like left and right get confusing quickly and are also no longer accurate. Speaking about previous and next elements makes more sense since they are independent of the interface direction.

It is important to implement RTL and Bidi solutions holistically rather than individually. The following guidelines are listed in order of priority to ensure your product is meeting RTL and Bidi requirements.

Page Layout

In general, Bidi languages require the overall page layout and most images to be flipped.

English (LTR)

Low-fidelity illustration of a homepage in English. Text reads left to right.

Arabic (Bidi)

Low-fidelity illustration of a homepage in Arabic. Text and images have been flipped to read right to left.

Images and Icons

Mirror

  • Icons that imply directionality like back/forward buttons LTR back Button displayed as an arrow pointing left. RTL back Button displayed as an arrow pointing right. LTR forward Button displayed as an arrow pointing right. RTL forward Button displayed as an arrow pointing left.
  • Icons that imply text direction In a LTR UI, the text direction reads from left to right. Icons with text implications, like checkmarks, are also expected to follow left to right.
  • Icons that imply location of UI elements on the screen
  • Icons representing objects that are meant to be handheld should look like they're being held by the opposite hand
  • Icons that show forward movement

Do Not Mirror

Do

RTL name and LTR phone number should always be in the correct direction for the language.

Don't

Both RTL and LTR text shouldn't be displayed in reverse order.

  • Text and numbers
  • Icons containing text or numbers
  • Icons and animations that are direction-neutral
  • Icons that wouldn't look different if they were mirrored, like X Buttons or the bookmark star icon
  • Icons that should look the same as LTR, like icons related to code (which is always LTR)
  • Checkmark icons
  • Video/audio player controls
  • Product logos
  • Order of size dimensions (e.g., 1920x1080 should not become 1080x1920)
  • Order of size units (e.g., 10 px should not become px 10 unless the size unit is localizable)
  • Slashes

Do

The LTR slash can indicate “no trash” for both LTR and RTL languages.

Don't

A RTL “no trash” icon doesn't need a mirrored slash.

Field Directionality

Text should start on the right side of the input for RTL languages.

  • The directionality of input fields is determined by the current locale
  • Display text based on the directionality of the characters in the field
  • The directionality of text input fields changes based on the current character's directionality
    • RTL comma + space influences the word following them to be in RTL order
    • English comma + space influences the word following them to be in LTR order
  • The cursor is determined by the current character's directionality
    • In the example below, the Latin space character between "456" and "7899" has the directionality of LTR, so the space character and "7899" is placed to the right side of "456".

Rich Text Editor with a phone number and Arabic text to demonstrate mixed RTL and LTR characters.

Keyboard Navigation

  • Standard keyboard navigation should be followed using the Tab key:
    • Pressing Tab focuses on the next element, while pressing Shift + Tab will focus on the previous element.
    • The order of focusing is determined implicitly (based on physical order) or explicitly (based on tab index).
    • Tabbing is not linear but cyclical.
  • The tab order for Bidi languages is RTL, right-to-left (horizontally) and top-to-bottom (vertically).
  • The tab order for left-to-right (LTR) languages including English is left-to-right (horizontally) and top to bottom (vertically).
  • Keyboard navigation with left and right arrow keys stays the same independent of the language / locale.

English (LTR)

Low-fidelity illustration of a homepage in English. Annotations demonstrate tabbing order of items for LTR languages starting from the top-left of the page.

Arabic (Bidi)

Low-fidelity illustration of a homepage in Arabic. Annotations demonstrate tabbing order of items for Bidi languages starting from the top-right of the page.

Additional Considerations

Displaying Numbers

  • For consistency, use Latin to display numbers.
  • Hebrew users use Latin numbers except for the rarely-used Hebrew calendar.
  • Arabic users use both Latin and Hindi numbers, but Latin numbers are much more common.
  • Any numbers including Latin and Hindi numbers are to be used in text input fields freely.

Arabic users use both Latin and Hindi numbers, but Latin numbers are much more common.

Cursor Position

  • For LTR direction, the cursor is placed to the right after displaying the LTR character.
  • For RTL direction, the cursor is placed to the left after displaying the RTL character.

Special Characters

  • Arabic question mark: ؟

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section