Summary

Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

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 and 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 the rows but not inside of the columns.

The direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand.

Syntax

direction: ltr;
direction: rtl;

/* Global values */
direction: inherit;
direction: initial;
direction: unset;

Values

ltr
The initial value of direction (that is, if not otherwise specified). Text and other elements go from left to right.
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 syntax

ltr | rtl

Examples

blockquote {
  direction: rtl;
}

Specification

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.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (1.7 or earlier) 5.5 9.2 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 6 8 3.1

See also

Document Tags and Contributors

Last updated by: fscholz,