The writing-mode
CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
This property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.
/* Keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* Global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
The writing-mode
property is specified as one of the values listed below.
horizontal-tb
vertical-rl
vertical-lr
sideways-rl
sideways-lr
lr
horizontal-tb
instead.lr-tb
horizontal-tb
instead.rl
horizontal-tb
instead.tb
vertical-lr
instead.tb-rl
vertical-rl
instead.horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
This example demonstrates all of the writing modes, showing each with text in various languages.
The HTML is simply a <table>
with each writing mode in a row with a column showing text in various scripts using that writing mode.
<table> <tr> <th>Value</th> <th>Vertical script</th> <th>Horizontal script</th> <th>Mixed script</th> </tr> <tr> <td>horizontal-tb</td> <td class="example Text1"><span>我家没有电脑。</span></td> <td class="example Text1"><span>Example text</span></td> <td class="example Text1"><span>1994年に至っては</span></td> </tr> <tr> <td>vertical-lr</td> <td class="example Text2"><span>我家没有电脑。</span></td> <td class="example Text2"><span>Example text</span></td> <td class="example Text2"><span>1994年に至っては</span></td> </tr> <tr> <td>vertical-rl</td> <td class="example Text3"><span>我家没有电脑。</span></td> <td class="example Text3"><span>Example text</span></td> <td class="example Text3"><span>1994年に至っては</span></td> </tr> <tr> <td>sideways-lr</td> <td class="example Text4"><span>我家没有电脑。</span></td> <td class="example Text4"><span>Example text</span></td> <td class="example Text4"><span>1994年に至っては</span></td> </tr> <tr> <td>sideways-rl</td> <td class="example Text5"><span>我家没有电脑。</span></td> <td class="example Text5"><span>Example text</span></td> <td class="example Text5"><span>1994年に至っては</span></td> </tr> </table>
The CSS that adjusts the directionality of the content looks like this:
.example.Text1 span, .example.Text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.Text2 span, .example.Text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.Text3 span, .example.Text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.Text4 span, .example.Text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.Text5 span, .example.Text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }
This image shows what the output should look like, in case your browser's support for writing-mode
is incomplete:
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'writing-mode' in that specification. | Candidate Recommendation | Initial definition |
CSS Writing Modes Level 4 The definition of 'writing-mode' in that specification. | Candidate Recommendation | Add sideways-lr and sideways-rl
|
Initial value | horizontal-tb |
---|---|
Applies to | all elements except table row groups, table column groups, table rows, and table columns |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes
|
12
|
41
|
9
|
15
|
5.1
|
lr , lr-tb , rl , rl-tb , tb , and tb-rl
|
48 | 12 | 43 | 9
|
Yes | ? |
horizontal-tb , vertical-lr , and vertical-rl
|
Yes | No | 43 | No | Yes | ? |
sideways-lr and sideways-rl
|
No | ? | 43 | No | No | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes
|
Yes
|
Yes
|
41
|
? | 5.1
|
Yes
|
lr , lr-tb , rl , rl-tb , tb , and tb-rl
|
48 | 48 | Yes | 43 | ? | ? | 5.0 |
horizontal-tb , vertical-lr , and vertical-rl
|
No | No | No | ? | ? | ? | No |
sideways-lr and sideways-rl
|
No | No | ? | ? | ? | ? | No |
writing-mode
attributedirection
unicode-bidi
text-orientation
text-combine-upright
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode