writing-mode

The writing-mode property is used to specify text alignment in either horizontal or vertical direction.

Initial Value horizontal-tb
Applies to All elements, except for table rows, columns, row groups, and column groups
Inheritance yes
Animation discrete

The writing-mode property specifies the writing direction of text as well as block flow direction.

Specifically, it specifies whether the line layout should be horizontal or vertical and whether the block flow should be left-oriented or right-oriented.

Generally, web documents (English) have text aligned from left to right, with boxes overlapping from top to bottom. The direction of the text changes depending on the language.

The definition for arranging elements and content in this way is called flow. Web browsers render layout by identifying the specified language and writing direction mode. The purpose of the writing-mode property is to allow the developer to control the rendering behavior.

The direction property is used to specify the writing direction for horizontal writing. There are two possible values: ltr (Left To Right) specifies left-to-right writing direction, while rtl (Right To Left) specifies right-to-left writing direction.

Syntax

/* Keyword values */

writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl; /* experimental */
writing-mode: sideways-lr; /* experimental */

/* Global values */

writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: unset;

Example

writing-mode: horizontal-tb;

Maecenas vitae felis nec nunc elementum consequat ut in massa.

writing-mode: vertical-rl;

Example: Right to Left (Vertical).
Maecenas vitae felis nec nunc.

writing-mode: vertical-lr;

Example: Left to Right (Vertical).
Maecenas vitae felis nec nunc.