CSS text-orientation Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-orientation CSS property controls how individual glyphs are drawn when text is laid out in a direction that is not purely horizontal — most commonly in vertical writing modes. It determines whether characters are rendered upright, rotated to follow the line progression, or presented using their vertical alternates when such alternates exist in the font. The property operates at the glyph level, influencing the visual orientation of letters, numbers, punctuation and other inline characters without changing the line flow itself.

The property is meaningful primarily when the document uses a vertical flow; it works together with the writing direction rules established by writing-mode. For example, some scripts and fonts provide dedicated vertical glyph forms (vertical alternates) for ideographs and punctuation. Depending on the chosen orientation behavior, a renderer may use those vertical alternates, keep Latin letters upright, or rotate glyphs to match the line axis. This can change how punctuation aligns with text runs, how multi-character clusters are perceived, and whether characters that lack vertical forms are visually rotated by the user agent.

In practice this property affects text shaping and spacing: rotated glyphs can change the apparent line height and the position of baselines, and vertical alternates may occupy different metrics than their horizontal counterparts. It can be combined with other typographic features such as text-combine-upright (for stacking characters in a single-em box) and visual transforms like transform on containers — note that the order and semantics differ: the property instructs the text shaping engine how to choose and orient glyphs, whereas transforms modify the already-rendered result. Designers should be mindful of readability for mixed-script content and test how punctuation, numerals and Latin text are presented in vertical contexts, since these choices have direct effects on legibility and typographic correctness in East Asian and other vertical-writing scenarios.

Definition

Initial value: mixed
Applies to: All elements except table row groups, rows, column groups, and columns
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.textOrientation

Interactive Demo

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

writing-mode: vertical-lr;
text-orientation: mixed;

writing-mode: vertical-lr;
text-orientation: upright;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation

Values

mixedIn vertical mode, characters rotate 90° clockwise.
uprightIn vertical mode, characters are placed naturally under each other.
sidewaysCauses characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
sideways-rightAn alias to sideways that is kept for compatibility purposes.
use-glyph-orientationOn SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

Example

HTML

<div class="container">

  <div class="card upright">

    <h3>text-orientation: upright</h3>

    <p>縦書きテキスト Example 123 ABC</p>

  </div>

  <div class="card mixed">

    <h3>text-orientation: mixed</h3>

    <p>縦書きテキスト Example 123 ABC</p>

  </div>

</div>

CSS

/* Layout */
.container {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho Pro", "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, sans-serif;
}

/* Card that demonstrates vertical text */
.card {
  width: 160px;
  height: 240px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fafafa;

  /* Enable vertical writing mode */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;

  /* Keep the main paragraph vertical */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Make the heading readable in horizontal orientation */
.card h3 {
  writing-mode: horizontal-tb;
  margin: 0 0 8px 0;
  font-size: 14px;
  text-align: center;
}

.card p {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

/* Different text-orientation values */
.upright {
  text-orientation: upright;
  -webkit-text-orientation: upright;
}

.mixed {
  text-orientation: mixed;
  -webkit-text-orientation: mixed;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-orientation property. Hover over a browser icon to see the version that first introduced support for this CSS property.