The direction
CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl
for languages written from right to left (like Hebrew or Arabic), and ltr
for those written from left to right (like English and most other languages).
Note that text direction is usually defined within a document (e.g., with HTML's dir
attribute) rather than through direct use of the direction
property.
The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi
property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.
Unlike the dir
attribute in HTML, the direction
property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.
The direction
and unicode-bidi
properties are the two only properties which are not affected by the all
shorthand property.
/* Keyword values */ direction: ltr; direction: rtl; /* Global values */ direction: inherit; direction: initial; direction: unset;
ltr
rtl
For the direction
property to have any effect on inline-level elements, the unicode-bidi
property's value must be embed
or override
.
ltr | rtl
blockquote { direction: rtl; }
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'direction' in that specification. | Candidate Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'direction' in that specification. | Recommendation | Initial definition. |
Initial value | ltr |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 2 | 12 | 1 | 5.5 | 9.2 | 1.3 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | Yes | 4 | 8 | 3.1 | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/direction