Usability Bidirectionality

Bidirectionality

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.

UI mirroring overview Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The main difference between left-to-right (LTR) and right-to-left (RTL) language scripts is the direction in which content is displayed:

  • LTR languages display content from left to right
  • RTL languages display content from right to left

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.

Element

LTR

RTL

Text

Sentences are read from left to right.

Sentences are read from right to left.

Timeline

An illustrated sequence of events progresses left to right.

An illustrated sequence of events progresses right to left.

Imagery

An arrow pointing left to right indicates forward motion: →

An arrow pointing right to left indicates forward motion: ←

The passage of time is depicted from left to right for LTR languages, and from right to left for RTL languages.

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:

  • Numbers
  • Untranslated text (even if it’s part of a phrase)

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.

Do.

Text and numbers should always be in the correct direction for the language.

Don't.

Text should not be typed in reverse order.

When a UI is mirrored, these changes occur:

  • Text fields icons are displayed on the opposite side of a field
  • Navigation buttons are displayed in reverse order
  • Icons that communicate direction, like arrows, are mirrored
  • Text (if it is translated to an RTL language) is aligned to the right

These items are not mirrored:

  • Icons that do not communicate direction, such as a camera
  • Numbers, such as the clock and phone numbers
  • Charts and graphs

Example using LTR UI

This is an example using RTL UI in Arabic. The numbers are presented LTR.

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.

Text editing menu in LTR mode

Text editing menu in RTL mode

1. Icons related to bidirectionality are mirrored to reflect the start and end of text on a line

LTR screen

On an LTR screen, the tab for “Item One” is aligned to the left, and users swipe to the left to see more tabs.

Touch target height: 48dp
Screen edge margin before first tab: 72dp
Tab labels bottom padding: 20dp
Tab labels right and left padding: 12dp

RTL screen

On an RTL screen, the tab for “Item One” is aligned to the right, and users swipe to the right to see more tabs.

Touch target height: 48dp
Screen edge margin before first tab: 72dp
Tab labels bottom padding: 20dp
Tab labels right and left padding: 12dp

LTR screen

RTL screen with title, icons, and UI elements displayed flowing from right to left.

1. Back button points to the right
2. Text is right-aligned
3. Primary and secondary buttons are mirrored to match reading direction
4. Checkbox appears to the right of text
5. Icons that do not communicate direction are not changed
6. Placement of units may vary across languages
7. Progress bars fill in the same direction as content is read

LTR

Navigation, overflow menu, and icons switch sides in the LTR layout

Icon padding from screen edge: 16dp
Title distance from screen edge: 72 dp
Padding below title: 20dp
Navigation bar height: 56dp
Overflow menu padding: 16dp

RTL

Navigation, overflow menu, and icons switch sides in the RTL layout

Icon padding from screen edge: 16dp
Title distance from screen edge: 72 dp
Padding below title: 20dp
Navigation bar height: 56dp
Overflow menu padding: 16dp


LTR

Padding and margin around icons and text as designed for LTR layouts.

LTR:
List item height: 72dp
Icon margin from left screen edge: 16dp
List item distance from left screen edge: 72dp

RTL

When mirroring the layout, padding and margin around icons and text also switch placement to match RTL layouts.

RTL:
List item height: 72dp
Icon margin from right screen edge: 16dp
List item distance from right screen edge: 72dp

RTL mirroring guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

When to mirror

The most important icons for mirroring are back and forward buttons. Back and forward navigation buttons are reversed.

LTR back button

RTL back button

LTR forward button

RTL forward button

An icon that shows forward movement should be mirrored.

In a LTR UI, a bicycle facing the right typically communicates a sense of moving forward.

In a RTL UI, a bicycle may similarly communicate a sense of moving forward with the bicycle pointing to the left.

Most RTL countries do not mirror slashes. Leave images with slashes as-is for RTL locales.

Do.

An LTR airplane mode off state with the LTR slash is acceptable for both LTR and RTL locales.

Don't.

There’s no need for an RTL airplane mode off state with an RTL slash.

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.

LTR volume with slider

RTL volume with speaker icon and slider mirrored

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.

LTR redo and undo button from the toolbar in Google Docs

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.

LTR chat icon

RTL chat icon

When not to mirror

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.

The refresh icon shows time moving forward; the direction is clockwise. The icon is not mirrored.

The history icon points backwards in time; the direction is counterclockwise. The icon is not 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.

Keyboard icon

Headset icon

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.

Search icon

Local cafe icon

The passage of time

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.

Since media playback buttons and the progress indicator reflect the direction of the tape, they are not mirrored.

Do.

Media controls for playback are always LTR.

Don't.

Do not mirror media playback or progress bars. The direction of these elements represents the direction of the tape, not the direction of time.

Localization Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Text in graphics

Graphics that include text usually require localization.

Numbers

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.

LTR UI icon containing numbers.

RTL UI Icon localized in Arabic. Numbers must be localized for languages that use different numerals.

Mirroring

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.

This example shows a RTL paragraph inside an English document. The buttons for indenting and lists should be RTL even though the primary UI direction is LTR.

1. Paragraph aligned right
2. Icons flipped
3. Hebrew text direction is RTL even though the English document is LTR