You are here: Reference > JavaScript > client-side > HTML DOM > properties > dir (a, abbr, acronym, ...)

dir property (a, abbr, acronym, ...)

Browser support:
Sets or retrieves the text direction as related to the lang property.
The dir property takes effect only on non alphanumeric characters in Latin documents, except for the bdo element. In that case, the dir property has effect on all characters. See the examples for details.
You can use the direction style property instead.

Syntax:

object.dir;
You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: dir

Possible values:

String that sets or retrieves the direction of the text.
One of the following values:
ltr
Default. Left to right.
rtl
Right to left.
Default: ltr.

Example HTML code 1:

This example illustrates the use of the dir attribute:
<bdo dir="rtl">apple, pear, peach ...</bdo>
<br />
<bdo dir="ltr">apple, pear, peach ...</bdo>
<br />
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the dir attribute:
<span dir="rtl">apple, pear, peach ...</span>
<br />
<span dir="ltr">apple, pear, peach ...</span>
<br />
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the dir property:
<head>
    <script type="text/javascript">
        function ToggleDirection () {
            var bdoTags = document.getElementsByTagName ("bdo");
            bdoTags[0].dir = (bdoTags[0].dir == "ltr")? "rtl": "ltr";
            bdoTags[1].dir = (bdoTags[1].dir == "ltr")? "rtl": "ltr";
        }
    </script>
</head>
<body>
    <bdo dir="rtl">apple pear peach</bdo>
    <br />
    <bdo dir="ltr">apple pear peach</bdo>
    <br />

    <button onclick="ToggleDirection ();">Switch directions!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content