CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS direction Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The direction property specifies:

  • the base writing direction (right to left, or left to right) of blocks.
  • the direction of embeddings and overrides for the Unicode bidirectional algorithm (see unicode-bidi property).
  • the direction of table column layout.
  • the direction of horizontal overflow.
  • the position of an incomplete last line in a block, when the value of text-align property is set to justify.

The following table summarizes the usages context and the version history of this property.

Default value: ltr
Applies to: All elements
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 2, 3

Note: Unlike the dir attribute in HTML, the direction CSS property, when specified for table column elements, is not inherited by cells in the column since CSS inheritance follows the document tree, and rows are the ancestors of the cells in the document tree not the columns.


Syntax

The syntax of the property is given with:

direction ltr | rtl | initial | inherit

The example below shows the direction property in action.

p {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Note: For the direction property to affect reordering in inline elements, the unicode-bidi property's value must be embed or override.


Property Values

The following table describes the values of this property.

Value Description
ltr Sets a left-to-right direction. This is default value.
rtl Sets a right-to-left direction.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element direction property.

Browser Compatibility

The direction property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 2+
  • Internet Explorer 5.5+
  • Apple Safari 1+
  • Opera 9.2+

Further Reading

See tutorial on: CSS Text.

Related properties: unicode-bidi

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties