Writing-mode
Learn text direction with writing-mode.
What is writing-mode?
In CSS, the writing-mode property sets the direction text flows. The default value is horizontal-tb: lines flow horizontally and stack top to bottom.
Change it to make text flow vertically. With vertical-rl, each line is read top to bottom and the lines themselves run right to left. This matches the traditional layout of Japanese and Chinese.
Vertical writing directions
writing-mode takes two main vertical values. vertical-rl stacks lines from right to left; vertical-lr stacks them from left to right. In both, characters are read vertically, top to bottom within a column.
It is also useful for decorative headings: a side menu title, a book spine label. Pick the wrong direction and the reading order breaks; match the reader's script and culture.
horizontal-tb, the default
horizontal-tb is the default value of writing-mode. The tb stands for 'top to bottom': lines flow horizontally and stack top to bottom. This is the natural layout for Latin-script languages.
Writing it explicitly is usually unnecessary. But if you flip a section to vertical and later want to return to horizontal, set this value to reset it.
Exercise Make the side title vertical
Define a writing-mode property for the .side-title selector; the value must be vertical-rl. Add a text-orientation: mixed declaration in the same block.
Show example solution
/* make the side title vertical */
.side-title {
writing-mode: vertical-rl;
text-orientation: mixed;
}Test yourself
-
What is the default value of writing-mode?
- vertical-rl
- horizontal-tb
- vertical-lr
- sideways-rl
Show answer
horizontal-tb — Correct. horizontal-tb is the default; lines flow horizontally, top to bottom.
-
The vertical, right-to-left value
.title { writing-mode: ____; }Show answer
.title { writing-mode: vertical-rl; }