CSS Reference Property

writing-mode

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

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 in which block-level boxes are stacked and the direction in which they flow within the block container. The writing-mode property affects this behavior.

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 behavior, 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 style sheets.

The <a href="http://<a href=https://tympanus.net/codrops/css_reference/text-orientation/">text-orientation</a> 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.

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

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

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

.element {
    writing-mode: sideways-lr;
}

sideways-lr

.element {
    writing-mode: sideways-rl;
}

sideways-rl

Live Demo

Although vertical text is most 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. Resize the preview panel when opening this demo to see the navigation changing:

View this demo on the Codrops Playground

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 the reader’s attention to be focused on the header and text of the article.

View this demo on the Codrops Playground

Browser Support

CSS writing-mode property

Property to define whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

W3C Recommendation

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com