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.

Table of contents#

Introduction
User interface mirroring
Iconography mirroring

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.

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).

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.