Writing-mode property
Last updated: 2026-09-13
writing-mode Writing-mode property
The writing-mode CSS property sets the overall layout direction of the text, supporting horizontal (horizontal-tb) and vertical (vertical-rl, vertical-lr) modes. It is used to create vertical text like traditional Chinese or Japanese books and also changes how block and inline elements arrange themselves, making it an important tool for East Asian typography.
| Category | |
|---|---|
| Initial Value | horizontal-tb |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
writing-mode: horizontal-tb | vertical-rl | vertical-lr;⚙️ Values
| Value | Type | Description |
|---|---|---|
horizontal-tb | vertical-rl | vertical-lr | Keyword | Writing direction values |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| writing-mode | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Tip： vertical-rl is the traditional layout of Chinese books (top to bottom, right to left); vertical-lr is used for some Mongolian and Japanese layouts.
Important： writing-mode changes the direction mapping of CSS logical properties: for example, width maps to block-size and height to inline-size in vertical layout.
❓ FAQ
QWhat is the difference between writing-mode and direction in CSS?
Adirection only changes the text flow (left or right) while elements stay horizontal; writing-mode changes the whole layout direction, making block elements stack vertically and inline content display vertically too.
QDo the characters rotate in a vertical writing mode like vertical-rl?
AIn vertical-rl and vertical-lr the characters stay upright, just arranged from top to bottom. If you need the glyphs rotated 90 degrees, additionally use text-orientation: sideways.
QHow do I create vertical Chinese text using the writing-mode property?
ASet writing-mode: vertical-rl and the text flows top to bottom, right to left, mimicking traditional Chinese book layout; vertical-lr produces vertical text flowing left to right. By default the characters remain upright and unrotated.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
