Totally Unobtrusive (and totally awesome) Upside Down Text
There is a huge need for upside down text on the web. With everyone "going mobile," developers cannot simply rely on users having their screens oriented the same way all the time. I went through all of the possible options for creating upside down text and finally came up with a totally unobtrusive, Unicode enabled, completely web-changing piece of code (which is mostly from someone else and using this and this).
Options for Upside Down Text
- Images – The most obvious option for upside down text is to open up Photoshop, enter some text, and use Rotate Canvas.
Pros: easy to do.
Cons: must be done for every piece of text. Not every OS/browser in the world can display images. This is just unacceptable.
- sIFR – I know it’s a little 2005 of me to say it, but a great use of Flash is to replace text and rotate it around.
Pros: works for any HTML text element.
Cons: requires Flash which has even less support than images. Also, requires extra coding.
- Canvas – one day it might be possible to do more with text drawing on a canvas tag, but right now its not
Pros: none, for now.
Cons: doesn’t exist.
Pros: is awesome.
Cons: nothing at all.
Just give your HTML element a class called "upsidedowntext" and add the script in the header and you have pure greatness:
<div>I can be read in any orientation</div> <div class="upsidedowntext">This is Tom Cruise taking your picture</div> <div>This is a boring Russian Mig</div>
Demo and Download