Use when designing or implementing right-to-left (RTL) layout support for Arabic, Hebrew, Farsi, Urdu, and other RTL scripts. Covers logical properties, mirroring rules, bidirectional text, icon direction, and what should NOT flip. Trigger when the user mentions RTL, right-to-left, Arabic, Hebrew, bidi, or dir="rtl".
RTL is not "flip everything." It's about reading direction. Text, layout flow, and directional icons mirror. Decorative elements, media controls, and universal icons do not.
<html lang="ar" dir="rtl">
dir="rtl" on <html> flips the entire document flow. Browser handles most text and flexbox/grid automatically.
Physical properties break in RTL. Logical properties work in both directions automatically.
| Physical (avoid) | Logical (use) |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
padding-left | padding-inline-start |
text-align: left | text-align: start |
float: left | float: inline-start |
left: 0 | inset-inline-start: 0 |
border-left | border-inline-start |
.sidebar { margin-inline-start: 24px; padding-inline-end: 16px; }
Mixed LTR and RTL content in the same string (e.g., Arabic text with an English brand name):
<p>مرحباً بك في <bdi>CANON</bdi> للتصميم</p>
<bdi> isolates the embedded text direction.Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩) are used in some Arabic locales. Western Arabic numerals (0123456789) are acceptable and more common in UI contexts. Check locale conventions.
Phone numbers, dates, and currency amounts follow locale formatting regardless of direction.
Test at minimum: Arabic (RTL, connected script), Hebrew (RTL, disconnected), English (LTR baseline).
Visual checklist:
| Anti-pattern | Why it fails |
|---|---|
| Flipping images/photos | Content becomes wrong (text in images reads backward) |
| Using physical CSS properties | Breaks RTL layout |
| Flipping media controls | Universal direction |
Manual transform: scaleX(-1) on entire containers | Hacky, breaks text rendering |
| Not testing with real RTL content | Latin text in RTL doesn't expose connected-script issues |
Hardcoded left: 20px for positioned elements | Wrong side in RTL |
| Breadcrumb separators not flipping | Reading direction confused |
dir="rtl" on <html> for RTL localeslang attribute matches the content language<bdi> used for embedded opposite-direction textdir="ltr" explicitlyleft/right in CSS<bdi>, CSS Logical Properties