The CSS text-orientation Property

Overview

The text-orientation property determines the orientation of text characters within a line, working in conjunction with the writing-mode property, which defines the block flow direction (e.g., vertical-rl, vertical-lr). Notably, text-orientation has an impact only when writing-mode is set to a vertical value.

Examples and Usage

In the example below, we'll explore the impact of text-orientation on text characters when using a vertical writing mode. We'll focus on two values, mixed and upright, to demonstrate their effect on English text.

HTML Structure

<h1>text-orientation: mixed;</h1>

<div class="mixed">
  JavaScript is commonly used to add interactivity and dynamic functionality to websites.
</div>

<h1>text-orientation: upright;</h1>

<div class="upright">
  JavaScript is commonly used to add interactivity and dynamic functionality to websites.
</div>

CSS Styling

/* General styling */
div {
  writing-mode: vertical-rl; /* Set vertical writing mode */
  height: 350px;
  width: 250px;
  border: 1px solid grey;
  font-size: 18px;
  font-family: 'Arial', sans-serif;
}

/* Styles for mixed example */
.mixed {
  text-orientation: mixed; /* Default value, allows horizontal and vertical glyphs */
}

/* Styles for upright example */
.upright {
  text-orientation: upright; /* All text characters are oriented upright */
}

/* Styling for headings */
h1 {
  font-size: 20px;
  color: #CD3333;
}

So, both containers display the same text in a vertical writing mode. The first container has text-orientation: mixed, which is the default value and allows both horizontal and vertical glyphs. This means that some characters, like Latin letters, will be oriented horizontally, while others, like punctuation, will be oriented vertically.

The second container has text-orientation: upright, which orients all text characters upright, including Latin letters. In this case, every character will be displayed vertically in a consistent manner.

Specifically, text-orientation is particularly useful for controlling the display of languages with a vertical script, such as Chinese, Japanese, and Korean, as well as for making vertical table headers. In addition, the sideways value can also be used, which orients all text characters sideways, but its effect may not be as noticeable when used with English text.

Combining the property with different writing-mode values can enable a variety of text layouts, accommodating various languages and design requirements.

Lastly, the use-glyph-orientation value is available as well, which defers the orientation of characters to the glyph-orientation-vertical and glyph-orientation-horizontal SVG properties. However, these properties are deprecated and their use is not recommended.

Values

The text-orientation property can accept the following values:

Value	Description
`mixed`	(Default) Rotates horizontal script characters 90° clockwise, while maintaining the natural orientation of vertical scripts.
`upright`	Keeps characters of both horizontal and vertical scripts in an upright orientation. All characters are treated as left-to-right.
`sideways`	Displays characters as they would appear horizontally, but with the entire line rotated 90° clockwise.
`sideways-right`	Acts as `sideways`, and is kept for backward compatibility purposes.
`use-glyph-orientation`	Uses the values of the deprecated SVG properties `glyph-orientation-vertical` and `glyph-orientation-horizontal` to control text orientation in SVG elements.

Associated Properties

direction
text-combine-upright
unicode-bidi
writing-mode

Tips and Tricks

As of now, major browser implementations don't automatically handle right-to-left (RTL) characters in an upright layout. To achieve this, you need to explicitly set the unicode-bidi and direction properties for the specific text.
When designing for internationalization, consider using text-orientation: mixed or upright depending on the language requirements. For instance, in a multilingual layout, you may want to use mixed for English text and upright for vertical script languages.
Using text-orientation: upright for languages with vertical scripts, like Chinese, Japanese, and Korean, can improve readability by keeping characters in their natural orientation.
When using text-orientation: mixed, be aware that the orientation of punctuation marks and other non-text elements might vary between browsers and operating systems.

Browser Compatibility

Older versions of Safari (10.1 - 13.1), require vendor prefixes for proper functioning.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)