css writing modes

CSS Writing Modes — Vertical & RTL Layouts

by

Did you know you can flip text direction and build vertical layouts with pure CSS? The writing-mode property is a powerful tool for creating multilingual sites, print-like layouts, and creative vertical sections. Whether you’re designing for East Asian languages, RTL scripts like Arabic, or just want an eye-catching headline, mastering writing modes unlocks new design possibilities. In this MiniCoursey quick guide, you’ll learn how writing-mode works, common values, and how to combine it with logical properties for flexible global layouts.

What is CSS Writing Mode?

The writing-mode property sets the direction and flow of text blocks. Instead of the default horizontal top-to-bottom flow, you can switch to vertical or right-to-left layouts in a snap.

Popular Writing Modes

  • horizontal-tb — Default: horizontal, top to bottom.
  • vertical-rl — Vertical, lines flow top to bottom and text flows right to left.
  • vertical-lr — Vertical, lines flow top to bottom and text flows left to right.

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

Use this to rotate side labels, banners, or sections of vertical text in East Asian languages.

Combine with Logical Properties

Writing modes work perfectly with logical properties like margin-inline and padding-block. Together, they make layouts flexible for different scripts and cultures.

💡 Pro Tip: Use text-orientation to control whether characters stay upright or rotate with the flow.

⚠️ Common Mistake: Test carefully — vertical writing can reveal unexpected overflow or alignment issues.

FAQ

Q: Can I use writing modes for headlines only?
A: Absolutely! Many designers use it for creative titles or decorative elements — not just full pages.

Q: Is it well supported?
A: Yes — modern browsers handle writing modes reliably, but always test RTL or vertical layouts across devices.

Related Link

👉 Check out previous: CSS Logical Properties — Better Directional Control

Where to Learn More

Explore MDN’s writing-mode docs for all values and clever use cases. Try building a vertical sidebar or a multilingual header!

Conclusion

Congrats — you now know how to use CSS Writing Modes for advanced text direction and layout control. Perfect for global, accessible design.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment