Widely available Essential when the language or presentation genuinely requires vertical writing. Use carefully for decorative layouts.

writing-mode

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

TypographyVertical textLayout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
writing-mode
48
12
41
10.1
48
10.3
horizontal-tb
48
12
43
9
48
9
sideways-lr
132
132
43
18.4
132
18.4
sideways-rl
132
132
43
18.4
132
18.4
vertical-lr
48
12
43
9
48
9
vertical-rl
48
12
43
9
48
9
Other
svg.global_attributes.writing-mode

The writing-mode attribute specifies whether the initial inline-progression-direction for a text element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to elements; the attribute is ignored for and sub-elements. (Note that the inline-progression-direction can change within a element due to the Unicode…
48
12
41
10.1
48
10.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 1 item(s)
Implementation note
  • Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 1 item(s)
Implementation note
  • Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)

Syntax

CSS 
/* Vertical Japanese text */
.vertical-japanese {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Sidebar label */
.sidebar-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

Live demo

Vertical-rl(vertical writingright->left)

writing-mode Vertical-rl(vertical writingright->left) demo.

PreviewFullscreen

Vertical-lr(vertical writingleft->right)

writing-mode Vertical-lr(vertical writingleft->right) demo.

PreviewFullscreen

sidebarlabel

writing-mode sidebarlabel demo.

PreviewFullscreen

Use cases

  • Vertical editorial text

    Render Japanese or Chinese content in a traditional vertical flow when the reading context calls for it.

  • Side labels and annotations

    Place compact vertical labels in charts, packaging-like layouts, or museum-style captions.

Cautions

  • Vertical writing affects layout, alignment, and overflow in more places than a simple rotation would.
  • Do not use vertical writing only as decoration if it harms reading speed or comprehension.

Accessibility

  • Use writing directions that match user expectations for the language being shown.
  • Test zoom and screen-reader flows carefully when vertical layouts contain essential content.

Related links