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

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.

Related properties

Almanac on Mar 29, 2021

direction

.element { direction: rtl; }

Sara Cope

Almanac on Jul 15, 2021

text-combine-upright

span { text-combine-upright: all; }

Geoff Graham

Almanac on Nov 25, 2021

unicode-bidi

.element { unicode-bidi: embed; }

Chris Coyier

Almanac on Jul 15, 2021

writing-mode

.element { writing-mode: vertical-rl; }

Robin Rendle