CANON · 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.
Set the direction
<html lang="ar" dir="rtl">
dir="rtl" on <html> flips the entire document flow. Browser handles most text and flexbox/grid automatically.
Use CSS logical properties
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; }
What mirrors (flips in RTL)
- Text alignment and flow
- Flex and grid direction (row → row-reverse)
- Navigation order (left-to-right becomes right-to-left)
- Breadcrumbs (Home > Products becomes Products < Home)
- Directional icons: back arrow, forward arrow, chevrons pointing "forward/backward"
- Progress bars, sliders, timeline direction
- Lists with indentation
- Form layout: labels relative to inputs
What does NOT mirror
- Media playback controls (play/pause/seek are universal)
- Phone number fields (always LTR, digits are universal)
- Clocks (clockwise is universal)
- Logos and brand marks
- Checkmarks, plus/minus, close X
- Up/down arrows (vertical is directionless)
- Images and photos (don't flip)
- Charts with mathematical axes (0 at origin)
- Slash direction in paths (/Users/path)
Bidirectional text (bidi)
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.- Never rely on Unicode control characters manually. Use HTML elements.
Numbers
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.
Testing
Test at minimum: Arabic (RTL, connected script), Hebrew (RTL, disconnected), English (LTR baseline).
Visual checklist:
- Text reads naturally right-to-left
- Navigation items right-to-left
- Back arrow points right, forward points left
- Sidebar is on the right
- Form labels align correctly relative to inputs
- No overlapping elements from position: absolute with physical offsets
Anti-patterns
| 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 |
Audit checklist
Sources
- W3C · CSS Logical Properties (spec)
- Material Design 3 · Bidirectionality
- Apple HIG · Right-to-Left
- MDN ·
<bdi>, CSS Logical Properties
1---2name: canon-rtl3description: 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".4---56# CANON · RTL78RTL 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.910## Set the direction1112```html13<html lang="ar" dir="rtl">14```1516`dir="rtl"` on `<html>` flips the entire document flow. Browser handles most text and flexbox/grid automatically.1718## Use CSS logical properties1920Physical properties break in RTL. Logical properties work in both directions automatically.2122| Physical (avoid) | Logical (use) |23|---|---|24| `margin-left` | `margin-inline-start` |25| `margin-right` | `margin-inline-end` |26| `padding-left` | `padding-inline-start` |27| `text-align: left` | `text-align: start` |28| `float: left` | `float: inline-start` |29| `left: 0` | `inset-inline-start: 0` |30| `border-left` | `border-inline-start` |3132```css33.sidebar { margin-inline-start: 24px; padding-inline-end: 16px; }34```3536## What mirrors (flips in RTL)3738- Text alignment and flow39- Flex and grid direction (row → row-reverse)40- Navigation order (left-to-right becomes right-to-left)41- Breadcrumbs (Home > Products becomes Products < Home)42- Directional icons: back arrow, forward arrow, chevrons pointing "forward/backward"43- Progress bars, sliders, timeline direction44- Lists with indentation45- Form layout: labels relative to inputs4647## What does NOT mirror4849- Media playback controls (play/pause/seek are universal)50- Phone number fields (always LTR, digits are universal)51- Clocks (clockwise is universal)52- Logos and brand marks53- Checkmarks, plus/minus, close X54- Up/down arrows (vertical is directionless)55- Images and photos (don't flip)56- Charts with mathematical axes (0 at origin)57- Slash direction in paths (/Users/path)5859## Bidirectional text (bidi)6061Mixed LTR and RTL content in the same string (e.g., Arabic text with an English brand name):6263```html64<p>مرحباً بك في <bdi>CANON</bdi> للتصميم</p>65```6667- `<bdi>` isolates the embedded text direction.68- Never rely on Unicode control characters manually. Use HTML elements.6970## Numbers7172Arabic-Indic numerals (٠١٢٣٤٥٦٧٨٩) are used in some Arabic locales. Western Arabic numerals (0123456789) are acceptable and more common in UI contexts. Check locale conventions.7374Phone numbers, dates, and currency amounts follow locale formatting regardless of direction.7576## Testing7778Test at minimum: Arabic (RTL, connected script), Hebrew (RTL, disconnected), English (LTR baseline).7980Visual checklist:81- Text reads naturally right-to-left82- Navigation items right-to-left83- Back arrow points right, forward points left84- Sidebar is on the right85- Form labels align correctly relative to inputs86- No overlapping elements from position: absolute with physical offsets8788## Anti-patterns8990| Anti-pattern | Why it fails |91|---|---|92| Flipping images/photos | Content becomes wrong (text in images reads backward) |93| Using physical CSS properties | Breaks RTL layout |94| Flipping media controls | Universal direction |95| Manual `transform: scaleX(-1)` on entire containers | Hacky, breaks text rendering |96| Not testing with real RTL content | Latin text in RTL doesn't expose connected-script issues |97| Hardcoded `left: 20px` for positioned elements | Wrong side in RTL |98| Breadcrumb separators not flipping | Reading direction confused |99100## Audit checklist101102- [ ] `dir="rtl"` on `<html>` for RTL locales103- [ ] `lang` attribute matches the content language104- [ ] CSS uses logical properties (inline-start/end, block-start/end)105- [ ] Directional icons (arrows, chevrons) mirror correctly106- [ ] Non-directional icons (close, check, play) do NOT mirror107- [ ] `<bdi>` used for embedded opposite-direction text108- [ ] Phone/number inputs use `dir="ltr"` explicitly109- [ ] Tested with real Arabic or Hebrew content110- [ ] Flexbox/grid flow works without manual reversal111- [ ] No physical `left`/`right` in CSS112113## Sources114115- W3C · CSS Logical Properties (spec)116- Material Design 3 · Bidirectionality117- Apple HIG · Right-to-Left118- MDN · `<bdi>`, CSS Logical Properties
dragoon0x