Design Atlas
한국어
Aa Typography

Vertical writing mode

세로쓰기

A layout direction where text flows top-to-bottom instead of left-to-right, and lines stack right to left. CSS implements it with `writing-mode: vertical-rl`.

Also known as: 세로짜기writing-mode: vertical-rl
···
html
<div class="stage">
  <div class="block" id="block">전통 세로쓰기 1234</div>
  <div class="readout">writing-mode: <span id="mode">vertical-rl</span></div>
</div>
css
.stage{display:grid;justify-items:center;gap:12px}
.block{font:600 clamp(14px,4vmin,20px)/1.7 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);writing-mode:vertical-rl;text-orientation:mixed;height:clamp(110px,32vmin,190px)}
.block.horiz{writing-mode:horizontal-tb;height:auto;text-align:center}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
#mode{color:var(--accent);font-weight:700}
js
const block = document.getElementById('block');
const mode = document.getElementById('mode');
let vertical = true;
function apply(){
  block.classList.toggle('horiz', !vertical);
  mode.textContent = vertical ? 'vertical-rl' : 'horizontal-tb';
  vertical = !vertical;
}
apply();
setInterval(apply, 1900);

Traditional typesetting across the Sinosphere — Korea, China, Japan — ran vertically. It suited tall formats like scrolls and hanging banners, and matched the stroke order of brush calligraphy. It still survives in some Japanese novels and newspapers, Korean folding screens and carved signboards, and vertical shop signs.

CSS's `writing-mode` property controls this direction. `vertical-rl` writes vertically with lines stacking right to left (the traditional East Asian direction); `vertical-lr` stacks lines left to right (used for scripts like Mongolian). In vertical mode, the logical meaning of `width`/`height` and `margin-top/bottom` vs `margin-left/right` effectively swaps, so logical properties like `margin-block`/`margin-inline` keep the same code working in either mode.

Mixing Latin letters or digits into vertical text rotates them 90° by default; `text-orientation: upright` keeps them standing upright and stacked top-to-bottom instead. Punctuation like quotation marks and commas rotates automatically to match the vertical direction too.

When to use

Use for calligraphy- or signboard-inspired branding, Japanese-language content, or narrow tall banners. Horizontal remains the default for ordinary UI and body text.