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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
Syntax
/* Keyword values */ direction: ltr; direction: rtl; /* Global values */ direction: inherit; direction: initial; direction: unset;
Values
ltr
- Text and other elements go from left to right. This is the default value.
rtl
- Text and other elements go from right to left.
For the direction
property to have any effect on inline-level elements, the unicode-bidi
property's value must be embed
or override
.
Formal definition
Initial value | ltr |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
ltr | rtl
Examples
Setting right-to-left direction
blockquote { direction: rtl; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'direction' in that specification. |
Proposed Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'direction' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
direction | Chrome Full support 2 | Edge Full support 12 | Firefox Full support 1 | IE Full support 5.5 | Opera Full support 9.2 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support