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-bidiproperty). - the direction of
tablecolumn layout. - the direction of horizontal
overflow. - the position of an incomplete last line in a block, when the value of
text-alignproperty is set tojustify.
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:
The example below shows the direction property in action.
Example
Try this code »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.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Text.
Related properties: unicode-bidi
