CSS writing-mode Property

The mode of writing The CSS property determines whether text lines are laid out horizontally or vertically, as well as the direction in which blocks progress. When applied to an entire document, it should be applied to the root element.

The block flow direction specifies the direction in which block-level containers are stacked as well as the direction in which inline-level content flows within a block container. As a result, it determines the ordering of block-level content.

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        writing-mode: horizontal-tb;
    }
    .ex2 {
        writing-mode: vertical-rl;
    }
    .ex3 {
        writing-mode: vertical-rl;
    }
</style>
</head>
<body>

<p class="ex1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="ex2">vertical-rl</span> writing-mode.</p>
<p class="ex3">Some text with writing-mode: vertical-rl.</p>

</body>
</html>

Preview

Property Values

Value	Description
horizontal-tb	Allow the content to flow vertically from top to bottom and horizontally from left to right.
vertical-rl	Allow the content to flow horizontally from right to left and vertically from top to bottom.
vertical-lr	Allow the content to flow horizontally from left to right and vertically from top to bottom.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
writing-mode	48.0	41.0	11.0	12.0	35.0

word-wrap

z-index

CSS writing-mode Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us