Direction property
Last updated: 2026-09-13
direction Direction property
The direction CSS property sets the text writing direction — left-to-right (ltr) or right-to-left (rtl). It mainly affects right-to-left languages such as Arabic and Hebrew and also changes text alignment, scrollbar position, and layout flow. For multilingual sites, prefer the dir attribute on the HTML element over the CSS property.
| Category | |
|---|---|
| Initial Value | ltr |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
direction: ltr | rtl;⚙️ Values
| Value | Type | Description |
|---|---|---|
ltr | rtl | Keyword | Text direction |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| direction | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： For RTL languages, use dir="rtl" directly on the HTML element — it is more semantic and automatically affects the whole document flow.
Important： direction changes the physical mapping of logical properties like margin and padding; combining it with CSS logical properties such as margin-inline-start gives better internationalization support.
❓ FAQ
QWhat is the difference between direction and writing-mode in CSS?
Adirection controls the flow of text horizontally (left-to-right or right-to-left); writing-mode controls the overall layout direction of the text, horizontal or vertical. They can be combined to produce different typographic layouts.
QWhy does the page layout change after I set direction: rtl in CSS?
Adirection: rtl reverses the text flow, so text starts from the right edge and the scrollbar also moves to the left. If you only want to change text alignment without affecting layout, use text-align instead.
QHow do I set a right-to-left layout for Arabic or Hebrew text on my site?
AWrite dir="rtl" on the <html> or <body> element — it is more semantic than CSS direction: rtl and also affects browser behavior like forms and scrollbars. In CSS you can write direction: rtl and pair it with unicode-bidi for mixed text.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
