writing-mode: vertical-rl

A vertical label that does not break the box

Caveatwriting-mode moves the block axis and every physical property keeps pointing where it always did, so the layout stops agreeing with the names: height now caps how far the label runs down its own line and width sizes the block, which is why the first attempt either overflows the box or wraps after two words. The logical pair — inline-size, block-size, padding-inline, margin-block — are the ones that follow the rotation. Watch text-orientation: upright too: it stands latin letters up one at a time and turns off kerning and ligatures while it does.

FallbackEvery engine has had this for years, so the degradation that matters is inside your own page. The mode inherits, so a widget nested in the rotated column rotates with it until something sets writing-mode: horizontal-tb back — which is also how you rotate a spine without rotating what it labels. An engine that did ignore the declaration lays the label down flat and doubles the width of the column it was there to save.

.spine {
  writing-mode: vertical-rl;

  /* the block axis is horizontal now,
     so inline-size caps how far the
     label runs down, not how wide */
  inline-size: 120px;
  padding-inline: 10px;
  padding-block: 6px;
}

.spine .widget {
  /* it inherits — turn it back */
  writing-mode: horizontal-tb;
}

Published 29 Aug 2026