The text-orientation property specifies the orientation of characters within a line of content. It only applies to vertical typographic modes.
East Asian languages like Chinese or Japanese can be written both horizontally, flowing from top-to-bottom or vertically, flowing from right-to-left. Traditional Mongolian script is written vertically, flowing from left-to-right. Even though the block flow direction is vertical, each individual glyph remains upright by default.
Often, web pages in East Asian languages will have Latin-based characters and numerals mixed in the content as well. Every Unicode character by default has an orientation based on the characteristics of their respective writing systems, and pages with characters from multiple languages will still display in the correct orientations.
Latin-based languages, when displayed vertically with the writing-mode property have their glyphs displayed sideways, allowing the inline text to be read normally, albeit with the page turned 90 degrees clockwise on its side. We can, however, make each character display upright with the text-orientation property.
Official Syntax
-
Syntax:
text-orientation: mixed | upright | sideways
- Initial: mixed
- Applies To: All elements except table row groups, rows, column groups, and columns
- Animatable: No
Values
- mixed
-
This is the initial value. Scripts that are horizontal-only will have their characters typeset sideways (rotated 90° clockwise) while vertical scripts will be typeset upright.
- upright
-
All text will be typeset upright, with each character in their standard horizontal orientation.
- sideways
-
All text will be typeset sideways (rotated 90° clockwise), as if in a horizontal layout.
Examples
The text-orientation property only has an effect on content that has a vertical writing mode. By default, the browser already displays each character in the orientation that is native to their respective writing systems, but there may be instances when we want to change that orientation. For example, making Latin-based characters or numerals upright when lines of content are flowing sideways.
Take this example markup:
<p class="vertical-text">Painter and theorist Barnett Newman was one of the most intellectual artists of the New York School. In <span>1933</span>, he ran for mayor of his city on a write-in ticket with a cultural platform, and he maintained a keen awareness of such modern horrors as Nazism and the atomic bomb.</p> 
By default, the numerals 1933 will display sideways, just like the rest of the characters when writing mode is set to vertical, but we can make them upright by changing the text-orientation value of the span.
.vertical-text {
writing-mode: vertical-rl;
}
.vertical-text span {
text-orientation: upright;
} 
Live Demo
The following example uses a font, Bungee, specially designed for vertical text. There are not many Latin-based fonts that are optimised for vertical display though, so it may be necessary to tweak the spacing between characters with the letter-spacing property. Given such layouts would mostly be for short lines of display text, the effort required to make those adjustments should not be too insurmountable.
Browser Support
CSS text-orientation
The CSS `text-orientation` property specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the `writing-mode` property)
W3C Recommendation
Supported from the following versions:
Desktop
- 48
- 41
- No
- 35
- 14
Mobile / Tablet
- 10
- 131
- No
- 131
- 132
The mixed and upright values have been supported since Chrome 48 and Firefox 41. Support for the sideways value is only supported in Firefox 44.
