writing-mode

So, it turns out doing something like this is super easy:

The Markup

The markup for this is nice and basic, pretty much a parent, with the two children:

<div class="card">
  <div class="card__title">Title here</div>
  <div class="card__body">Lorem ipsum dolor sit amet...</div>
</div>

I just gave the .card a width and display: grid with two columns, I could have used flexbox too (and even float, really).

The real magic comes from writing-mode. This let’s us control left-to-right or right-to-left for dealing with different languages, but it also gave us vertical-lr and vertical-rl for vertical left-to-right and vertical right-to-left. The only problem with this is it’s terrible. The vertical values put the text the wrong way around:

I like the idea, but… ugh.

The whole lr part is for left-to-right, and it’s what happens if the text breaks over multiple lines.

Which… ummm, I don’t know how anyone thought this was a good idea, but okay.

Text-orientation

There is the text-orientation: upright; property as well that’s intersting, all though still considered experimental, though browser support is fine outside of IE and Edge. I’m not a huge fan of the overall effect, but it might be worth exploring a bit more.

It would probably be best to do this in combination with text-transform: uppercase.

Sideways to the rescue

Obviously I’m not the only one to feel like it’s a cool idea, but it isn’t very great, as they have given us two new values for writing-mode : sideways-lr and sideways-rl. These are new though, and don’t have the greatest browser support, but they are what I used to create the very first image from this email.

And if it breaks over multiple lines, it still looks good!

I love how this works, I wish I’d known about it earlier and I’m looking forward for browser support to catch up, because honestly I think this opens up some really interesting possibilities!

If you’d like to play around with my example, you can find the codepen for it right here.