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

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>

Copy Code

Preview

Syntax Highlighter

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>