CSS writing-mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress. This property is particularly useful when working with languages that are written vertically, such as Chinese or Japanese.

The possible values for the writing-mode property are:

horizontal-tb: Default value. Text is laid out horizontally, and the block progression is from top to bottom.
vertical-rl: Text is laid out vertically, and the block progression is from right to left.
vertical-lr: Text is laid out vertically, and the block progression is from left to right.

Let's see some examples to better understand how the writing-mode property works:

Result:


    
      This text is laid out vertically from right to left.

In the example above, we have a div element with its writing-mode property set to vertical-rl. This causes the text inside the div to be laid out vertically from right to left.

Result:


    
      This text is laid out vertically from left to right.

In this second example, the writing-mode property is set to vertical-lr, resulting in the text being laid out vertically from left to right.

Experiment with different values of the writing-mode property to see how it affects the layout of text on your webpage!