dir
The writing direction: left to right or right to left.
Syntax
<p dir="rtl">…</p>Parameters
| Parameter | Type | Description |
|---|---|---|
| dir | ltr | rtl | auto | Left to right, right to left, or detect from the text. |
Examples
Arabic text from right to left:
<p dir="rtl" lang="ar">مرحبا بالعالم</p>
<p dir="ltr">Hello world</p>The direction also changes the layout:
<div dir="rtl" style="display: flex; gap: 8px;">
<button>One</button><button>Two</button><button>Three</button>
</div>Notes
For pages in Arabic and Hebrew, put dir="rtl" on <html>. Set the direction with the attribute rather than the CSS direction property: it is part of the text's meaning, not styling. Logical properties like margin-inline-start adapt to the direction automatically.
See also
In the tutorial
- Logical properties — Properties that depend on the text direction rather than the sides of the screen — margin-inline, padding-block, inline-size, inset-inline and writing-mode.