`text-orientation` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since September 2020.

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Try it

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
  </div>
</section>

Syntax

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

Values

This property is specified as one of the following keyword values:

mixed: Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.
upright: Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr.
sideways: Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
sideways-right: An alias to sideways that is kept for compatibility purposes.
use-glyph-orientation: On SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

Formal definition

Initial value	mixed
Applies to	all elements, except table row groups, rows, column groups, and columns
Inherited	yes
Computed value	as specified
Animation type	Not animatable

Formal syntax

text-orientation = 
  mixed |
  upright |
  sideways

Examples

HTML

<p>Lorem ipsum dolet semper quisquam.</p>

CSS

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

Result

Specifications

Specification
CSS Writing Modes Level 4 # text-orientation

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`text-orientation`	48 12	79 79	41	35 15	14 5.1	48 18	41	35 14	14 5	5.0 1.0	48 4.4	14 5
`mixed`	48	79	41	35	≤13.1	48	41	35	≤13.4	5.0	48	≤13.4
`sideways`	12 ≤83	79 ≤83	44 ≤72	15 ≤69	7	18 ≤83	44 ≤79	14 ≤59	7	1.0 ≤13.0	4.4 ≤83	7
`upright`	12	79	41	15	≤13.1	18	41	14	≤13.4	1.0	4.4	≤13.4