dir=rtl for Right-to-Left Text
Enable RTL layout for Arabic, Hebrew, and other RTL languages.
dir=rtl for Right-to-Left Text is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What dir Does
The dir attribute declares the base text direction of an element. dir="ltr" (left-to-right, the default for most languages) or dir="rtl" (right-to-left, for Arabic, Hebrew, Persian, Urdu).
Set on html for Whole-Site RTL
For Arabic, Hebrew, Persian and Urdu sites, set dir="rtl" on the root element. This flips the default flow of every block: text aligns right, lists indent right, scrollbars move left, and layouts auto-mirror under modern CSS.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Bidirectional Text
Mixed-direction text (Arabic with embedded English brand names) follows the Unicode Bidirectional Algorithm automatically. The base direction (from dir) controls how unidirectional segments are arranged at the line level; individual character runs flow in their own scripts' natural direction.
CSS Logical Properties
Modern CSS uses logical properties that adapt to direction: margin-inline-start (left in LTR, right in RTL), padding-inline-end, border-inline-start. Replacing left/right with start/end makes one stylesheet serve both directions.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox and Grid Adapt Automatically
Flexbox's row direction respects dir: in RTL, items flow right-to-left. Grid template columns also reverse. This means most layouts written with flex or grid work in RTL without any direction-specific CSS — modern layout is direction-agnostic.
Icons That Should Flip
Directional icons (back arrow, next arrow, undo/redo) must flip in RTL. Use CSS transform: scaleX(-1) inside [dir="rtl"], or provide separate RTL SVG variants. Non-directional icons (search, settings, gear) stay the same.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Text Alignment
Prefer text-align: start over text-align: left — start resolves to left in LTR and right in RTL. Same for end. Direction-aware alignment eliminates a class of bugs when adding RTL support.
Per-Element dir Override
Set dir="auto" on an element to let the browser detect direction from the first strong-directional character: <p dir="auto">{user.name}</p> handles user-submitted names that may be Arabic, English, or mixed without special-casing.
Bidi Embedding
The bdi (bidirectional isolation) and bdo (bidirectional override) elements give fine-grained control over how the bidi algorithm treats specific text — useful when reproducing user input verbatim or forcing a particular direction for a code snippet inside flowing text.
Form Fields
Inputs inherit dir from their parent. For user-provided text where direction varies (a chat app with multilingual users), set dir="auto" on individual inputs so each one displays correctly based on its content.
Testing RTL Layouts
Browsers let you preview RTL by temporarily setting document.documentElement.dir = "rtl" in DevTools console. Check icon orientation, padding/margin, scrollbar position, and that no element uses hardcoded left/right that should be start/end.
CSS Direction Differs from Layout Direction
The CSS direction property and HTML dir attribute have the same effect on most layout. Prefer the HTML attribute because assistive tech, mailers and other consumers read it, while the CSS property only affects rendering in browsers.
Knowledge Check
Why are CSS logical properties like margin-inline-start preferred over margin-left when supporting RTL languages?
Summary
dir="rtl" on <html> flips the base direction for Arabic/Hebrew/Persian/Urdu sites. CSS logical properties (margin-inline-start, padding-block-end) adapt automatically. Flexbox/grid layouts mirror without changes. Flip directional icons, use text-align: start/end, and use dir="auto" for user-content of unknown direction.
Frequently asked questions
Is the “dir=rtl for Right-to-Left Text” lesson free?
Yes — the full text of “dir=rtl for Right-to-Left Text” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “dir=rtl for Right-to-Left Text”?
Enable RTL layout for Arabic, Hebrew, and other RTL languages. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “dir=rtl for Right-to-Left Text” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The lang Attribute and Screen Readers
- dir=rtl for Right-to-Left Text
- The bdi and bdo Elements
- charset and Unicode Handling Special Characters