What changes
- Layout order: the main navigation, sidebars and table columns start on the right.
- Direction-aware icons: arrows, back buttons and chevrons point the other way.
- Alignment and spacing: use start and end, not left and right.
- Progress and sliders: they fill from right to left.
What does not flip
- Logos, photographs and illustrations of real objects.
- Media controls such as play, which show the direction of time, not of reading.
- Numbers, phone numbers and code, which stay left to right even inside Arabic text.
Mixed-direction text
Real Arabic content contains Latin brand names, email addresses and numbers. This is called bidirectional text. Set the document direction once, mark exceptions such as an email address as left to right, and test with real content, not placeholder text. Many bugs show up only in mixed sentences.
Arabic typography
Arabic letters join, so never add letter-spacing: it breaks the joins. Give Arabic more line height than Latin text, because its marks sit above and below the line, and choose a font designed for Arabic rather than a fallback. Avoid italics and uppercase styling, which Arabic does not have.
Common mistakes
- Adding the direction attribute and stopping there. The result looks mirrored but reads badly.
- Mirroring everything, including logos and play buttons.
- Hard-coding left and right in CSS instead of using logical properties such as margin-inline-start.
- Text baked into images, which cannot be translated.
- Testing in English first and fixing Arabic last.
Related terms
RTL is one part of localisation. For depth, read our guide to bilingual Arabic and English products and see how we approach Arabic and RTL design.