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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content