RTL (right-to-left) is the writing direction for several major languages: Arabic, Hebrew, Persian (Farsi), Urdu, Pashto, Sindhi, Dhivehi, Yiddish, Uyghur, and some Kurdish dialects. Together, these are the native scripts for ~600 million users.
How browsers handle RTL:
- Visual layout (left-to-right vs right-to-left) is controlled by the
dirattribute --dir="rtl"flips text alignment, list bullet positions, scroll direction, form field positions, and the order of inline content. - The
langattribute alone does NOT trigger RTL layout. A page with<html lang="ar">but nodir="rtl"renders left-to-right -- text reads correctly within each line but the OVERALL layout is wrong (text aligned to the left, scrollbar on the right, list bullets on the wrong side, etc.). - Setting
<html lang="ar" dir="rtl">is the correct combined declaration.
CSS implications:
- Logical properties (
margin-inline-start,padding-inline-end,border-inline-start) automatically swap withdir="rtl". Use these instead of physicalmargin-left/margin-rightfor RTL-friendly designs. text-align: startandtext-align: endflip with direction. Use these instead oftext-align: left/text-align: right.- Bidirectional content within a paragraph (Arabic with embedded English brand names) handled by Unicode Bidirectional Algorithm; usually works automatically but
<bdi>and<bdo>give explicit control.
Per-element direction overrides:
<html lang="ar" dir="rtl">
<body>
<h1>مرحبا</h1>
<code dir="ltr">npm install react</code> <!-- code stays LTR -->
<p>This English block <span dir="rtl">عربي</span> back to English.</p>
</body>
</html>
Common bug: the BeaverCheck i18n analyzer flags this -- a page with <html lang="ar"> but no dir="rtl" anywhere on the document. Browsers don't infer RTL from lang; you have to declare it explicitly.