Manuales 
text-orientation 1362a
The text-orientation property specifies the orientation of characters within a line of content. It only applies to vertical typographic modes. 6l6n22
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 4j1l4a
- Syntax:
text-orientation: mixed | upright | sideways
- Initial: mixed
- Applies To: All elements except table row groups, rows, column groups, and columns
- Animatable: No
Values 4w6m73
- 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 3y6d6i
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 176n59
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 s162l
CSS text-orientation 6o2r1k
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 Candidate Recommendation
ed from the following versions:
Desktop 1i5h4c
- 48
- 51
- No
- 35
- 10*
Mobile / Tablet 1u2r2g
- 10
- 66
- No
- 66
- 60
The mixed and upright values have been ed since Chrome 48 and Firefox 41. for the sideways value is only ed in Firefox 44.