✍️ CSS writing-mode — Control Text Direction and Flow

The writing-mode property defines the direction in which text and block elements are laid out. It’s essential for supporting vertical writing systems (like Chinese, Japanese, Korean), and for creative layout designs that require text to flow vertically or horizontally in different directions.

---

🔹 What Does writing-mode Do?

• Changes the direction of text flow:
  • Horizontal left-to-right (default in most languages)
  • Horizontal right-to-left
  • Vertical top-to-bottom
  • Vertical bottom-to-top
• Affects layout of block elements and inline content within the element.
• Useful for multilingual support and artistic text layouts.

---

📘 Syntax

selector {
  writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
}

---

✅ Values Explained

Value	Description
horizontal-tb	Default. Text flows horizontally, top to bottom lines.
vertical-rl	Text flows vertically, lines stacked right to left (East Asian vertical text).
vertical-lr	Text flows vertically, lines stacked left to right.
sideways-rl	Text is rotated sideways, flows like vertical-rl but letters rotated.
sideways-lr	Text rotated sideways, flows like vertical-lr but letters rotated.

---

✍️ Examples

1. Default Horizontal Text

p {
  writing-mode: horizontal-tb;
}

✅ Normal left-to-right horizontal text flow.

---

2. Vertical Text (Right to Left)

p {
  writing-mode: vertical-rl;
}

✅ Text flows top to bottom, lines stacked from right to left — common in traditional East Asian scripts.

---

3. Vertical Text (Left to Right)

p {
  writing-mode: vertical-lr;
}

✅ Text flows top to bottom, lines stacked from left to right.

---

4. Sideways Text Example

p {
  writing-mode: sideways-rl;
}

✅ Text rotated sideways, flows vertically but letters turned for easier reading.

---

🖼️ Image Idea: Writing Modes Visualization

Show text blocks with:

• horizontal-tb (default horizontal)
• vertical-rl (vertical with lines right to left)
• vertical-lr (vertical with lines left to right)
• sideways-rl and sideways-lr (rotated text)

---

💡 Use Cases

• Displaying East Asian languages with traditional vertical scripts.
• Creating artistic or unusual text layouts.
• Multilingual websites requiring different text directions.
• Rotating text for UI design elements or labels.

---

✅ Summary

Property	writing-mode
Purpose	Control text flow direction and layout orientation
Default value	horizontal-tb (horizontal left-to-right)
Values	horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr
Use cases	Vertical scripts, multilingual layouts, creative typography

---