mozilla

Revision 20420 of direction

  • Revision slug: CSS/direction
  • Revision title: direction
  • Revision id: 20420
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment use the cssxref template

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

The direction property, when specified for table column elements, is not inherited by cells in the column since columns don't exist in the document tree. Therefore, CSS cannot easily capture the "dir" attribute inheritance rules described in the HTML 4.0 specification.

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>The <code>direction</code> property, when specified for table column elements, is not inherited by cells in the column since columns don't exist in the document tree. Therefore, CSS cannot easily capture the "dir" attribute inheritance rules described in the HTML 4.0 specification.
</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