text-orientation

Setting orientation of the text characters in a line.

Overview

Examples

Keep characters upright

Use text-orientation:upright with vertical writing when each character should remain upright instead of rotating sideways.

<p class="writing-mode:vertical-rl text-orientation:upright">2026</p>

@layer utilities {    .text-orientation\:upright {        text-orientation: upright    }}

Use mixed orientation

Use text-orientation:mixed to let the browser rotate horizontal scripts while keeping vertical scripts upright.

<p class="writing-mode:vertical-rl text-orientation:mixed">Label 2026</p>

Use sideways orientation

Use text-orientation:sideways when text should rotate as a run inside a vertical flow.

<p class="writing-mode:vertical-rl text-orientation:sideways">Side label</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="text-orientation:upright:hover text-orientation:mixed@sm text-orientation:mixed@print">...</p>