direction Property (A, ABBR, ACRONYM, ...)

direction Property

Switch on low bandwidth view

Language Filter

direction Attribute | direction Property

Sets or retrieves the reading order of the object.

Syntax

HTML { direction : sDirection }
Scripting [ sDirection = ] object.style.direction [ = v ]

HTML	{ direction : sDirection }
Scripting	[ sDirection = ] object.style.direction [ = v ]

Possible Values

sDirection String that specifies or receives one of the following values.
ltr
Default. Content flows left to right.
rtl
Content flows right to left.
inherit
Content flow is inherited.
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of ltr. The Cascading Style Sheets (CSS) attribute is inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

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.

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>
This feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) .

Applies To

A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DEL, DFN, DIR, 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, KBD, LABEL, LEGEND, LI, LISTING, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

dir, HTML Character Sets