W3cubDocs

/CSS

text-orientation

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;

The text-orientation property is specified as a single keyword from the list below.

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`	4812	7979	41	3515	145.1	4818	41	3514	145	5.01.0	484.4	145
`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