Vertical writing mode

A writing mode sets two axes at once: the direction characters advance along a line, and the direction lines stack. Western text is horizontal-tb, characters left to right and lines top to bottom. Traditional Chinese, Japanese, and Korean typography is vertical-rl: characters advance downward and the columns stack right to left, so the first column is at the right edge and the reader works leftward. Japanese calls this setting tategaki, and it is still the norm for novels, newspapers, and manga, while technical writing usually uses the horizontal setting.

The axis swap changes what “width” and “height” mean to a layout, which is the part that surprises people who only set the property. In vertical text the inline direction is vertical, so the measure of a column is its height, a “line length” is a vertical distance, and margins named top and left no longer sit where the text logically begins. That is why the platform grew logical properties: inline-size, block-size, margin-block-start, and their siblings follow the writing mode, so one stylesheet can serve both settings without being rewritten per direction.

Latin letters and digits inside vertical CJK text need a separate decision, which is what text-orientation makes. The default, mixed, keeps CJK glyphs upright and rotates non-CJK runs ninety degrees clockwise, so an embedded word lies on its side and reads downward. upright sets every glyph upright, which stacks a Latin word one letter above the next: right for a two-letter abbreviation or a unit, wrong for a long word. Japanese typography has a third convention for short numbers, tate-chu-yoko, where two or three digits are set horizontally inside a single vertical slot, available in CSS as text-combine-upright.

Nearby terms describe different things and are easy to conflate. Bidirectional text is about runs of opposite direction inside one line, an Arabic sentence with a Latin brand name in it, where the line’s own axis never changes. Vertical writing mode changes that axis for the whole block. RTL mirroring is about flipping an interface for a right-to-left language, which a vertical setting does not ask for: a vertical Japanese page is read from the right, but its icons are not mirrored.