Right-to-Left Language Support
debt(d7/e7/b7/t7)
Closest to 'only careful code review or runtime testing' (d7). Per detection_hints, automated is 'no' — axe and browserstack help but real detection requires manual visual review with actual RTL content; placeholder text won't reveal issues.
Closest to 'cross-cutting refactor across the codebase' (e7). While quick_fix mentions adding dir='rtl' and swapping to logical properties, common_mistakes show this touches every directional CSS rule, every icon, every component — a sweeping change across the entire frontend codebase, not localized.
Closest to 'strong gravitational pull' (b7). applies_to web frontend broadly; the misconception and why_it_matters note RTL requires architectural CSS decisions made early — every new component must consider mirroring, logical properties, bidi handling.
Closest to 'serious trap' (t7). Misconception states devs assume RTL is 'just flipping text direction' when it actually requires mirroring layout, icons, padding/margins, and bidi handling — the obvious mental model is substantially wrong.
Also Known As
TL;DR
Explanation
RTL languages require: dir='rtl' on the HTML element or specific containers, CSS logical properties (margin-inline-start instead of margin-left) for automatic mirroring, CSS writing-mode adjustments, and bidirectional text handling for mixed LTR/RTL content. Libraries like Bootstrap support RTL via separate RTL stylesheets. PHP string functions work on bytes and are unaware of text direction — PHP processes RTL text correctly as long as encoding is handled. The main work is in HTML/CSS presentation.
Common Misconception
Why It Matters
Common Mistakes
- Using directional CSS properties (margin-left, padding-right) instead of logical properties — they don't flip with text direction.
- Not testing with actual RTL content — placeholder lorem ipsum doesn't reveal RTL layout issues.
- Hardcoded left/right icons that need mirroring — arrows, navigation chevrons should flip in RTL.
- Not handling bidi text — numbers in Arabic text read left-to-right; Unicode bidi algorithm handles this if direction attributes are correct.
Code Examples
/* Directional properties — don't work with RTL:
.nav { padding-left: 20px; } /* Need padding-right in RTL */
.card { margin-right: 10px; } /* Need margin-left in RTL */
.btn-icon { float: left; } /* Need float: right in RTL *//* CSS logical properties — automatically mirror in RTL:
.nav { padding-inline-start: 20px; } /* 'start' = left in LTR, right in RTL */
.card { margin-inline-end: 10px; } /* 'end' = right in LTR, left in RTL */
<!-- HTML attribute for direction: -->
<html lang="ar" dir="rtl">
<!-- Or per-element: -->
<p dir="rtl">مرحبا بالعالم</p>