Upside down text with CSS

December 4th, 2008

Filed under:  at 02:26pm

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

del.icio.us:Upside down text with CSS digg:Upside down text with CSS spurl:Upside down text with CSS wists:Upside down text with CSS simpy:Upside down text with CSS stumbleupon:Upside down text with CSS blinklist:Upside down text with CSS furl:Upside down text with CSS reddit:Upside down text with CSS fark:Upside down text with CSS blogmarks:Upside down text with CSS Y!:Upside down text with CSS smarking:Upside down text with CSS magnolia:Upside down text with CSS segnalo:Upside down text with CSS gifttagging:Upside down text with CSS

Related Posts


Leave a Comment Name, email and comment are required.
Email will never be displayed.

Leave a Comment
  4. :biggrin: :blank: :blush: :bored: :confused: :cool: :down: :evil: :frown: :grin: :grr: :laidback: :left: :mad: :right: :sad: :secret: :shock: :smile: :stress: :tongue: :up: :wink: :yawn: :cute: :dead: :film: :floppy: :glasses: :grumpy: :headphones: :heart: :lightbulb: :ouch: :tv: :upsidedown: :vodka: :yell: :yuck: :yummy: