The writing-mode CSS property is a handy way to set text vertically.
For left-to-right languages, writing-mode: vertical-lr will usually do the trick.
The box model of an element with writing-mode: vertical-lr feels more intuitive to work with than an element with transform: rotate(90deg).
Most articles or tutorials covering vertical text will tell you to use writing-mode: vertical-lr and send you on your merry way.
And this works great. Until it doesnʼt.
Special characters, emojis, writing-mode, and you 🙃
As somewhat of a special character myself, I decided to add a section sign (§) to some rotated headings in my CV.
But when I did this, the section signs were not rotated with the rest of the text.
I had initially added the section sign as CSS generated content (like so h2:before { content: "§ "; })
so I thought I must have encountered some limitation of using writing-mode and CSS generated content together.
But after moving the section signs into the HTML directly, they remained un-rotated.
I tried rotating a few other special characters and emojis and it just got weirder. In Chrome and Firefox (on Mac), the section sign and any emojis I tried were not rotated. In Safari, the section sign was not rotated and some (but not all) of the emojis I tried did get rotated. I tried a few more special characters. Some were rotated and some were not. Chrome and Firefox were consistent with each other on what did or did not get rotated. Safari did not rotate the pilcrow (¶) character while Chrome and Firefox did.
And then things really went sideways
Welp, that was a strange roller coaster, but at least I could fall back to transform: rotate(90deg).
I asked about it on the ShopTalk Show Discord server,
thinking Iʼd maybe get a reply about ages old browser bug tickets but I got a great tip from
Josh Collinsworth to try the
text-orientation property.
And that was the fix! (thanks Josh!)
Specifically text-orientation: sideways (in addition to writing-mode: vertical-lr)
fixed all special character and emoji rotation isssues in Chrome, Firefox and Safari.
Hereʼs a CodePen exploring vertical text with special characters and emoji with and without text-orientation: sideways.
Compare in different browsers for hours of fun.
tl;dr
If youʼre implementing vertical text with writing-mode,
itʼs probably best to also use text-orientation: sideways so that all special characters and emoji are rotated correctly.