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="text-orientation:upright writing-mode:vertical-rl">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="text-orientation:mixed writing-mode:vertical-rl">Label 2026</p>

Use sideways orientation

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

<p class="text-orientation:sideways writing-mode:vertical-rl">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@print text-orientation:mixed@sm">...</p>