CSS writing-mode for Vertical and Multi-Direction Text

The CSS writing-mode property controls whether text lines are laid out horizontally or vertically, as well as the direction in which new blocks progress across the screen. By default, web typography relies on horizontal top-to-bottom text, but writing-mode allows developers to natively support vertical layouts essential for internationalization—such as traditional East Asian and Mongolian scripts—as well as modern graphic design accents like vertical headers and side labels. This article explains how the property works, outlines its core syntax values, demonstrates how it changes the coordinate flow of the document, and details how it pairs with other CSS properties to handle complex, multi-directional typographic layouts.

Core Syntax and Values

The writing-mode property defines the block flow direction (how lines stack) and the inline base direction (how characters run within a line).

  • horizontal-tb: The default web standard. Text flows horizontally along the inline axis, and lines progress vertically from top to bottom (tb).
  • vertical-rl: Text flows vertically from top to bottom along the inline axis, and lines stack from right to left (rl). This is the primary orientation for traditional Chinese, Japanese, and Korean (CJK) typography.
  • vertical-lr: Text flows vertically from top to bottom, but lines stack from left to right (lr). This layout is native to scripts like Mongolian and Phags-pa, and is frequently used for Western graphic design accents like sidebar badges.
  • sideways-rl and sideways-lr: Rotates all content, including scripts that normally stay upright, physically sideways. These values are useful for rotated labels, though browser support may vary compared to the standard vertical values.
/* Example Usage */
.vertical-text-rl {
  writing-mode: vertical-rl;
}

.vertical-text-lr {
  writing-mode: vertical-lr;
}

How writing-mode Affects the Box Model

Changing writing-mode shifts the browser's coordinate system from physical dimensions to logical dimensions:

  • Inline Axis: The direction text runs within a single line. In horizontal-tb, the inline axis is horizontal (X-axis). In vertical-rl or vertical-lr, the inline axis becomes vertical (Y-axis).
  • Block Axis: The direction lines stack. In horizontal mode, the block axis is vertical (Y-axis). In vertical mode, the block axis becomes horizontal (X-axis).

Because the axes flip, relying on physical properties like width, height, margin-top, and margin-left can lead to unexpected layouts. Instead, CSS Logical Properties dynamically adapt to the active writing-mode:

  • inline-size controls the size along the text line (equivalent to height in vertical mode).
  • block-size controls the size across lines (equivalent to width in vertical mode).
  • margin-inline-start, margin-block-end, and padding equivalents maintain structural consistency regardless of writing orientation.

Controlling Glyph Orientation: text-orientation

When text is displayed vertically, individual characters can either stand upright or rotate 90 degrees clockwise. The text-orientation property dictates this behavior when writing-mode is set to a vertical value:

  • mixed (default): Rotates horizontal scripts (such as Latin, Cyrillic, or Arabic) 90 degrees while keeping CJK characters upright.
  • upright: Forces all characters, including Latin letters and numbers, to sit upright in a stacked column.
  • sideways: Forces all text to be displayed as if the entire line were rotated 90 degrees.
.stacked-western-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Handling Multi-Directional Text

Complex typographic layouts often combine vertical and horizontal text simultaneously. CSS provides properties that work directly alongside writing-mode to solve these challenges:

Combining Numbers and Acronyms (Tate-chū-yoko)

In vertical East Asian typography, short Latin numbers or abbreviations (like "2024" or "CSS") are often placed side-by-side horizontally within a single vertical line. The text-combine-upright property achieves this effect:

.year-number {
  text-combine-upright: all;
}

This compacts the enclosed characters into the space of a single full-width vertical character box.

Direction and Bidirectionality

The direction property (ltr or rtl) interacts with writing-mode to determine the start and end points of a line. In vertical modes, combining writing-mode: vertical-rl with direction: rtl reverses the starting point of the vertical text line, making text flow from the bottom of the page upward to the top.

Practical Implementation Scenarios

  • Catering to Global Audiences: Rendering CJK and Mongolian literature accurately without relying on SVG hacks, canvas workarounds, or pre-rendered images.
  • User Interface Components: Creating side navigation tabs, book spines, table column headers, and timeline axes that save horizontal screen space while remaining fully accessible and selectable.
  • Accessible Typography: Because writing-mode is purely visual and structural, screen readers still read the text in its natural semantic order without disruption.