Create Accessible Vertical Text with CSS Writing Modes

Today, we'll create this beautiful component where text is written in a vertical direction next to a card - super easy without any layout issues. It's perfect for adding a unique touch to your designs!

---

This issue is sponsored by Tailscan

Tailscan is a browser devtool for Tailwind CSS. It helps you build, design, and debug your Tailwind website visually in the browser. Tailscan offers autocompletion, config support, class validation, and visual guidelines. It also allows you to scan other Tailwind websites. With Tailscan, you'll instantly improve your development experience.

---

Now let's jump right in. 🌊

🎨 Vertical Text Next to a Card

Here's an example of a card layout with a title text for the card content

HTML

<div class="container">
  <h2 class="vertical-text">Amazing Facts</h2>
  <div class="card">
     <h3>The Ocean Depths</h3>
     <p>Did you know that the deepest part of the ocean is called the Challenger Deep? It's located in the Mariana Trench and reaches a depth of 36,070 feet (10,994 meters)!</p>
  </div>
</div>

The normal flow for this looks plain and boring.

Now to make this text appear next to the card, let’s first make the container a flexbox container.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Next, to get a vertical text, use the CSS property writing-mode and set the value to sideways-lr

writing-mode: sideways-lr;

And now you get a beautiful looking card!

In our example, we used the sideways-lr value for the writing-mode property. This makes the content flow vertically from bottom to top. It’s a great way to create visually striking layouts that immediately grab the reader's attention.

Remember, you can also use other values for writing-mode, like vertical-lr, vertical-rl and sideways-lr, depending on your design needs.

🤔 Why “writing mode” and not “rotate”?

If you were wondering how this approach is better than using rotate, I have two points for you:

👉 When you use writing-mode, the browser handles the layout, making it easier to create multi-directional text while maintaining the correct flow and spacing. With rotate, you may have to manually adjust the positioning and spacing to achieve the desired layout.

👉 Using writing-mode ensures better accessibility since screen readers can correctly interpret the text flow and direction.

Hope you learnt something new today :)

---

📘 I’m writing a new book!

If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Opened pre-orders in February and more than a hundred people have grabbed it already 🤯 Check it out!

📨 Newsletter suggestion

I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇

Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.