MooTools Text Flipping

By  on  

There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them.

One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul Irish that accomplished this task so I decided to provide it in a MooTools format.

The MooTools JavaScript

/* when the dom's ready */
window.addEvent('domready',function() {
	
	/* implement flipText for Strings */
	String.implement({
		flipText: function() {
			/* define the characters */
			var charset = {a:"\u0250",b:"q",c:"\u0254",d:"p",e:"\u01DD",f:"\u025F",g:"\u0183",h:"\u0265",i:"\u0131",j:"\u027E",k:"\u029E",l:"l",m:"\u026F",n:"u",o:"o",p:"d",q:"b",r:"\u0279",s:"s",t:"\u0287",u:"n",v:"\u028C",w:"\u028D",y:"\u028E",z:"z",1:"\u21C2",2:"\u1105",3:"\u1110",4:"\u3123",5:"\u078E"   /* or u03DB */ ,6:"9",7:"\u3125",8:"8",9:"6",0:"0",".":"\u02D9",",":"'","'":",",'"':",,","´":",","`":",",";":"\u061B","!":"\u00A1","\u00A1":"!","?":"\u00BF","\u00BF":"?","[":"]","]":"[","(":")",")":"(","{":"}","}":"{","<":">",">":"<",_:"\u203E","\r":"\n"},
				result = '', 
				text = this.toLowerCase(), 
				len = text.length - 1;

			for(var x = len; x >= 0; --x) {
				var r = charset[c];
				result += r != undefined ? r : text.charAt(x);
			}
			return result;
		}
	});
	
	/* implement flipText for Elements */
	Element.implement({
		flipText: function(recurse) {
			/* get all of the children for this */
			var elements = [this, this.getChildren()].flatten();
			/* make it happen! */
			elements.each(function(el) {
				var children = el.getChildren();
				if(!children.length) {
					/* set the text of the element to this */
					el.set('text',el.get('text').flipText());
				} else if(recurse) {
					children.flipText();
				}
			});
		}
	});
	
	/* usage */
	$('button').addEvent('click',function() {
		$('flip-me').flipText(true);
	});
});

I provided functionality to accomplish this goal for both Strings and Elements. You'll also notice a recurse parameter that allows you to set whether or not you'd like to get child elements recursively.

Have fun...but not too much fun!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

Discussion

  1. Wes

    Cool deal…I wish this was out before April fools day.

    I did notice in the demo that p’s and b’s don’t flip. Check out the flipped header of Flip me baby!.

  2. @Wes: What browser/OS?

  3. Great but clicking it again does not become old?

  4. @taylan: Once you flip, you never go back.

  5. charlie

    Curious but, I think, useless, at least for me, hehe. What about turning text vertically? That could be more interesting.

  6. Interesting. Strange. And well coded.

  7. hmm, how about make a back into it? would be easy or? 2. charset thats revert the 1. and for exapmple if fliped adding class: “flipped” end check if the class is on the element? =)

  8. @alelo: Yep, I think turning it back and forth would be easy. I’d probably keep a “state” variable which would hold the state of the flip and then revert to the other state when clicked.

  9. rakesh juyal

    ‘Wes’ is right. p and b are not flipped. BTW m using FF3

  10. Weird — this is working correctly in every browser I try…

  11. ɟlıp ɯǝ, bɐbʎ! :)

  12. Nice! But what it’s for besides fun?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!