In order to access this site you need to enable JavaScript!

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 />

Copy Code

Preview

Syntax Highlighter

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 />

Copy Code

Preview

Syntax Highlighter

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>