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. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “dir=rtl for Right-to-Left Text” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “dir=rtl for Right-to-Left Text”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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