The CSS reference

"direction" - css property (v. css 2)

  • Specifies the base writing direction of blocks with 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
  • The property is inherited
  • HTML usage: all elements
  • For the 'direction' property to affect reordering in inline-level elements, the 'unicode-bidi' property's value must be 'embed' or 'override'.
  • Browsers that support the direction - property :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari

Possible direction values:

values Comments CSS
ltr Left-to-right direction. 2
rtl Right-to-left direction. 2
inherit Will inherit the value from parent specification. 2

Property "direction" example:

<!DOCTYPE HTML >
<html  >
  <head>
    <title>Test</title>
    <style type="text/css">
      div {border: blue 1px solid; color:green;
           padding: 4px 4px 4px 4px; width: 400px;}
      .rtl1 {direction: rtl;}
      .rtl2 {direction: rtl;
             unicode-bidi: bidi-override;}
    </style>
  </head>
  <body>
    direction: rtl;<br>
    <div class='rtl1' >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.
    </div>
    <br>
    direction: rtl; with unicode-bidi: bidi-override;<br>
    <div class='rtl2'  >For the 'direction'
      property to affect reordering in inline-level
      elements, the 'unicode-bidi' property's value
      must be 'embed' or 'bidi-override' .
    </div>
    <br>
    The last text in left to right direction is:<br>
    <div >For the 'direction'
      property to affect reordering in inline-level
      elements, the 'unicode-bidi' property's value
      must be 'embed' or 'bidi-override'.
    </div>
  </body>
</html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.direction="direction value"
// To GET values you must first get the computed style object
// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.direction;
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.