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.