text-orientation Tester

The text-orientation CSS property controls the orientation of text characters within a line when writing-mode is set to a vertical mode (like vertical-rl or vertical-lr). It determines whether glyphs appear upright, sideways, or follow a mixed strategy based on character type.

mixed (default): CJK characters (Chinese, Japanese, Korean) stay upright while Latin letters and digits rotate 90° clockwise. upright: All characters remain upright — even Latin letters stack vertically. sideways: All characters rotate 90° clockwise, making the entire text appear tilted on its side. Use this tester to see the visual differences in real time.

All modern browsers fully support text-orientation: Chrome 48+, Firefox 41+, Safari 11+, and Edge 79+. The sideways value was historically prefixed as sideways-right in some older browsers, but the unprefixed version is now standard. Always test across browsers for production use.

No. The text-orientation property only has an effect when writing-mode is set to a vertical mode (vertical-rl, vertical-lr, sideways-rl, or sideways-lr). In horizontal modes, this property is ignored.

In mixed mode, CJK punctuation marks (such as full-width commas, periods, and brackets) are treated as upright characters, consistent with traditional East Asian typography. In sideways mode, they rotate along with all other characters. In upright mode, everything — including punctuation — stays upright.

Absolutely! Designers use text-orientation: upright to create striking vertical headlines where every letter stacks neatly. The sideways value is useful for rotated labels in tight spaces. Combined with custom fonts, these properties open up unique typographic possibilities beyond traditional horizontal layouts.