writing-mode
Sets the direction in which lines run: horizontally (the usual) or vertically, as in Japanese or on the spine of a book.
Syntax
writing-mode: horizontal-tb | vertical-rl | vertical-lr;Values
| Parameter | Type | Description |
|---|---|---|
| horizontal-tb | keyword | The default: horizontal lines, top to bottom. |
| vertical-rl | keyword | Vertical lines, the next line to the left. |
| vertical-lr | keyword | Vertical lines, the next line to the right. |
Examples
A vertical label on the side of a card:
<style>
.card { display: flex; border: 1px solid #ccc; width: 260px; }
.side {
writing-mode: vertical-rl;
rotate: 180deg;
background: teal; color: white; padding: 8px 4px; text-align: center;
}
.body { padding: 8px; }
</style>
<div class="card">
<div class="side">NEW</div>
<div class="body">A card with a vertical label. The label reads from bottom to top.</div>
</div>Notes
Changing the writing mode swaps the block and inline axes, so logical properties (margin-inline, inline-size, padding-block) follow the text, while width and left do not. text-orientation: upright stands Latin letters upright in vertical text. For simple rotated labels writing-mode is better than transform: rotate(), because the element takes up the correct space.
See also
- margin-inline — Logical properties: sizes and spacing by the direction of the text instead of left, right, top and bottom.
- dir — The writing direction: left to right or right to left.
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
In the tutorial
- Logical properties — Properties that depend on the text direction rather than the sides of the screen — margin-inline, padding-block, inline-size, inset-inline and writing-mode.