Rotating text has practical uses — sidebar labels, book spines, watermarks, and decorative headings. Three distinct techniques are available: CSS transform, CSS writing-mode, and SVG presentation attributes.

CSS transform — any angle

transform: rotate() on an inline or block element. Negative values rotate anti-clockwise.

CSS writing-mode — vertical text

writing-mode: vertical-rl and writing-mode: vertical-lr flow text top-to-bottom without using transform at all. This is the correct approach for sidebar labels and book spine text.

text-orientation — upright characters in vertical flow

text-orientation: upright keeps each letter facing forward within a vertical flow, rather than rotating the whole string.

Practical — book spine label

Practical — sidebar label

SVG text rotation — no CSS

SVG <text> supports transform="rotate(angle)" as a presentation attribute. No stylesheet required.

Practical — watermark

Rotated text positioned behind content using position: relative and position: absolute.