Languages such as Arabic and Hebrew are read from right-to-left (RTL), and their UIs should be mirrored to display most elements in RTL.
The main difference between left-to-right (LTR) and right-to-left (RTL) language scripts is the direction in which content is displayed:
RTL content also affects the direction in which some icons and images are displayed, particularly those depicting a sequence of events.
In general, the passage of time is depicted as left to right for LTR languages, and right to left for RTL languages.
Sentences are read from left to right.
Sentences are read from right to left.
An illustrated sequence of events progresses left to right.
An illustrated sequence of events progresses right to left.
An arrow pointing left to right indicates forward motion: →
An arrow pointing right to left indicates forward motion: ←
When a UI is changed from LTR to RTL (or vice-versa), it’s often called mirroring. An RTL layout is the mirror image of an LTR layout. Mirroring affects both layout and graphics.
When a UI changes from one direction to another, these items are not mirrored:
Text is always in the correct direction for the language. For example, 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.
When a UI is mirrored, these changes occur:
These items are not mirrored:
To highlight the placement of icons, text fields, buttons, and spacing in these examples of mirrored layouts, the text has been intentionally left in English.
When text, layout, and iconography are mirrored to support right-to-left UIs, anything that relates to time should be depicted as moving from right to left. For example, forward points to the left, and backwards points to the right.
The most important icons for mirroring are back and forward buttons. Back and forward navigation buttons are reversed.
An icon that shows forward movement should be mirrored.
Most RTL countries do not mirror slashes. 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.
Sometimes, both the horizontal and circular direction of time are implied in an icon. For example, the redo and undo buttons in Google Docs have both a horizontal direction and a circular direction.
In LTR, these point to the same direction in both circular and horizontal representations of time. In RTL, choose whether to show circular or horizontal direction.
Icons that contain representations of text need careful mirroring.
Text is right-aligned in RTL. If there is a paragraph indent at the beginning of a paragraph, an unfinished line at the end of the paragraph, or a ragged right side, the icons need to be mirrored.
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.
Some icons refer to physical objects that are not mirrored in the right-to-left world.
For example, physical keyboards look the same everywhere in the world, so they should not be mirrored.
Certain icons might seem directional but they actually represent holding an object with one’s right hand.
For example, the search icon typically has its handle at the bottom right side, because the majority of users are right-handed.
The majority of users in RTL-writing countries are also right-handed, so such icons should not be mirrored.
Anything depicting the passage of time should be mirrored.
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.
Graphics that include text usually require localization.
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.
Some content may need to be mirrored, even if the UI is not mirrored. For example, when a user edits an RTL paragraph inside a LTR document, the toolbar buttons for that specific paragraph should be RTL.