🧭 text-orientation — Controlling Character Orientation in Vertical Writing

🌐 What is text-orientation?

The text-orientation property defines how individual characters are displayed in a vertical writing mode. It determines whether characters stay upright, rotate, or follow natural script rules when used along with writing-mode: vertical-rl | vertical-lr.

>>“text-orientation controls how characters behave when text flows vertically.”

Note

✔ Works only when writing-mode is set to vertical
✔ Essential for Japanese, Chinese, and Korean vertical layouts
✔ Important for UI labels, vertical sidebars, and posters

🎯 Why Use text-orientation?

  • Keep Latin characters upright in vertical writing
  • Rotate or not rotate punctuation and numbers
  • Create Japanese-style vertical editorial layouts
  • Improve readability in vertical navigation menus

📌 Syntax

text-orientation Syntax

text-orientation: mixed | upright | sideways | sideways-right;

Works only when writing-mode is vertical.

📐 Values Explained

ValueDescription
mixed (default)Upright CJK characters; Latin letters rotate 90°
uprightEvery character stays upright (best for UI labels)
sidewaysCharacters rotate sideways as horizontal text
sideways-rightLegacy value → same as sideways in most browsers

Note

💡 Most modern UI designs use upright to keep Latin characters readable.

🧪 Example 1 — Default (mixed)

mixed example

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

Latin characters rotate; CJK characters remain upright.

🧪 Example 2 — Keep All Characters Upright

upright example

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

Perfect for vertical navigation menus or branding.

🧪 Example 3 — Sideways Text

sideways example

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

Characters rotate as a group, preserving horizontal readability.

🎨 Example — Vertical Sidebar Navigation

Vertical Nav

.sidebar {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.2rem;
  padding: 20px;
  background: #222;
  color: #fff;
  height: 100vh;
}

Keeps menu items readable without rotation.

🧩 Behavior with CJK (Chinese/Japanese/Korean)

For CJK characters:

  • mixed → keeps CJK upright (industry standard)
  • upright → same behavior
  • sideways → rotates characters

Note

🧠 Latin characters behave differently from CJK — mixed is culturally correct for Chinese/Japanese typography.

📱 Example — Vertical Book Title

Book Spine Layout

.book-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Georgia';
  font-size: 1.8rem;
}

Great for vertical book spines or editorial titles.

🧠 Interaction with writing-mode

writing-mode changes text flow, text-orientation changes character rotation.

Combined Example

.label {
  writing-mode: vertical-lr;
  text-orientation: upright;
}
PropertyControls
writing-modeFlow direction
text-orientationCharacter orientation

⚠️ Common Mistakes

  • ❌ Expecting text-orientation to work without vertical writing-mode
  • ❌ Using sideways when upright is needed for readability
  • ❌ Applying to background text (only works on actual text)
  • ❌ Forgetting that punctuation may rotate differently depending on script

Note

💡 For best UI readability → use text-orientation: upright.

🔥 Summary

text-orientation lets you control how characters display in vertical writing modes — essential for international typography and creative UI designs. Whether you’re designing vertical navigation, artistic layouts, or supporting CJK languages, text-orientation gives you powerful control over readability and style.

>>“If writing-mode changes text flow, text-orientation changes how letters stand.”

Learn more →MDN Docs 📘