The CSS writing-mode Property

Overview

The writing-mode CSS property is used to define the direction of text layout and block progression in various languages and writing systems. It specifies whether the lines of text are laid out horizontally or vertically, as well as the direction in which the block elements progress.

Moreover, it finds usage when working with languages that have different writing systems, such as Chinese, Japanese, Korean, and Arabic, allowing you to create flexible and internationalized web designs.

Examples and Usage

In the example below, we'll showcase the different writing-mode values using a simple text example. We will create three divs, each with a distinct value for the writing-mode property(including the default). This will demonstrate how each value affects the layout of the text within the div.

<div class="horizontal-tb">Horizontal TB (Top-to-Bottom)</div>

<div class="vertical-rl">Vertical RL (Right-to-Left)</div>

<div class="vertical-lr">Vertical LR (Left-to-Right)</div>

.horizontal-tb, .vertical-rl, .vertical-lr {
  border: 1px solid black;
  margin-bottom: 20px;
  padding: 10px;
  width: 200px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

The horizontal-tb value represents the default horizontal writing mode, with text flowing from left to right and lines stacking from top to bottom. The vertical-rl and vertical-lr values create vertical writing modes, where the text flows from top to bottom and lines stack from right to left or left to right, respectively.

Please note that there are two more writing-mode values, sideways-rl and sideways-lr, which are experimental and may change in the future. For more information on these experimental values, you can refer to the CSS Writing Modes Level 4 draft.

Syntax and Values

The writing-mode property accepts the following values:

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

Each value has a specific purpose:

Value	Description
`horizontal-tb`	The default writing mode, with horizontal text layout.
`vertical-rl`	Vertical writing mode, with text flowing from top to bottom and lines stacking from right to left.
`vertical-lr`	Vertical writing mode, with text flowing from top to bottom and lines stacking from left to right.
`sideways-rl`	Rotates the text sideways, with lines progressing from right to left.
`sideways-lr`	Rotates the text sideways, with lines progressing from left to right.

Associated Properties

direction
unicode-bidi
text-orientation
text-combine-upright

Tips and Tricks

Comprehending writing modes can improve your grasp of CSS Flexbox and CSS Grid.
Understanding different writing modes is crucial for working with languages that use vertical writing systems, such as Chinese, Japanese, and Korean, as well as languages that have right-to-left writing systems, like Arabic and Hebrew.
Using writing-mode to rotate text or create unique layouts is an exciting way to enhance your designs, even when working solely with English text.