Totally Unobtrusive (and totally awesome) Upside Down Text

April 11, 2008 | Uncategorized | 8 Comments

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.

8 responses to “Totally Unobtrusive (and totally awesome) Upside Down Text”

  1. AP says:

    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. Evan Mullins says:

    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. Arthur Lawry says:

    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. Ok, that’s a neat little trick, but I thought Javascript did not work in rss feeds?? Looking at your feed, the text is upside down there as well.

  5. ☆.•°❤LiL' MiSs CuLLeN❤°•.☆ says:

    y wont diss work?

  6. Lucas says:

    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

  7. I’ve been wondering how people do that! -Erin

  8. Mihai D says:

    Hello,

    First of all i would like to say that’s a good article and second i dint know till now about the Upside Down Text ..and im doing web design since 4-5 years or so.. Sometines i have the feeling that i know everything but like in this case is not true. Thank you , i’ll follow your articles closelly. Best Regards

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.