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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

  • By
    Highlighter: A MooTools Search &#038; Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

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!