The direction property sets the base inline direction for text, table and grid columns, and horizontal overflow. Use ltr for left-to-right languages and rtl for right-to-left languages such as Arabic or Hebrew.
It is inherited. Prefer the HTML dir attribute for document or section language direction. Use CSS direction when you need a component-level switch or cannot change markup.
Not deprecated. MDN warns authors to prefer HTML dir over CSS direction for page language direction when possible.
Where possible, prefer the HTML dir attribute over CSS direction for language direction. Do not force English UI into rtl only to flip layout — use logical properties instead.
direction: ltr | rtl | initial | inherit;Only two direction keywords exist. Global keywords such as initial and inherit also apply.
| Value | Description | Try it |
|---|---|---|
ltr | Left to right. Initial value for most Western languages | Try it |
rtl | Right to left. Use for Arabic, Hebrew, and similar scripts | Try it |
initial | Resets to ltr | Try it |
inherit | Takes the parent element's direction | Try it |
On inline elements, pair direction with unicode-bidi: embed or override so the change applies. See tryit 4.
directionMatch the base direction to the language of the content you are styling.
dir="rtl" or dir="ltr" on HTML for whole pages or major sections.direction on a block when you need a local switch without changing markup.direction on the container to flip inline start.| Piece | Required? | Role |
|---|---|---|
ltr / rtl | Yes (one of them) | Sets the base inline direction |
| Block container | Typical | Blocks show the effect clearly without extra properties |
unicode-bidi | For inline | Needed for direction to affect inline-level elements |
| Inherited | By design | Children inherit unless they override |
Switch direction and watch the numbered boxes reorder along the inline axis.
Each snippet focuses on direction. Use Try It Yourself for a live editor.
Flip a paragraph to right-to-left flow.
<style>
.rtl {
direction: rtl;
}
</style>
<p class="rtl">Hello from right to left.</p>.rtl.rtl. Inline start moves to the right edge.dir for real language sections when you control the markup.Change how flex items line up on the inline axis.
<style>
.row {
display: flex;
direction: rtl;
}
</style>
<div class="row">
<span>1</span><span>2</span><span>3</span>
</div>display: flex lays items on one line.direction: rtl. Item 1 starts on the right.ltr.Use rtl with real right-to-left script.
<style>
.ar {
direction: rtl;
}
</style>
<p class="ar" lang="ar">مرحبا بالعالم</p>lang="ar" helps browsers and assistive tech.direction: rtl. The paragraph flows right to left.dir="rtl" on the element in production HTML when you can.If direction looks wrong, check these first.
MDN recommends the dir attribute for documents and major sections. CSS direction is better as a local layout tool.
For direction to affect inline-level elements, set unicode-bidi to embed or override.
margin-left stays on the physical left. Prefer margin-inline-start so spacing follows direction.
direction and unicode-bidi are not reset by the all shorthand. Reset them explicitly when needed.
Unlike HTML dir on a column, CSS inheritance follows the tree. Cells inherit from rows/ancestors, not from column elements.
direction is a browser CSS property for text and layout flow. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and older engines. Prefer HTML dir for document language direction.
Bottom line: Safe to use for LTR/RTL layout demos. Prefer HTML dir for page language. It is not a runtime API.
ltr (default) or rtl. Inherited.dir for document and section language direction.unicode-bidi on inline elements.One line: use direction for local LTR/RTL flow — and HTML dir for real language sections.
Control how an element participates in layout.
8 people found this page helpful