Codectionary / Developer documentation / CSS

Vertical Layout with writing-mode

writing-mode chooses the direction in which lines are stacked and whether text runs horizontally or vertically. text-orientation controls glyph orientation in vertical lines. Logical dimensions and spacing follow the writing mode, making them useful for multilingual layouts.

Syntax

.vertical { writing-mode: vertical-rl; text-orientation: mixed; }

Examples

Vertical Layout with writing-mode: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.vertical { writing-mode: vertical-rl; text-orientation: mixed; block-size: 8rem; inline-size: 14rem; border: 1px solid; padding: 1rem; }
  1. Expected result: The Japanese paragraph uses vertical lines that progress from right to left; the second paragraph stays horizontal.
  2. inline-size measures the line direction, which is vertical in this mode.
  3. writing-mode affects layout while text-orientation adjusts character presentation.
HTML used by this example

<p class="vertical" lang="ja">縦書きの文章です。<br>次の行です。</p><p>Normal horizontal paragraph.</p>

Best practices

  • Use vertical writing for appropriate language and design requirements.
  • Test punctuation, Latin fragments, and focus indicators with real content.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading