text-orientation

Definition

The text-orientation CSS property is used to specify the orientation of characters within a line of text. It controls the rotation or direction of text characters, allowing you to display text vertically or at a specific angle.

The text-orientation property accepts various values:

mixed: This is the default value. It allows the browser to determine the orientation based on the text and the writing mode.
upright: Displays the text characters in their normal vertical orientation, parallel to the writing mode.
sideways: Rotates the text characters 90 degrees counterclockwise from their normal orientation, perpendicular to the writing mode.
sideways-right: Similar to sideways, but rotates the text characters 90 degrees clockwise instead.

Here’s an example:

.vertical-text {
  text-orientation: sideways;
}

In this example, the .vertical-text class sets the text-orientation property to sideways, which rotates the text characters 90 degrees counterclockwise, making the text display vertically.

It’s important to note that the text-orientation property works in conjunction with the writing mode specified for the text. For example, in a horizontal writing mode, the sideways value will display the text vertically, while in a vertical writing mode, it will display the text horizontally.

The text-orientation property is commonly used in typography for specific situations where vertical or rotated text is required, such as in certain scripts, headings, or decorative text elements. It provides flexibility in text layout and presentation, allowing for unique and visually appealing designs.

Syntax

.badge {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Values

mixed: default—upright for ideographs and rotated for Latin characters.
upright: keep every character upright (often used with vertical writing).
sideways: rotate characters 90 degrees regardless of script.
sideways-right: legacy alias (Moz only).

Practical Examples

.badge {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.15em;
}

Control glyph rotation when using vertical writing modes for navigation or decorative labels.

HTML

Horizontal

Vertical

Code

<div class="flex gap-4">
  <div class="flex h-40 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm">Horizontal</div>
  <div class="flex h-40 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm" style="writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.2em;">Vertical</div>
</div>

Tips & Best Practices

Always combine with writing-mode—text-orientation alone will not switch layout direction.
Use letter-spacing to improve readability for vertical Latin text.
Test across browsers; older versions may require vendor prefixes.

Accessibility & UX Notes

Ensure vertical text is supplemental and not the sole way to convey critical information.

Browser Support

Supported in modern browsers (Chrome 48+, Firefox 41+, Safari 10+, Edge).

writing-mode for block direction.
text-combine-upright for multi-character tate-chu-yoko in Japanese vertical text.
transform for alternative rotation techniques.