Understanding and Using CSS `text-orientation`: Controlling Vertical Text Display

Learn how to control the orientation of characters in vertically written text using the CSS `text-orientation` property. This tutorial explains the different `text-orientation` values, their effects, and how to use them in conjunction with the `writing-mode` property for precise control over vertical text layout.

Understanding the CSS `text-orientation` Property

Controlling Text Orientation in Vertical Writing Modes

The CSS `text-orientation` property controls how characters are oriented within a line of text. It only applies when the text is written vertically (using the `writing-mode` property). This property doesn't affect horizontally written text.

`text-orientation` Property Values

The `text-orientation` property accepts these values:

  • mixed (default): Characters are oriented according to the script's natural orientation (rotated 90 degrees clockwise for vertical scripts).
  • upright: Characters are displayed upright, regardless of the script's natural orientation. This forces left-to-right orientation even for vertical scripts.
  • sideways: Rotates the text 90 degrees clockwise (horizontal layout). This value is not fully supported by all major browsers (primarily works in Firefox).
  • sideways-right: An alias for sideways (maintained for backward compatibility).
  • use-glyph-orientation: Deprecated and not recommended for use.
  • initial: Sets the property to its default value (mixed).
  • inherit: Inherits the value from its parent element.

All these values only take effect when the `writing-mode` is set to something other than `horizontal-tb`.

`text-orientation` Property Syntax

The syntax is:

text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;

Examples of `text-orientation`

The following examples use different `text-orientation` values in conjunction with the `writing-mode` property to illustrate their effects. Note that browser support for `sideways` might vary.

Example 1: `mixed` and `upright`

This example shows how `mixed` (default) and `upright` affect the orientation of vertically written text (using `writing-mode: vertical-lr;` and `writing-mode: vertical-rl;`).

Example 2: `sideways` (Firefox Only)

This example uses `text-orientation: sideways;` with `writing-mode: vertical-rl;`. Note that this may not render correctly in all browsers; it primarily works in Firefox.