orientation | Codrops CSS Reference

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.


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


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.

View this demo on the Codrops Playground

Browser Support

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from

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.

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.