An RTL layout is the mirror image of an LTR layout, and it affects layout, text, and graphics. It is also called as 101 rules for Bi-directional UX. When a UI is changed from LTR to RTL (or vice-versa), it’s often called mirroring, but it’s not just mirroring. It is commonly used for languages - Arabic, Hebrew, Persian and Urdu.
Title, icons, and UI elements are displayed flowing from right to left
Text should always be in the correct direction for the language it’s in. For E.g. any LTR words, such as a URL, will continue to be shown in an LTR format, even if the rest of the UI is in RTL.
Text should be right-aligned
Grid – headers and text should be right aligned
Buttons and selection controls
- Back button points to the right
- Forward button points to left
- Checkbox appears to the right of text
- Primary and secondary buttons are mirrored to match reading direction
- An icon that shows forward movement should be mirrored
- Leave images with slashes as-is for RTL locales
- A volume icon with a slider at its right side should be mirrored. The slider should progress RTL, and the sound waves should emerge from the right
- Icons that contain representations of text need careful mirroring
- Icons that do not communicate direction are not changed
- Placement of units may vary across languages
- Progress bars fill in the same direction as content is read
- Text fields icons are displayed on the opposite side of a field
- Do not mirror media playback buttons and the media progress indicator as they refer to the direction of tape being played, not the direction of time
Navigation and time
- Navigation, overflow menu switch sides in the RTL layout
- While the linear representation of time is mirrored in RTL, the circular direction of time is not. Clocks still turn clockwise for RTL languages. A clock icon or a circular refresh or progress indicator with an arrow pointing clockwise should not be mirrored
- Numbers are read from left to right
- The numbers should be right aligned
- Numbers, including icons containing numbers, must be localized for languages that use different numerals. For example, Bengali, Marathi, Nepali, and some Arabic-speaking locales use different forms of numbers
- There are two ways of writing numbers in Arabic
- ٨ ٧ ٦ ٥ ٤ ٣ ٢ ١ ٠ (Eastern Arabic)
- 0 1 2 3 4 5 6 7 8 9 (Western Arabic)
- Avoid using a mixture of both types of numerals on the UI.
- Cursor should follow the direction of the inputted text
Animations and gestures
- Directional animation should be mirrored. E.g. Carousel
- Touch Gestures should be mirrored
- Rating and Page selectors should be mirrored
Arabic is cursive. Most, if not all, of the characters in a word are connected together. For this reason, letter spacing should not be used in Arabic.
Google Font Noto is a preferred font for Arabic.
Arabic characters tend to have more complex glyphs than English characters. There are more lines and nuances that have to fit in a similar space. That causes Arabic in the same font size as English to be less legible. The characters are too small. So, it is good to keep the fonts 1-2 px larger size than English.
Some Arabic characters are taller than English characters. This can cause vertical cut-offs on the characters. Arabic might need increased line-height.
Arabic does not have capital letters.
Many languages like German, Spanish and English use the comma separator (“,”) to separate items in lists. Arabic has a different comma separator (“،“).
It is usually used to highlight text in Arabic (Instead of underlining, italics or interspacing).
Transparency in text colors
Is sometimes used in English for headers, but in Arabic it might cause text overlap.
Days of the week
Although many languages allow for the abbreviation of the names of days of the week to save space, this approach is not useable in Arabic where the names of all the days begin with the same letter.
Should happen in the same direction as the text is written.