text-orientation

text-orientation controls glyph orientation within vertical writing. It does not make horizontal text vertical by itself.

Compare mixed and upright Latin text

Both paragraphs use vertical-rl. Mixed lays out this horizontal script sideways; upright stacks its characters without rotating them.

<p class="sample mixed">ABC 123</p>
<p class="sample upright">ABC 123</p>

.sample {
  writing-mode: vertical-rl;
  height: 160px;
  padding: 0.75rem;
  border: 1px solid #2563eb;
  display: inline-block;
  vertical-align: top;
}
.mixed {
  text-orientation: mixed;
}
.upright {
  text-orientation: upright;
}

Make a short vertical table header

Upright keeps the short header’s letters upright. The actual th remains a column header; CSS does not supply table semantics.

<table>
  <caption>
    Practice time
  </caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Min</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
th {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Values and defaults

The initial value is mixed and the property is inherited. Mixed preserves natural vertical-script glyphs and rotates horizontal-script characters clockwise. Upright keeps characters naturally upright and forces the used direction to ltr. Sideways lays out text as a horizontal line rotated clockwise. Sideways-right is a compatibility alias, not a distinct counterclockwise option. Older SVG glyph-orientation behavior is separate.

Common mistakes

In horizontal-tb, text-orientation does not switch text into a vertical layout. It is not an arbitrary angle property; use transforms for that different task. Upright Latin text can be harder to read in long passages, while vertical-script languages may need vertical text as primary content. Do not impose a rule that vertical writing must always be decorative.

Learn writing-mode, direction, and th.

Sources and browser support

MDN: text-orientation describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.