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
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

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!