CSS writing-mode Property

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.

Example

#

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>

Syntax

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

Values

#

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.

More Examples

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>

Browser support

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

You may also like

Guides