Bi-directionality

Digital experiences in bi-directional languages, also commonly referred to as "RTL" (right-to-left) languages, often require mirroring the interface to accommodate the right-to-left reading pattern.

Image illustrating bi-directional guidelines in mirrored right-to-left and left-to-right languages.

Introduction#

In digital experiences, languages that are based on Latin script (e.g., English and French), Cyrillic script (e.g., Russian and Bulgarian), Chinese and Japanese* are consistently read and written from left to right. Languages that are based on certain writing systems like Arabic (e.g., Arabic, Persian, and Urdu) and Hebrew (Hebrew and Yiddish), are mostly read and written from right to left. These languages are called “bi-directional,” or are also commonly referred to as “RTL” (“right-to-left”) languages.

Digital experiences for these languages should be mirrored to follow the same right-to-left reading pattern. UI mirroring is the process of positioning components in the opposite side of the interface, which creates, as the term suggests, a mirror-like effect.

*Chinese and Japanese, especially in printing, books, and publications, maintain their top-to-bottom, right-to-left writing/reading patterns, but are mainly using the left-to-right system in digital experiences.

User interface mirroring#

Mirror individual components#

Components and their constituting parts are affected by user interface mirroring. Mirroring guidelines for each component are available on their respective pages, when applicable.

do
Key example showing the correct usage of a bi-directional component.

Don't mirror components that represent time#

Components that are used to represent the concept of time should not be mirrored (e.g., a video player).

dont
Key example showing the incorrect usage of a bi-directional component.

Mirror composite images with directional flow#

Composite images that depict a directional flow or convey a linear narrative require a dedicated bi-directional version since the sense of the narrative, reading from right to left, could appear reversed.

do
Key example of correct usage of bi-directional flow in a linear narrative.

Iconography mirroring#

Mirror icons that represent movement#

Icons that depict horizontal movement (e.g., back icon) should be mirrored to follow the flow of the right-to-left interface.

do
Key examples of mirror icons that represent movement.

Don't mirror icons that represent time#

Icons that refer to the passage of time (e.g., clock icon) should not be mirrored in right-to-left interfaces.

do
Key example of incorrectly mirroring icons that represent time.

Don't mirror checkmarks#

Checkmarks are never mirrored in right-to-left interfaces.

do
Key example of illustrating not to mirror the checkmark component.

Don't mirror slashes#

Slashes are never mirrored in right-to-left interfaces.

do
Key example illustrating not to mirror slash marks.