CSS Reference Property

text-orientation

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

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>

initial

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;
}

modified

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

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 Candidate Recommendation

Supported from the following versions:

Desktop

  • 48
  • 51
  • No
  • 35
  • 10*

Mobile / Tablet

  • 10
  • 56
  • No
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

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.

Written by

Last updated May 19, 2017 at 11:48 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.