CSS text-orientation Property

What You’ll Learn

The text-orientation property controls how characters rotate in vertical writing modes — using mixed, upright, or sideways values.

Introduction

The text-orientation property in CSS is used to define the orientation of text within a line when dealing with vertical writing modes.

This property is particularly useful for languages like Chinese, Japanese, and Korean, which are often written vertically. It allows for finer control over the display of characters in a vertical context, ensuring they are presented in the most readable and aesthetically pleasing manner.

Definition and Usage

Use text-orientation together with writing-mode: vertical-rl; or writing-mode: vertical-lr; when you need to control whether characters stay upright or rotate sideways inside vertical lines.

📝 Syntax

The syntax for the text-orientation property is straightforward. It can be applied to any element that supports vertical writing modes:

element {
  text-orientation: value;
}

Basic Example

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Syntax Rules

• Pair text-orientation with a vertical writing-mode value.
• Use mixed for the browser default character rotation behavior.
• Use upright when every character should remain upright.
• The property is inherited, so parent values can affect nested vertical text.

Related Properties

• writing-mode — sets horizontal or vertical text flow
• direction — sets inline text direction
• text-combine-upright — combines digits or letters in vertical text

🎯 Default Value

The default value of the text-orientation property is mixed, which means the text will use an upright orientation for characters that are typically written upright and a sideways orientation for characters that are typically written sideways.

💎 Property Values

The text-orientation property accepts keyword values that control character rotation in vertical lines.

When to Use text-orientation

text-orientation helps when vertical text needs precise character presentation:

• Japanese vertical novels — Use upright for traditional upright character display.
• Mixed Latin and CJK text — Use mixed so Latin letters rotate naturally in vertical flow.
• Design labels — Use sideways for rotated Latin text in vertical layouts.
• Multilingual sites — Match orientation rules to each language section.

Examples Gallery

In this example, we’ll apply the text-orientation property to a vertical text container, then explore more orientation patterns.

<style>
  .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    border: 1px solid #000;
    padding: 10px;
    width: 100px;
    height: 200px;
  }
</style>

<h1>Text Orientation Example</h1>
<div class="vertical-text">
  これは縦書きのテキストです。
</div>

.mixed-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 12rem;
}

.sideways-label {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  height: 10rem;
  font-weight: 600;
}

.chapter-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.15em;
  color: #9333ea;
}

♿ Accessibility

• Test readability — Vertical text can be harder to read for some users; use it intentionally.
• Provide alternatives — Offer horizontal reading modes when possible for long content.
• Screen readers — Orientation is visual; content order should still make sense in the DOM.
• Avoid tiny vertical labels — Small rotated text can fail contrast and readability checks.

text-orientation with writing-mode

text-orientation does not create vertical text by itself. Set writing-mode first, then choose how characters rotate inside each vertical line.

.vertical-panel {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

💡 Best Practices