text-orientation
In vertical writing mode, decides whether each glyph stands upright or lies on its side. writing-mode chooses the direction lines flow in; this property chooses the angle of the glyphs inside those lines.
Class List
| Class | CSS | Description |
|---|---|---|
tom | text-orientation: mixed | Mixed (CJK upright, Latin rotated) |
tou | text-orientation: upright | All characters upright |
tosr | text-orientation: sideways-right | Rotated to the right |
tos | text-orientation: sideways | Laid on its side |
Live Demo
All four columns show the same sentence with vertical writing enabled via wmvr, differing only in the orientation class. Compare how the CJK glyphs, the Latin letters, and the digits are placed.
mixed — tom
CJK glyphs stand upright while Latin letters and digits lie down.
upright — tou
Latin letters and digits are stood upright as well.
sideways — tos
Every glyph, CJK included, is rotated onto its side.
sideways-right — tosr
Renders the same as sideways; it is essentially a legacy alias.
<!-- The four columns above -->
<div class="wmvr tom h20rem">...</div>
<div class="wmvr tou h20rem">...</div>
<div class="wmvr tos h20rem">...</div>
<div class="wmvr tosr h20rem">...</div>Class Details
tomtext-orientation: mixed
The default and the value to use for body text. CJK glyphs stay upright while Latin letters and digits are rotated 90 degrees clockwise so words remain readable. Vertical prose with the occasional English quotation still reads naturally.
<!-- Vertical body text: the normal choice for CJK -->
<article class="wmvr tom h60rem fs16px lh2">
... vertical article body ...
</article>toutext-orientation: upright
Stands everything upright, Latin letters and digits included. Characters stack one per line like a shop sign or a book spine. Words become tiring to read, so keep it for short labels.
<!-- Book spine label: every glyph stands upright -->
<div class="wmvr tou h30rem fs2rem fw700 ls0-1em">
ATOMIC CSS
</div>Letter spacing becomes vertical spacing
While upright, letter-spacing opens up the gap between stacked glyphs, which is a handy way to loosen a cramped vertical label.
tostosrsideways / sideways-right
Rotates every glyph 90 degrees, CJK included, so a horizontal line of text is dropped sideways into a vertical slot. That suits tight spaces such as chart axis labels. sideways-right renders identically and exists mainly for backward compatibility.
<!-- Rotated axis label in a chart -->
<span class="wmvr tos fs12px cA1A1AA">
Requests per second
</span>Practical Example
Must be used with a writing-mode class to take effect.
<!-- Vertical writing + mixed orientation -->
<div class="wmvr tom">
Text with mixed Korean and English
</div>
<!-- Vertical writing + all characters upright -->
<div class="wmvr tou">
ABCDE 12345
</div>The most common production pattern is a thin vertical rail label sitting beside the main content.
<!-- Sidebar section marker: a thin vertical rail next to the content -->
<div class="df gap2rem">
<div class="wmvr tou fs12px ttu ls0-2em cA1A1AA fw700 bl2pxsolid38BDF8 pl12px">
Chapter 03
</div>
<div class="fg1">
<h2 class="fs2-4rem fw700 cFAFAFA">Vertical typography</h2>
<p class="fs14px c71717A lh1-8">... body copy ...</p>
</div>
</div>Tips and Pitfalls
CJK vs Latin
tom (mixed) keeps CJK characters upright and rotates Latin characters. tou (upright) keeps all characters upright.
It does nothing in horizontal writing mode
While writing-mode is horizontal-tb, this property is ignored entirely. If your demo looks unchanged, check that a vertical class such as wmvr is present.
It is not the same as rotating with transform
rotate(90deg) spins the whole box while its layout size stays horizontal. Vertical writing makes the text flow itself vertical, so the element occupies height, and line breaking and text selection keep working.
Without a height, the text never wraps
In vertical writing, lines break against height, not width. If you do not set a height, the sentence keeps running downward and overflows its container.