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 :)
Devon Young ( 27 Jun 2008 )
How come I never knew about this? I’ve looked through the spec and found some gems, but this… this is like… awesome! I’m shocked it doesn’t even seem familiar to me. Thanks
Spamboy ( 27 Jun 2008 )
Interesting, but can you illustrate practical applications for upside-down text?
Emil Stenström ( 27 Jun 2008 )
@Spamboy: There are a couple of real-life examples in the specification, have a look there.
Kalle ( 27 Jun 2008 )
Very. Funny. ;-)
Jens ( 27 Jun 2008 )
It almost work in opera mini ;)
Spamboy ( 27 Jun 2008 )
Your link to the specification doesn’t go to a W3C page — instead it goes to a third-party’s fun-with-upside-down-text page, which doesn’t answer my question about real examples.
Jeena Paradies ( 27 Jun 2008 )
Can I change that with JavaScript too? obj.textGravity=”inverse” seems not to work.
Emil Stenström ( 27 Jun 2008 )
@Spamboy: Is that so? Why on earth would I link to a fun page on an issue this serious? A real-world example would be a reflection of some text that has to be user-defined. Could make for a dynamic Web 2.0 logo :)
Rasmus Kaj ( 27 Jun 2008 )
LOL.
Actually, beeing able to rotate text 90° (or an arbitrary value) would be really usefull …
For some text, you don’t even need fancy unicode-compatible browsers …
umop apisdn ’sdoo
pfwd ( 27 Jun 2008 )
Nice I never knew this.
Dan Pettersson ( 4 Jul 2008 )
Very funny. *not*
trobrock ( 9 Jul 2008 )
It this attribute just not well documented? I have never heard about this attribute, it could be useful in making simple wordArt sort of things on pages
Emil Stenström ( 9 Jul 2008 )
@trobrock: Please read the update below the article :)
pǝɥʇ ( 13 Jul 2008 )
Dah… But does the css work for real? :)
Mark ( 15 Jul 2008 )
If its undocumented, its probably because it doesn’t garentee to work on all PCs. Like mine. I get a few upside down characters, but most are replaced with boxes (i.e. missing characters)
David McNorton ( 20 Jul 2008 )
Why on earth would I ever want to do this lol? I want my clients to be able to read their sites.
Tim ( 24 Jul 2008 )
Oh… that could be very useful point for some designs…
I’m upset.
Maybe there are any means for doing this?
ʇı ʇǝƃ ʇ‘upıp ʎoqɯɐds ( 6 Aug 2008 )
ʇı ʇǝƃ ʇ‘upıp ʎoqɯɐds
Spamboy ( 7 Aug 2008 )
And Spamboy still hasn’t had his question answered. :)
Emil Stenström ( 7 Aug 2008 )
@Spamboy: Yes you did, just making fun :) I think most use cases would be purely decorational. Or perhaps if you are going to print something that folds? I’m sure you can come up with better ideas youself :)
Tom ( 15 Aug 2008 )
Just today was a new Drupal module released to achieve this exact same thing (http://drupalmodules.com/module/upside-down). My question is the same as everyone else’s it seems - Why the hell would I want to do that?!
Shafaat Awan ( 27 Aug 2008 )
simply the best, another addition in my CSS vocablary