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)
Arabic (Bidi)
Images and Icons
Mirror
- Icons that imply directionality like back/forward buttons
- Icons that imply text direction
- 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
- 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
Field Directionality
- 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".
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)
Arabic (Bidi)
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.
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