The text-orientation property sets the orientation of characters in a line. It only affects text in vertical mode—when writing-mode is not horizontal-tb.
It is inherited. The initial value is mixed. Use it for vertical scripts and for vertical table headers or labels.
In horizontal-tb, changing text-orientation has no visible effect. Set writing-mode: vertical-rl (or similar) first.
sideways-right is an alias of sideways. use-glyph-orientation is for older SVG glyph-orientation properties—prefer the standard keywords in new CSS.
text-orientation: mixed | upright | sideways | initial | inherit;One keyword only. Pair it with a vertical writing-mode to see the result.
| Value | Description | Try it |
|---|---|---|
mixed | Default. Horizontal scripts rotate 90°; vertical scripts stay natural | Try it |
upright | All characters upright; forces used direction to ltr | Try it |
sideways | Whole line laid out horizontally, then rotated 90° clockwise | Try it |
initial | Resets to mixed | Try it |
inherit | Takes the parent’s orientation | Try it |
text-orientationTurn on vertical writing first, then choose how each glyph should face.
writing-mode: vertical-rl.mixed (default), upright, or sideways.upright for stacked Latin letters in vertical headers.sideways when the whole line should read like rotated horizontal text.| Piece | Required? | Role |
|---|---|---|
Vertical writing-mode | Yes (to see it) | Makes orientation visible |
| Orientation keyword | Yes | mixed, upright, or sideways |
| Text content | Yes | Latin vs CJK characters show different mixed behavior |
direction | Context | upright forces used direction to ltr |
The sample uses writing-mode: vertical-rl. Switch orientation to compare mixed, upright, and sideways.
Each snippet focuses on text-orientation and includes a vertical writing-mode so the effect is visible. Use Try It Yourself for a live editor.
Horizontal-script letters rotate; vertical-script letters stay natural.
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
<p>ABC 縦書き</p>writing-mode: vertical-rl stacks the line.Stack Latin letters upright—common for vertical headers.
<style>
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
<p>HEADER</p>Lay the line out as horizontal text, then rotate it 90° clockwise.
<style>
p {
writing-mode: vertical-rl;
text-orientation: sideways;
}
</style>
<p>Sideways line</p>If nothing seems to rotate, check these first.
With writing-mode: horizontal-tb, orientation changes are not visible.
upright forces LTRThe used value of direction becomes ltr for those characters.
mixedLatin and other horizontal scripts rotate; vertical scripts stay natural. Mixed content shows both behaviors.
Use sideways instead of sideways-right. Avoid use-glyph-orientation outside legacy SVG work.
It applies to most elements, but not table row groups, rows, column groups, or columns.
text-orientation is a browser writing-mode property. Node.js, Deno, and Bun do not apply it.
Interoperable across modern browsers since about September 2020. Internet Explorer does not support this property.
Bottom line: Safe for modern sites. Older engines used a -webkit- prefix; IE has no support.
mixed (default), upright, sideways.writing-mode. Inherited.upright for stacked Latin headers; sideways for a rotated horizontal line.One line: text-orientation decides whether vertical-mode glyphs stand upright, rotate, or follow a sideways line.
Learn how to clip overflowing text with an ellipsis.
8 people found this page helpful