Export (0) Print
Expand All

direction property

Specifies the reading order of the object.

CSS 2.1, Section 9.10

 

Syntax

direction: ltr | rtl

Property values

ltr

Initial value. Content flows left to right.

rtl

Content flows right to left.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Valueltr

Standards information

Remarks

The property does not affect alphanumeric characters in Latin documents. These characters always render ltr. However, the property does affect punctuation characters in Latin documents.

The property pertains only to the directional flow of an element's content. It has no effect on properties such as left or right, margin-left or margin-right. The margin-left property, for example, sets or retrieves the width of the margin on the left side of the document regardless of the value of the direction property.

Examples

The following example demonstrates how to set and retrieve the value of the direction property. When the user sets the value of the direction property of a div element, the value of the property is retrieved in a span element.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/direction.htm


<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
    function fnSwitch()
    {
      oDiv.style.direction = event.srcElement.innerText;
      DirSpan.innerText = oDiv.style.direction;
    }
    </script>
</head>

<body>

<h1>direction Property Sample</h1>
<h2>direction: <span id="DirSpan" style="color: red"></span></h2>
[ <a href="#" onclick="fnSwitch()">ltr</a> | <a href="#" onclick="fnSwitch()">rtl</a> 
| <a href="#" onclick="fnSwitch()">inherit</a> ]<p></p>
<div id="oDiv">
  The quick brown fox jumps over the lazy yellow dog. The quick brown fox jumps 
  over the lazy yellow dog. The quick brown fox jumps over the lazy yellow dog. 
  The quick brown fox jumps over the lazy yellow dog. The quick brown fox jumps 
  over the lazy yellow dog.</div>

</body>

</html>


See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Reference
dir
Conceptual
HTML Character Sets

 

 

Show:
© 2014 Microsoft