A vertical label that does not break the box

Q: Why does width not limit my vertical text?

In writing-mode: vertical-rl the lines run top to bottom, so height caps the line length and width sizes the stack of lines. Use inline-size and block-size instead, which follow the writing mode and keep meaning line length and block thickness.

Q: Should I rotate text with transform or writing-mode?

Use writing-mode when the label sits in a layout. transform: rotate() only changes painting, so the element keeps its original horizontal box, and neighbours overlap it or leave a gap. A vertical writing mode gives the element a narrow box of its own.

Q: How do I make vertical text read from bottom to top?

writing-mode: vertical-rl runs top to bottom. For bottom to top, use writing-mode: sideways-lr where the engine supports it, or keep vertical-rl and add transform: rotate(180deg), which flips the label without changing the size of its box.

Live demo

Archive

A rotated label still occupies its horizontal box and overlaps whatever is beside it. This one is laid out vertically, so the column it sits in is genuinely narrower.

Caveat and fallback

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.

Source code

CSS

.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

Questions

Why does width not limit my vertical text?

In writing-mode: vertical-rl the lines run top to bottom, so height caps the line length and width sizes the stack of lines. Use inline-size and block-size instead, which follow the writing mode and keep meaning line length and block thickness.

Should I rotate text with transform or writing-mode?

Use writing-mode when the label sits in a layout. transform: rotate() only changes painting, so the element keeps its original horizontal box, and neighbours overlap it or leave a gap. A vertical writing mode gives the element a narrow box of its own.

How do I make vertical text read from bottom to top?

writing-mode: vertical-rl runs top to bottom. For bottom to top, use writing-mode: sideways-lr where the engine supports it, or keep vertical-rl and add transform: rotate(180deg), which flips the label without changing the size of its box.