CSS `writing-mode`: Controlling Text Flow Direction for Enhanced Design

Learn how to control text flow direction (horizontal, vertical) in your CSS styles using the `writing-mode` property. This tutorial explains different `writing-mode` values, demonstrating how to create vertical text layouts and manage block-level element stacking for unique design effects and improved support for various languages.

Controlling Text Direction with CSS `writing-mode`

Understanding `writing-mode`

The CSS `writing-mode` property controls the direction in which text flows on a page. It allows you to create vertical text layouts, useful for languages written vertically or for creating unique design effects. The `writing-mode` property affects not just the direction of characters but also how block-level elements are stacked and flow.

`writing-mode` Property Values

The `writing-mode` property has these values:

• horizontal-tb (default): Text flows horizontally from left to right, with lines stacked vertically from top to bottom.
• vertical-lr: Text flows vertically from left to right, with lines stacked horizontally from top to bottom.
• vertical-rl: Text flows vertically from right to left, with lines stacked horizontally from top to bottom.

`writing-mode` Syntax

The syntax is:

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

Examples of `writing-mode`

These examples demonstrate how to use `writing-mode` to create different text orientations. You will need to include corresponding HTML elements (e.g., paragraphs of text) to see the effects. The `writing-mode` property is applied to the text container (e.g., the paragraph element).

Example 1: Horizontal and Vertical Text

This example demonstrates all three main values of `writing-mode`: `horizontal-tb` (the default horizontal text flow), `vertical-lr` (vertical text flowing from left to right), and `vertical-rl` (vertical text flowing from right to left).

p:nth-child(1) { writing-mode: horizontal-tb; }
p:nth-child(2) { writing-mode: vertical-lr; }
p:nth-child(3) { writing-mode: vertical-rl; }

Example 2: `writing-mode` with `letter-spacing`

This example combines `writing-mode` with `letter-spacing` to further illustrate how `writing-mode` affects text layout and how you can combine it with other CSS properties.

p:nth-child(1) { writing-mode: horizontal-tb; letter-spacing: 2px; }
p:nth-child(2) { writing-mode: vertical-lr; letter-spacing: 2px; }
p:nth-child(3) { writing-mode: vertical-rl; letter-spacing: 2px; }