September 2, 2010

Reversing Text with CSS

A couple of days ago, I saw one of the coolest CSS tricks I've seen in a really long time. You know how people usually put their email as "amber DOT feng AT gmail DOT com" or something to that effect in an attempt to foil bots from spamming their email? Instead, you can type your email in backwards in the code (which is what will show up in the DOM and what bots will see) like so:

<span class='reverse'>moc.liamg@gnef.rebma</span>

..and apply CSS styling to reverse the text:

.reverse{
    direction: rtl;
    unicode-bidi: bidi-override;
}

Here's the snippet in action (try copy and pasting it somewhere!):

moc.liamg@gnef.rebma