English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS direction attribute usage and examples

The direction attribute specifies:

  • The basic writing direction of the block (from right to left or from left to right).

  • Embedding and overriding directions of Unicode bidirectional algorithm (seeunicode-bidiattribute).

  • tablethe direction of the column layout.

  • overflowin the horizontal direction.

  • whentext-alignThe position of the incomplete last line in the block when the attribute value is set to justify.

The following table provides usage instructions and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.

Default value:ltr
Applies to:All elements
Inheritance:Yes
Can be animated:No.Please see Animation properties.
Version:CSS 2,3
JavaScript syntax:object.style.direction="rtl"

Note:Unlike the dir attribute in HTML, the direction CSS attribute specified for table elements is not inherited by the cells in the column, because CSS inheritance follows the document tree, the row is the parent of the cell in the document tree, not the column.

Syntax for using direction

The syntax of this attribute is as follows:

direction: ltr | rtl | initial | inherit

The following example demonstrates how to use the direction attribute.

  p {
   direction: rtl;
   unicode-bidi: bidi-override;
  }
Test see‹/›

Note:To make the direction attribute affect the reordering of inline elements, theunicode-bidiThe value of the attribute must be embed or override.

Attribute value

The following table describes the value of this attribute.

ValueDescription
ltrSet the direction from left to right. This is the default value.
rtlSet the direction from right to left.
initialSet this attribute to its default value.
inheritIf specified, the associated elements adopt the attribute value of the parent element's direction.

Browser compatibility

The compatibility of the direction attribute of the browser, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

  • Firefox 1+

  • Google Chrome2+

  • Internet Explorer 5.5Above

  • Apple Safari 1+

  • Opera 9.2+

Further reading

Please refer to the following tutorials:CSS Text.

Related properties: unicode-bidi