direction

  • Revision slug: CSS/direction
  • Revision title: direction
  • Revision id: 20421
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Notes */

Revision Content

Summary

This property specifies the text direction of blocks of text. In addition, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.

  • Initial value: ltr
  • Applies to: all elements
  • Inherited: no
  • Percentages: n/a
  • Media: visual

Syntax

direction : [ 'ltr' | 'rtl' | inherit ] ;

Values

ltr 
The default value of direction. 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 {{template.Cssxref("unicode-bidi")}} property's value must be 'embed' or 'override'.

Examples

blockquote {
direction : rtl ;
}

Notes

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.

Specification

CSS 2

CSS 3 Text Module

See Also

{{template.Cssxref("unicode-bidi")}}

Revision Source

<h3 name="Summary"> Summary </h3>
<p>This property specifies the text direction of blocks of text. In addition, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.
</p>
<ul><li> Initial value: ltr
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: n/a
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">direction : [ 'ltr' | 'rtl' | inherit ] ;
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> ltr </dt><dd> The default value of <code>direction</code>. Text and other elements go from left to right
</dd><dt> rtl </dt><dd> Text and other elements go from right to left
</dd></dl>
<p>For the <code>direction</code> property to have any effect on inline-level elements, the {{template.Cssxref("unicode-bidi")}} property's value must be 'embed' or 'override'.
</p>
<h3 name="Examples"> Examples </h3>
<pre>blockquote {
direction : rtl ;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>Unlike the <code>dir</code> attribute in HTML, the <code>direction</code> 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.
</p>
<h3 name="Specification"> Specification </h3>
<p><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#direction">CSS 2</a>
</p><p><a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a>
</p>
<h3 name="See_Also"> See Also </h3>
<p>{{template.Cssxref("unicode-bidi")}}
</p>
Revert to this revision