✍️ writing-mode — Controlling Text Flow Direction in CSS

🌐 What is writing-mode?

writing-mode is a CSS property that controls the direction in which text and inline content flow. Instead of always flowing left-to-right horizontally, you can rotate the writing flow to vertical layouts — common in East Asian typography, banners, labels, and dashboards.

>>“writing-mode lets you rotate the flow of text — not the element itself.”

Note

✔ Fully supported in all modern browsers
✔ Works with text, inline elements, tables, and block elements
✔ Essential for vertical layouts and creative UI designs

🎯 Why Use writing-mode?

  • Create vertical navigation menus
  • Design East-Asian vertical text (Chinese, Japanese, Korean)
  • Make badges or labels in dashboards
  • Rotate text without using transforms
  • Control block & inline flow direction independently

📌 Syntax

writing-mode Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

📐 Values Explained

ValueMeaning
horizontal-tb (default)Text flows left → right, lines stack top → bottom
vertical-rlText flows top → bottom, lines stack right → left
vertical-lrText flows top → bottom, lines stack left → right

Note

💡 In vertical writing modes, “line” means vertical line of characters.

🧪 Example 1 — Vertical Text (Right → Left)

vertical-rl Example

.vertical {
  writing-mode: vertical-rl;
  border: 1px solid #ccc;
  padding: 10px;
}

Text flows downward, and each line moves toward the left edge.

🧪 Example 2 — Vertical Text (Left → Right)

vertical-lr Example

.vertical-left {
  writing-mode: vertical-lr;
  border: 1px solid #ccc;
  padding: 10px;
}

Similar to Japanese manga layout — text flows vertically but advances to the right.

🧪 Example 3 — Horizontal (Normal)

horizontal example

.horizontal {
  writing-mode: horizontal-tb;
}

📐 Writing Mode Effects

Writing mode changes how block and inline axes behave:

ModeInline AxisBlock Axis
horizontal-tbLeft → RightTop → Bottom
vertical-rlTop → BottomRight → Left
vertical-lrTop → BottomLeft → Right

Note

🧠 This affects flexbox, grid, margin collapsing, and text alignment behavior.

🎨 Example — Vertical Sidebar Navigation

Vertical Nav

.side-nav {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.2rem;
  background: #111;
  color: white;
  padding: 20px;
  height: 100vh;
}

text-orientation: upright keeps letters upright rather than rotated.

🧠 text-orientation (Important Partner Property)

text-orientation Example

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

Ensures Latin letters remain upright instead of rotated sideways.

📱 Example — Vertical Labels in Dashboard UI

Dashboard Labels

.label {
  writing-mode: vertical-lr;
  text-orientation: upright;
  background: #f4f4f4;
  padding: 10px;
  border-radius: 6px;
}

🧩 writing-mode with Flexbox & Grid

Writing mode changes the meaning of block/inline sizes:

Flexbox Example

.flex {
  display: flex;
  writing-mode: vertical-rl;
  gap: 10px;
}

Now “row” becomes vertical and “column” becomes horizontal!

⚠️ Common Mistakes

  • ❌ Using writing-mode to rotate text when transform: rotate() is better
  • ❌ Forgetting text-orientation when using Latin characters vertically
  • ❌ Expecting writing-mode to work on background-position or non-text items
  • ❌ Misunderstanding block/inline axis changes in flex & grid

Note

💡 Use writing-mode for flow direction, not decorative rotation.

🔥 Summary

writing-mode lets you control the direction of text flow, enabling powerful layout possibilities from vertical headers to complex Asian typography. Combined with text-orientation, it opens new creative options for modern UI and design systems.

>>“writing-mode doesn’t rotate text — it rotates the entire writing flow.”

Learn more →MDN Docs 📘