The writing-mode property writes text horizontally or vertically.
This is important for languages where text flows vertically (Chinese, Korean, etc.).
For other languages writing-mode can help with page design.
An element with the writing-mode property.
The Chinese text is written top-to-bottom, left-to-right.
<style>
.mode {
height: 150px;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
writing-mode: vertical-lr;
}
</style>
<article class="mode">
此文本从上到下从左到右流动
</article>
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
| Value | Description |
|---|---|
| horizontal-tb | Text flow is left-to-right (horizontal), then top-to-bottom. This is used with languages using the Roman alphabet. |
| vertical-rl | Text flow is top-to-bottom (vertical), then right-to-left. |
| vertical-lr | Text flow is top-to-bottom (vertical), then left-to-right. |
Click the buttons to see the different writing-mode values.
<style>
.write-mode {
height: 150px;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
writing-mode: horizontal-tb;
}
</style>
<article class="write-mode">
此文本从上到下从左到右流动
</article>
This table shows when writing-mode support started for each browser.
 Chrome
|
48.0 | Jan 2016 |
 Firefox
|
41.0 | Sep 2015 |
 IE/Edge
|
12.0 | Jul 2015 |
 Opera
|
35.0 | Feb 2016 |
 Safari
|
11.0 | Sep 2017 |
