The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode. Basically, it rotates either the line by 90° clockwise to help control how vertical languages are displayed — much like the way text-combine-upright rotates groups of characters within a line of text in a vertical script, but for full lines of text.

.element {
  text-orientation: mixed;
  writing-mode: vertical-rl; 
}

For handling bi-directional text — a block that contains both left-to-right and right-to-left text, for example — check out the unicode-bidi property. It’s combined with the direction property to override how the browser decides to display the text.

Syntax

text-orientation: mixed | upright | sideways

Initial: mixed
Applies to: all elements except table row groups, rows, column groups, and columns
Inherited: yes
Percentages: n/a
Computed value: specified value
Animation type: not animatable

Values

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

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

mixed: Default value. Characters in a horizontal script are rotated 90° clockwise. Characters in a vertical script are displayed in their natural vertical orientation.
upright: Characters in a horizontal script are set in their natural horizontal upright position, including some glyphs. So, where a vertical writing mode may rotated a line of text so that characters are sideways, this value will rotate the characters themselves 90° to their natural position. Note that this value forces the direction property into a used value of ltr, meaning all characters are treated as if they are in a left-to-right writing mode.
sideways: All text in a vertical writing mode is displayed sideways, as though it was in a horizontal layout, but the entire line is rotated 90° clockwise.
sideways-right: Some browsers respect this value as an alias for the sideways value kept for backwards-compatibility.

use-glyph-orientation was removed as a keyword value in the December 2015. It was used on SVG elements to define SVG properties glyph-orientation-vertical and glyph-orientation-horizontal which are now deprecated. glyph-orientation-vertical is now an alias for text-orientation.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
48	41	No	79	10.1*

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
123	124	123	10.0-10.2

Demo

Specification

CSS Writing Modes Level 3 (Editor’s draft)

More information

Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility? by Nikhil — A thorough explanation of text-orientation and writing-mode.
Easily Create Sideways Text Using the “writing-mode” CSS Property by Adi Purdila — Explore different approaches in addition to using text-orientation.
2 Ways to Create Vertical Text in CSS by W.S. Toh — A more direct comparison between approaches using writing-mode and text-orientation.
Text Rotation by Chris Coyier — An approach to vertical text using transform instead of writing-mode or text-orientation.