Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS text-orientation: choose glyph posture in vertical text

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

text-orientation controls how glyphs are drawn in a vertical writing mode. The mixed value generally leaves upright scripts upright and turns horizontal-script glyphs sideways; upright asks every character to remain upright. It is not a substitute for writing-mode, and a rotated horizontal box does not reproduce vertical text layout.

When to use it

An archive index has compact Japanese section labels containing short Latin inventory codes. The page uses writing-mode: vertical-rl for the index only. The default mixed orientation keeps the code as a readable sideways run, while a short numeric badge is set upright because its digits are intended as a vertical marker. Compare both with a real translation and longer identifiers; upright Latin letters can become a stack of separate characters and consume much more block space. Test line breaks, punctuation, selection, high zoom, and a fallback font with the actual scripts used. The surrounding document should keep its normal reading direction. A vertical title can be meaningful, but a decorative sidebar with a long sentence often imposes unnecessary reading work. If the label is essential navigation, provide enough room and keep the DOM sequence sensible for keyboard and assistive technology. Do not rotate a horizontal sentence merely to save width.

css
.archive-index { writing-mode: vertical-rl; text-orientation: mixed; max-block-size: 18rem; }
.archive-index__badge { text-orientation: upright; font-weight: 700; }
.archive-index a:focus-visible { outline: 3px solid #1c5e87; outline-offset: 3px; }

Cost and verification

Vertical text can change intrinsic sizes and wrapping; check narrow containers and fallback fonts before fixing a height. The browser performs ordinary text layout, so the property itself is not a performance concern. The larger cost is QA across scripts, font coverage, punctuation, and selection behavior. Do not set upright on a long Latin code without checking its length. A rotated transform may visually resemble a vertical label, but it keeps horizontal layout geometry and can produce awkward clipping and focus outlines. Text-orientation applies only in vertical writing modes. Keep the navigation label understandable when styles do not load.

Common Mistakes

  • Do not expect text-orientation to create a vertical writing mode by itself.
  • Do not use upright for arbitrary long Latin identifiers.
  • Do not rotate the entire navigation box and assume layout and reading order follow.

Connected lessons

css
reference
web
Storage details