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:

uoıʇɐʇuǝıɹo ʎuɐ uı pɐǝɹ ǝq uɐɔ ı
I can be read in any orientation

ǝɹnʇɔıd ɹnoʎ ƃuıʞɐʇ ǝsınɹɔ ɯoʇ sı sıɥʇ
This is a boring Russian Mig

Demo and Download


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.

7 thoughts on “Totally Unobtrusive (and totally awesome) Upside Down Text

  1. Sweet illustration using Maverick and the Russian Mig. I can already think of hundreds of uses for this javascript, mostly in combination with a random number generator (standards compliant of course) and next April Fools Day.

  2. That’s really interesting. So looking at the script you’re mapping the characters to ‘upsidedown’ equivalents… Pretty slick.
    I like how it gives it that ‘ransom note’ look.

  3. Looks a little off in firefox (upside down replacements look to be of a larger font size). I surrounded each of the special characters with spans with a font size of .83em and it fixed it in Firefox 2.0
    I also had trouble in IE as all special characters were by default rendered as rectangular boxes.
    Either way, really unusual and whimsical use of javascript 🙂

  4. Nice..
    it would be even nicer if we can have only the V flip without having an H flip.. it would look like mirror effect. If topcase letter works fine in V flip ofcourse..
    Best regards
    Lucas

Comments are closed.