Definition and Usage
The writing-mode property specifies whether lines of text are laid out horizontally or vertically, and the direction in which the flow progresses.
This property can be used to switch text from a horizontal layout to a vertical writing mode.
Basic Example
In the following example, a heading is displayed vertically using writing-mode: vertical-lr.
h1 {
writing-mode: vertical-lr;
}
<h1>A Heading Displayed Vertically</h1>
Formal syntax
selector {
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
}
Syntax
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;
Formal definition
| Initial value | horizontal-tb |
|---|---|
| Applies to | All elements except table row groups, table column groups, table rows, table columns, ruby base containers, ruby annotation containers |
| Inherited | yes |
| Animatable | no |
Values
horizontal-tb |
The initial value.
Text flows horizontally, and lines are stacked from top to bottom. |
|---|---|
vertical-rl |
Text flows vertically, and lines are stacked from right to left. Alphabetic characters are rotated 90 degrees clockwise, while East Asian characters such as Chinese, Japanese, and Korean remain upright. |
vertical-lr |
Text flows vertically, and lines are stacked from left to right. Alphabetic characters are rotated 90 degrees clockwise, while East Asian characters such as Chinese, Japanese, and Korean remain upright. |
sideways-rl |
Text flows vertically, and all characters are rotated 90 degrees clockwise. Lines are stacked from right to left. |
sideways-lr |
Text flows vertically, and all characters are rotated 90 degrees counterclockwise. Lines are stacked from left to right. |
Examples of vertical-rl and vertical-lr Values
In the following demo, the direction in which lines of text flow for the vertical-rl and vertical-lr values can be clearly understood. In this case, alphabetic characters are rotated 90 degrees clockwise, while East Asian characters such as Chinese, Japanese, and Korean remain upright.
The example includes a heading and paragraphs contained within the .container element.
<div class="container">
<h1>Sample Heading</h1>
<p>縦書きで表示される段落</p>
<p>A paragraph displaying text vertically</p>
</div>
Click the CSS demo button below to apply vertical-rl and vertical-lr as the writing-mode value to the .container that wraps the heading and paragraphs.
縦書きで表示される段落
A paragraph displaying text vertically
Direction of Text Flow
- For
vertical-rl, the direction in which lines of text flow is from right to left. - For
vertical-lr, the direction in which lines of text flow is from left to right.
Starting Edge of Text Lines
- For
vertical-rl, the starting edge of text lines is the right side. The content of the.containerelement is aligned to the right. - For
vertical-lr, the starting edge of text lines is the left side. The content of the.containerelement is aligned to the left.
Character Orientation
- For both
vertical-rlandvertical-lr, alphabetic characters are rotated 90 degrees clockwise, while East Asian characters such as Chinese, Japanese, and Korean remain upright.
Examples of sideways-rl and sideways-lr Values
In the following demo, the direction in which lines of text flow for the sideways-rl and sideways-lr values can be clearly understood. In this case, for sideways-rl, all characters are rotated 90 degrees clockwise, and for sideways-lr, all characters are rotated 90 degrees counterclockwise.
<div class="container">
<h1>Sample Heading</h1>
<p>縦書きで表示される段落</p>
<p>A paragraph displaying text vertically</p>
</div>
Click the CSS demo button below to apply sideways-rl and sideways-lr as the writing-mode value to the .container that wraps the heading and paragraphs.
縦書きで表示される段落
A paragraph displaying text vertically
Direction of Text Flow
- For
sideways-rl, the direction in which lines of text flow is from right to left. - For
sideways-lr, the direction in which lines of text flow is from left to right.
Starting Edge of Text Lines
- For
sideways-rl, the starting edge of text lines is the right side. The content of the.containerelement is aligned to the right. - For
sideways-lr, the starting edge of text lines is the left side. The content of the.containerelement is aligned to the left.
Character Orientation
- For
sideways-rl, all characters are rotated 90 degrees clockwise. - For
sideways-lr, all characters are rotated 90 degrees counterclockwise.
Using Vertical Writing Mode with the text-align Property
When writing-mode is set to a vertical writing mode and used together with the text-align property, you can see how the values of the text-align property are applied.
In the following demo, the text-align property is applied to a heading element where writing-mode is set to vertical-lr.
A paragraph displaying text vertically
The text-align property sets the horizontal alignment of inline content such as text.
As shown in the demo above, when alignment is set using the text-align property, the content is aligned vertically rather than horizontally. For text-align: left;, the content is aligned to the top, and for text-align: right;, it is aligned to the bottom.
As demonstrated in this demo, when writing-mode is set to a vertical mode, the block flow direction becomes horizontal, while the inline content direction becomes vertical.
Browser compatibility
| Property and Value |
Desktop Chrome
|
Desktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
writing-mode
|
48 | 12 | 41 | 10.1 |
horizontal-tb
|
48 | 12 | 43 | 9 |
vertical-lr
|
48 | 12 | 43 | 9 |
vertical-rl
|
48 | 12 | 43 | 9 |
sideways-lr
|
132 | 132 | 43 | 18.4 |
sideways-rl
|
132 | 132 | 43 | 18.4 |
| Vertically-oriented form controls | 124 | 124 | 120 | 17.4 |
Specifications
| Specification | |
|---|---|
writing-mode
|
CSS Writing Modes Level 4 #block-flow |