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.
- 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.
- 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.
- 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
- 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
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;
}
<pre><code>.element {
writing-mode: vertical-lr;
}
<pre><code>.element {
writing-mode: vertical-rl;
}
<pre><code>.element {
writing-mode: sideways-lr;
}
<pre><code>.element {
writing-mode: 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
- CSS Writing Modes Level 3
- MDN writing-mode
- CSS Writing Modes by Jen Simmons