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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

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!