Upside Down Text With CSS

Previously I’ve talked about reversing text with CSS by simply setting a few CSS attributes. Today we will try another trick: turning text upside down.

It’s actually possible using a simple CSS property and works cross-browser today. The property to use it “text-gravity” with a value of “inverse”.

<span style="text-gravity: inverse">
write upside down text
</span>

… and this is the result:

ʇxǝʇ uʍop ǝpısdn ǝʇıɹʍ

I’m really surprised to learn that so few people know about this property, and I recommend you to continue reading the W3C specification of text-gravity.

Update: Sorry, I lied :) The above is done with a UTF-8 character generator (see the link the the “specification” above). Amazingly, you can find that most characters have their upside down equivalent somewhere else in the huge Unicode alphabet. Neat trick :)

Emil Stenström is an interface developer and internet strategist working as a consultant for Valtech in Sweden. As an interface developer he blogs about HTML, CSS and Javascript, and how to make browsers do what you want. As an internet strategist he blogs about how to make best use of the web, using all the new technologies optimally. Emil is a DZone MVB and is not an employee of DZone and has posted 4 posts at DZone.