text-orientation

Avatar of Jwahir Sundai
Jwahir Sundai on (Updated on )

Learn Development at Frontend Masters

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

ChromeFirefoxIEEdgeSafari
4841No7910.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
92909210.0-10.2

Demo

Specification

More information