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

You are here: Reference > JavaScript > client-side > style handling > properties > direction

direction style property

Browser support:

Specifies or returns the text direction.

The direction property affects the horizontal rendering order only, the left and right sides of the margin, border and padding are not swapped.

Syntax:

object.direction;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: direction

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

ltr

Default. Left to right.

rtl

Right to left.

Default: ltr.

Example HTML code 1:

This example illustrates the use of the direction property:

<head>
    <style>
        .ltr {
            font-size: 20pt;
            direction: ltr;
        }
        .rtl {
            font-size: 20pt;
            direction: rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">
        0 1 2 3 4 5 6 7 8 9
    </p>
    <p class="rtl">
        0 1 2 3 4 5 6 7 8 9
    </p>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the direction property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeDirection (button) {
            var div = document.getElementById ("myDiv");

            var dir = div.style.direction;

            div.style.direction = (dir == "rtl")? "ltr" : "rtl";
            button.innerHTML = (dir == "rtl")? "right-to-left" : "left-to-right";

        }
    </script>
</head>
<body>
    <div id="myDiv" style="direction:rtl;">0 1 2 3 4 5 6 7 8 9</div>

    <button onclick="ChangeDirection (this);">right-to-left</button>
</body>