Typography
text-orientation
Control glyph orientation inside vertical writing.
Overview
| Class | Declarations |
|---|---|
text-orientation:mixed | text-orientation: mixed;
|
text-orientation:sideways | text-orientation: sideways;
|
text-orientation:upright | text-orientation: upright;
|
text-orientation:<value> | text-orientation: <value>;
|
Examples
Keep characters upright
text-orientation:upright works inside vertical writing. Keep Latin characters upright as individual units alongside the CJK characters.
Keep characters upright
These are native vertical text runs. Compare Latin and CJK glyph orientation without rotating the entire element.
<!-- Vertical flow · upright --><p id="target" lang="zh-Hant" class="h:176px m:0 font-md leading:24px text-orientation:upright writing-mode:vertical-rl">設計 ABC</p>Generated CSS
@layer utilities { .text-orientation\:upright { text-orientation: upright }}Use mixed orientation
text-orientation:mixed works inside vertical writing. Let the browser keep normally vertical CJK characters upright while laying Latin characters sideways.
Use mixed orientation
These are native vertical text runs. Compare Latin and CJK glyph orientation without rotating the entire element.
<!-- Vertical flow · mixed --><p id="target" lang="zh-Hant" class="h:176px m:0 font-md leading:24px text-orientation:mixed writing-mode:vertical-rl">設計 ABC</p>Use sideways orientation
text-orientation:sideways works inside vertical writing. Lay the text sideways as a run, including the CJK characters. The containing element still uses vertical flow.
Use sideways orientation
These are native vertical text runs. Compare Latin and CJK glyph orientation without rotating the entire element.
<!-- Vertical flow · sideways --><p id="target" lang="zh-Hant" class="h:176px m:0 font-md leading:24px text-orientation:sideways writing-mode:vertical-rl">設計 ABC</p>Apply conditionally
Hover or focus the vertical label to switch from mixed to upright orientation. The writing mode stays vertical in both states.
Apply conditionally
These are native vertical text runs. Compare Latin and CJK glyph orientation without rotating the entire element.
<!-- Pointer and keyboard orientation --><button id="target" type="button" tabindex="0" lang="zh-Hant" class="h:200px font-md leading:24px text-orientation:mixed writing-mode:vertical-rl text-orientation:upright:hover text-orientation:upright:focus-visible">設計 ABC</button>