1. css
  2. /properties
  3. /text-orientation



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.

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

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

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.


The text-orientation property can accept the following values:

mixed(Default) Rotates horizontal script characters 90° clockwise, while maintaining the natural orientation of vertical scripts.
uprightKeeps characters of both horizontal and vertical scripts in an upright orientation. All characters are treated as left-to-right.
sidewaysDisplays characters as they would appear horizontally, but with the entire line rotated 90° clockwise.
sideways-rightActs as sideways, and is kept for backward compatibility purposes.
use-glyph-orientationUses 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.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

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)

Useful Resources

Can I use: text-orientation

W3C Recommendation - CSS Writing Modes Level 3: text-orientation

W3C Editor's Draft - CSS Writing Modes Level 3: text-orientation

Styling Vertical Text in Specific Asian Languages