In this section, we will learn what the writing-mode property is and how to use it in CSS.

CSS writing-mode Property Definition and Usage

The CSS `writing-mode` property is used to set the layout of a text content.

By default, when you write a content in an HTML document, it will appear horizontally from left to right (or right to left depending on the value set for the direction property). But using the `writing-mode` property, we can change this layout to vertical from left to right or right to left as well.

CSS writing-mode Property Syntax

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

CSS writing-mode Property Value

• horizontal-tb: using this value means let the flow to be horizontally from left to right. (For `rtl` scripts, content flows from right to left horizontally).
• vertical-rl: for `ltr` scripts, using this value means content flow should be from top to bottom, where next lines sit on the left side of the previous line. For `rtl` scripts, this value means content flow should be vertically from bottom to top and the next vertical line sits to the right side of the previous line.
• vertical-lr: for `ltr` script, using this value means content flow should be from top to bottom and the next vertical line sits on the right side of the previous line. Also, for `rtl` scripts, content flow is vertical from bottom to top and the next line sits on the left side of the previous line.

Example: writing-mode in CSS

See the Pen writing-mode in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.