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”.



write upside down text

… 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 :)

32 responses to “Upside down text with CSS

  1. 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

  2. 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.

  3. @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 :)

  4. 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

  5. Pingback: PFWD : blog.peterfisher.me.uk : Upside down text in CSS :
  6. 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

  7. 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)

  8. Why on earth would I ever want to do this lol? I want my clients to be able to read their sites.

  9. Oh… that could be very useful point for some designs…
    I’m upset.
    Maybe there are any means for doing this?

  10. @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 :)

  11. @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.

  12. hmm, the most recent comment was this month…
    I’d like an upside down “arrow”, IOW, an upside down caret ^
    :-/
    hmm

  13. 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.

  14. Actually, you can see in the source code that he manually wrote the text on it’s inverse “property” – if it had been for real, he would have written the normal-looking text inside the following instead of the inverse values. :)

    ?x?? u?op ?p?sdn ?????

    How come no one noticed this?

Comments are closed.