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 :
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.