TaskBuild a page that demonstrates dir='rtl' working. <html dir='rtl'> (set via JS for the demo), .card with margin-inline 16px, padding-inline 20px, padding-block 12px, background #f5f5f5. Add JS to set document.documentElement.dir = 'rtl' on load.
RTL support: dir='rtl' + minimal CSS
75 XP6 min
Theory
When CSS uses logical properties, the HTML does the rest
<html lang="ar" dir="rtl">
That dir="rtl" attribute on <html> flips the document direction. If your CSS uses logical properties throughout, the whole UI mirrors:
- Sidebar that was on the left β moves to the right.
- Margins / padding flip.
- Text alignment defaults flip.
- Flex/grid directions flip naturally.
Per-element direction
<p dir="rtl">ΨΉΨ±Ψ¨Ω</p> <p dir="ltr">English mixed inside RTL page</p>
dir="auto" lets the browser infer from the first strong-direction character β useful for user-generated content of unknown language.
Things that DON'T auto-flip
- Icons with directional meaning (back arrow, send arrow). Manually mirror them in RTL:
[dir="rtl"] .icon-back { transform: scaleX(-1); }- Position-based layouts using physical
left/rightinstead ofinset-inline-start/-end. - Numbers and dates β Arabic / Hebrew use latin numerals usually; verify locally.
Test with bookmarklet
javascript:document.documentElement.dir = document.documentElement.dir === 'rtl' ? 'ltr' : 'rtl';
Paste into the URL bar on any page; toggles direction instantly. If your layout breaks, you've still got physical properties somewhere.
CodeMentor i18n + RTL
CodeMentor supports 18 languages but none currently RTL (Arabic, Hebrew). When we add them, this is the playbook.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.