Right-to-Left (RTL) Design

Adapting layouts and interfaces for languages that read from right to left.

stellae.design

Emerging

RTL Design addresses interfaces for right-to-left languages (Arabic, Hebrew, Urdu, Farsi). It requires mirroring the entire layout: navigation flows right-to-left, icons with directionality flip, progress bars fill RTL, and reading order reverses. The most complex challenge is bidirectional (BiDi) content where RTL and LTR text, numbers, and UI elements coexist.

Why It Matters

Right-to-left design supports languages like Arabic, Hebrew, Farsi, and Urdu, which are read from right to left and collectively serve over 400 million native speakers. Simply mirroring a left-to-right layout introduces subtle but impactful usability issues because not all elements should flip — icons with directional meaning, media playback controls, and number sequences retain their original orientation. Getting RTL right is both an accessibility obligation and a significant market opportunity.

Real-World Examples

Twitter/X Arabic interface

Twitter's Arabic interface mirrors the entire layout including navigation, timelines, and compose flows while keeping media playback controls and numerical timestamps in their standard orientation. This selective mirroring respects both the reading direction and universal UI conventions.

Material Design bidirectional guidelines

Google's Material Design documentation provides explicit guidance on which elements to mirror and which to keep. Icons like back arrows flip, but icons like a clock or a volume speaker do not, because their meaning is not directional.

Counter-example

Naive full-page CSS flip

Some teams apply a blanket `transform: scaleX(-1)` to the entire page to simulate RTL, which mirrors images, icons, and even text rendering. This brute-force approach produces illegible text, reversed logos, and broken interactive elements.

Role-Specific Guidance

Common Mistakes

• The most common mistake is treating RTL as a simple CSS mirror without auditing which elements should and should not flip. Teams often forget to test mixed-direction content where English words, URLs, or numbers appear within Arabic or Hebrew text, leading to jumbled reading order. Another frequent error is using physical margin and padding properties that require separate RTL overrides instead of adopting logical properties from the start.