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 (3 comments) ( 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 (3 comments) ( 27 Jun 2008 )
Interesting, but can you illustrate practical applications for upside-down text?
Emil Stenström (605 comments) ( 27 Jun 2008 )
@Spamboy: There are a couple of real-life examples in the specification, have a look there.
Kalle (9 comments) ( 27 Jun 2008 )
Very. Funny. ;-)
Jens (3 comments) ( 27 Jun 2008 )
It almost work in opera mini ;)
Spamboy (3 comments) ( 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 (3 comments) ( 27 Jun 2008 )
Can I change that with JavaScript too? obj.textGravity=”inverse” seems not to work.
Emil Stenström (605 comments) ( 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 (16 comments) ( 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 (1 comments) ( 27 Jun 2008 )
Nice I never knew this.
Dan Pettersson (10 comments) ( 4 Jul 2008 )
Very funny. *not*
trobrock (2 comments) ( 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 (605 comments) ( 9 Jul 2008 )
@trobrock: Please read the update below the article :)
p??? (1 comments) ( 13 Jul 2008 )
Dah… But does the css work for real? :)
Mark (2 comments) ( 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 (2 comments) ( 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 (4 comments) ( 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 (1 comments) ( 6 Aug 2008 )
ʇı ʇǝƃ ʇ‘upıp ʎoqɯɐds
Spamboy (3 comments) ( 7 Aug 2008 )
And Spamboy still hasn’t had his question answered. :)
Emil Stenström (605 comments) ( 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 (7 comments) ( 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 (2 comments) ( 27 Aug 2008 )
simply the best, another addition in my CSS vocablary
StatesTheObvious (1 comments) ( 28 Oct 2008 )
@Spamboy
To answer your question: It might be useful if you had one of those stupid newsletters with a question-and-answer section. Like, “How many comments on this article were facetious? A: 6; B: 42; C: All of them; D: Turtles.” Then have an answer key later on the page, with the text upside down. Really useful stuff.
dinesh (1 comments) ( 4 Dec 2008 )
I try this code. but its not working in IE6 and Firfox 3.0
Emil Stenström (605 comments) ( 5 Dec 2008 )
@dinesh: You should read the article more carefully, especially the end of it.
??? (3 comments) ( 9 Dec 2008 )
hmm, the most recent comment was this month…
I’d like an upside down “arrow”, IOW, an upside down caret ^
:-/
hmm
↑
↓
Emil Stenström (605 comments) ( 9 Dec 2008 )
@???: What about a v ? :)
Laura (1 comments) ( 20 May 2009 )
If you are on Facebook there is an application: http://apps.facebook.com/flip-my-status/index.php?X=E5
I was messing around on FB applications and this showed up!
It does the job and you don’t have to copy and paste as other thins I found online =)
Tom (7 comments) ( 25 Oct 2009 )
April fools.
Jim (2 comments) ( 30 Nov 2009 )
Haha, good prank. And there’s another Facebook app too, and I’d actually recommend this one: Upside Down Text Facebook
Works like a gem.