Upside down text with CSS

It’s actually possible to print text upside down using a simple CSS property and works cross-browser today. The property to use is “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 :) Here’s another site that does the same thing.

About these ads

2 thoughts on “Upside down text with CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s