The writing-mode property allows us to determine the direction which content flows on the web page.

The CSS Writing Modes Level 3 specification is a comprehensive specification which addresses the various requirements for catering to international writing systems. The writing-mode property applies to use-cases related to vertical writing systems. East Asian languages, like Chinese and Japanese, can be written horizontally, flowing from top-to-bottom as well as vertically, flowing from right-to-left. Mongolian is written vertically, flowing from left-to-right.

Writing Modes introduce some concepts with regards to content flow that are addressed by several CSS properties. The block flow direction refers to the direction which block-level boxes are stacked and the direction in which they flow within the block container. The writing-mode property affects this behaviour.

The inline base direction determines the direction of content flow on a line of text, where the line starts and where it ends. Although there are CSS properties that can affect this behaviour, HTML already possesses markup features to control bi-directionality, e.g. the dir attribute, we should use those instead of CSS styling to ensure layout remains correct in the absence of stylesheets.

The text-orientation property controls the orientation of individual characters and is covered in its own entry. Every Unicode character has an implicit bidirectional type and the Unicode bidirectional algorithm defines how directionality is determined for bidirectional Unicode text.

Official Syntax

  • Syntax:
    writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
  • Initial: horizontal-tb
  • Applies To: All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container
  • Animatable: No

Values

horizontal-tb
This is the initial value. Text is rendered from left-to-right, with a top-to-bottom block flow direction. Both the writing-mode and typographic-mode are horizontal.
Ultimately it is the magic of shadows. Were the shadows to be banished from its corners, the alcove would in that instant revert to mere void.A phosphorescent jewel gives off its glow and color in the dark and loses its beauty in the light of day. Were it not for shadows, there would be no beautyblock flow directionline orientationinline base direction
Latin-based writing mode
vertical-rl
Text is rendered from top-to-bottom, with a right-to-left block flow direction. Both the writing-mode and typographic-mode are vertical.
Han-based writing mode
vertical-lr
Text is rendered from top-to-bottom, with a left-to-right block flow direction. Both the writing-mode and typographic-mode are vertical.
Mongolian-based writing mode
sideways-rl
Text is rendered from top-to-bottom, with a right-to-left block flow direction. The writing-mode is vertical but the typographic-mode is horizontal, with the glyphs set sideways on their right side.
*Experimental value, may be differed to CSS Writing Modes Level 4
Ultimately it is the magic of shadows. Were the shadows to be banished from its corners, the alcove would in that instant revert to mere void.A phosphorescent jewel gives off its glow and color in the dark and loses its beauty in the light of day. Were it not for shadows, there would be no beautyblock flow directionline orientationinline base direction
sideways-lr
Text is rendered from top-to-bottom, with a left-to-right block flow direction. The writing-mode is vertical but the typographic-mode is horizontal, with the glyphs set sideways on their left side.
*Experimental value, may be differed to CSS Writing Modes Level 4
be no beauty. for shadows, there would light of day. Were it not loses its beauty in the color in the dark and gives off its glow and A phosphorescent jewelvoid. instant revert to mere alcove would in that from its corners, the shadows to be banished of shadows. Were the Ultimately it is the magicblock flow directionline orientationinline base direction
Mongolian-based writing mode

Examples

The following examples illustrate how the writing-mode property affects the layout of different scripts.

.element {
    writing-mode: horizontal-tb;
}
horizontal-tb
.element {
    writing-mode: vertical-lr;
}
vertical-lr
.element {
    writing-mode: vertical-rl;
}
vertical-rl
<pre><code>.element {
writing-mode: sideways-lr; }</code></pre>

sideways-lr

<pre><code>.element {
writing-mode: sideways-rl; }</code></pre>

sideways-rl

Live Demo

Although vertical text is mostly commonly seen and used on sites in East Asian languages, the design aspect of using vertical text can be applied to Latin-based writing systems as well. The following is an example of a responsive navigation bar that uses a vertical text layout on narrow screens.

https://jsfiddle.net/huijing/Ljmyc0n0/

The next example shows how a blog category can be displayed as a vertical label on the right of the post on wide screen layouts. The label is not necessarily critical information, but it is useful to have, so placing it on the right of the page, laid out vertically, allows reader's attention to be focused on the header and text of the article.

https://jsfiddle.net/huijing/1h1yLoqm/

Browser Support

[caniuse feature="css-writing-mode"]