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

<p>
    The CSS Writing Modes Level 3 specification is a comprehensive specification which addresses the various requirements for catering to international writing systems. The <code>writing-mode</code> 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.
</p>

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

<p>
    The <strong>inline base direction</strong> 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 <code>dir</code> attribute, we should use those instead of CSS styling to ensure layout remains correct in the absence of stylesheets.
</p>

<p>
    The <code>text-orientation</code> property controls the orientation of individual characters and is covered in <a href="http://<a href=https://tympanus.net/codrops/css_reference/text-orientation/">its own entry</a>. Every Unicode character has an implicit bidirectional type and the <a href="http://unicode.org/reports/tr9/">Unicode bidirectional algorithm</a> defines how directionality is determined for bidirectional Unicode text.
</p>

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. Werethe shadows to be banished from itscorners, the alcove would in that instantrevert to mere void.A phosphorescent jewel gives off its glowand color in the dark and loses its beauty inthe light of day. Were it not for shadows,there would be no beautyblock flow directionline orientationinline basedirection
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 magicof shadows. Were theshadows to be banishedfrom its corners, thealcove would in thatinstant revert to merevoid.A phosphorescent jewelgives off its glow andcolor in the dark andloses its beauty in thelight of day. Were it notfor shadows, there wouldbe no beautyblock flow directionlineorientationinline basedirection
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 wouldlight of day. Were it notloses its beauty in thecolor in the dark andgives off its glow andA phosphorescent jewelvoid.instant revert to merealcove would in thatfrom its corners, theshadows to be banishedof shadows. Were theUltimately it is the magicblock flow directionlineorientationinline basedirection
Mongolian-based writing mode

Examples

<p>
    The following examples illustrate how the <code>writing-mode</code> property affects the layout of different scripts.
</p>

<pre><code>.element {
writing-mode: horizontal-tb;

}

horizontal-tb

<pre><code>.element {
writing-mode: vertical-lr;

}

vertical-lr

<pre><code>.element {
writing-mode: vertical-rl;

}

vertical-rl

<pre><code>.element {
writing-mode: sideways-lr;

}

sideways-lr

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

}

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/
<p>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.</p>
https://jsfiddle.net/huijing/1h1yLoqm/

Browser Support

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

Further Reading

codrops