Using CSS Writing-Mode for Vertical Typography

The modern CSS writing-mode property is a cornerstone of internationalized web design, enabling native vertical text layout for East Asian and Central Asian scripts directly in the browser. By defining whether lines of text are laid out horizontally or vertically and dictating the direction in which blocks progress, writing-mode shifts web typography away from its historically Western, horizontal bias. This article examines how the property functions, how it pairs with logical properties and specialized orientation rules, and why it is essential for authentic global web development.

Core Values and Script Support

The writing-mode property governs the block flow direction of an element. The primary values supporting vertical scripts are:

  • vertical-rl: Text flows vertically from top to bottom, and blocks progress from right to left. This is the standard layout for traditional Chinese, Japanese (Tate-gaki), and Korean vertical text.
  • vertical-lr: Text flows vertically from top to bottom, but blocks progress from left to right. This is essential for scripts like traditional Mongolian and Phags-pa.
  • horizontal-tb: The default web standard, where text flows horizontally from left to right (or right to left) with blocks progressing top to bottom.

When applied, the browser transforms the inline axis (the direction text reads) into a vertical line, automatically adjusting scrolling, line wrapping, and baseline alignments to match the native expectations of the target language.

Integration with CSS Logical Properties

A critical evolution alongside writing-mode is the CSS Logical Properties and Values specification. Traditional physical properties like width, height, margin-top, or padding-left are bound to the physical screen. In a vertical layout, a physical margin-top affects the start of the line rather than the space between lines.

Logical properties replace physical coordinates with flow-relative terms:

  • inline-size and block-size replace width and height. In vertical-rl, block-size controls horizontal width, while inline-size controls vertical height.
  • margin-block-start and margin-block-end control spacing before and after lines.
  • margin-inline-start and margin-inline-end govern spacing at the beginning and end of the text stream.

Using logical properties ensures that layouts adapt fluidly across multilingual websites without requiring separate, physically mapped stylesheets for vertical layouts.

Fine-Tuning Vertical Typography

Vertical typography often contains mixed content, such as Latin words, abbreviations, or numbers embedded within East Asian text. Modern CSS provides complementary properties to handle these typographical nuances:

  • text-orientation: Controls the slant and posture of characters in a vertical line. Setting text-orientation: mixed rotates Latin glyphs 90 degrees while keeping East Asian glyphs upright. Setting it to upright forces all characters, including Latin letters, to stand upright in a single vertical column.
  • text-combine-upright: Implements the typographic practice known as tate-chū-yoko. This property allows developers to pack multiple horizontal characters—such as a two-digit number or a short abbreviation like "2026" or "AM"—into the space of a single vertical character cell, maintaining rhythm and readability.

Impact on Global Web Development

Before the widespread support of writing-mode, developers relied on brittle hacks, such as rotating text containers using CSS transforms or exporting text as static images. These workarounds degraded accessibility, broke text selection, severely harmed search engine indexing, and created high maintenance overhead.

With native writing-mode support across all modern rendering engines, vertical scripts are fully accessible to screen readers, searchable by crawlers, and natively responsive. Global web developers can now build culturally authentic, multi-script layouts that honor traditional typography while maintaining the full performance and accessibility of the modern open web.