funny · geeky

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.

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