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 <strong>block flow direction</strong> 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 <code>writing-mode</code> 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 <code>text-orientation</code> 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


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. mixed
All text will be typeset upright, with each character in their standard horizontal orientation. upright
All text will be typeset sideways (rotated 90° clockwise), as if in a horizontal layout. sideways


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.

<p>Take this example markup:</p>

<pre><code>&lt;p&gt;Painter and theorist Barnett Newman was one of the most intellectual artists of the New York School. In &lt;span&gt;1933&lt;/span&gt;, 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.&lt;/p&gt;</code></pre>

<img src="" alt="initial" width="300" height="286" class="alignnone size-medium wp-image-31088" />

<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 <code>text-orientation</code> value of the span.</p>

<pre><code>p {

writing-mode: vertical-rl; }

span { text-orientation: upright; }

<img src="" alt="modified" width="300" height="289" class="alignnone size-medium wp-image-31089" />   

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

[caniuse feature="css-text-orientation"]

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.