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

writingMode style property

Browser support:
Specifies or returns the intrinsic writing direction of the element's content.
In Western languages, the common text order is left-to-right, top-to-bottom, but some Asian writings need to render text top-to-bottom, right-to-left. With this property, you can switch between these modes.

Syntax:

object.writingMode;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: writing-mode

Possible values:

The type of this property is string.
 One of the following values: 
bt-rl
Content flows from bottom to top, and right to left.
lr-tb
Default. Content flows from left to right, and top to bottom.
rl-tb
Default. Content flows from right to left, and top to bottom.
tb-rl
Content flows from top to bottom, and right to left.
Default: lr-tb.

Example HTML code 1:

This example illustrates the use of the writing-mode property:
<head>
    <style>
        .example {
            writing-mode: tb-rl;
        }
    </style>
</head>
<body>
    <a class="example">
        writing mode
    </a>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the writingMode property in JavaScript:
<head>
    <script type="text/javascript">
        function ChangeWritingMode (value) {
            var anchor = document.getElementById ("myAnchor");

            if ('writingMode' in anchor.style) {
                anchor.style.writingMode = value;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <a id="myAnchor">
        writing mode
    </a>

    <br />
    <button onclick="ChangeWritingMode ('lr-tb');">lr-tb</button>
    <button onclick="ChangeWritingMode ('tb-rl');">tb-rl</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content