Export (0) Print
Expand All
top
Expand Minimize

direction

Sets the reading order of the object.

Syntax

{ direction: sDirection }

Possible values

sDirection

String that specifies one of the following values:

ltr

Default. Content flows left to right.

inherit

Content flow is inherited.

rtl

Content flows right to left.

This property has a default value of ltr. It is inherited.

Remarks

The property does not affect alphanumeric characters in documents that read from left to right. These characters always render ltr. However, the property does affect punctuation characters in documents that read from left to right.

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

Example

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:

<html>
  <head><script>
    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>
  
  <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>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) Ee371220.xtlink_newWindow(en-us,Expression.40).png.

Applies to

a, abbr, acronym, address, b, bdo, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, hn, i, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, option, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft