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.

Rendered Output
CSS 
h1 {
    writing-mode: vertical-lr;
}
HTML 
<h1>A Heading Displayed Vertically</h1>

Formal syntax

CSS 
selector {
    writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
}

Syntax

CSS 
/* 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

Formal definition of the writing-mode Property
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

Accepted values for the writing-mode property
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.

HTML Demo 
<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.

CSS Live Demo Click the demo button below!
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 .container element is aligned to the right.
  • For vertical-lr, the starting edge of text lines is the left side. The content of the .container element is aligned to the left.
Character Orientation
  • For both vertical-rl and vertical-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.

HTML Demo 
<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.

CSS Live Demo Click the demo button below!
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 .container element is aligned to the right.
  • For sideways-lr, the starting edge of text lines is the left side. The content of the .container element 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.

CSS Live Demo Click the demo button below!

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

Browser Compatibility for the writing-mode Property and Its Values
Property and Value
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
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 for the writing-mode property
Specification
writing-mode CSS Writing Modes Level 4
#block-flow

References

See also