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

1. 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.
2. 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.
3. 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.
4. JavaScript – Everyone knows JavaScript can do anything. See my experiments in 3D and color and this guy’s port of Mario. Using this great script its possible to simulate upside down characters using Unicode equivalents.
   Pros: is awesome.
   Cons: nothing at all.

Usage &Implementation

Just give your HTML element a class called "upsidedowntext" and add the script in the header and you have pure greatness:

<script type="text/javascript" src="upsidedown.js"></script>
<div class="upsidedowntext">I can be read in any orientation</div>
<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>

Result:

Demo and Download

• Upside down text in action

Note: this post was intended to be an light-hearted (late) April’s fools poke at all the random stuff developers are doing with JavaScript, sometimes in the name of a standard or idea that really isn’t really needed. Also, I think upside down text is funny.