Hide your email address from spammers in plain sight

This technique uses CSS for displaying a human readable version of your email address, while hiding your address from spam bots and crawlers.

Step 1. The Markup

	<span class="obv">moc.elpmaxe@<span class="obv">garbage</span>elpmaxe</span>

Wrap your email address in a <span> tag, but spell your email address in reverse. This is what spam bots read when the crawl your website.
Give your wrapper span a class name. I named mine "reverse".
Add another span randomly inside the outer wrapping tag. Type some random characters into this inner span. Give this span a css class name. I called mine "obv" for "obfuscate". This adds an additional layer of obfuscation to your email address.

Step 2. The CSS

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

.obv{
    display:none;
}

Lets' step through the CSS

.reverse class

The "direction" property specifies the text direction. By default, this is set to "ltr" for "left to right". Here are a specifying a value of "rtl" or "right to left".
Unicode allows for a complex process of determining the directional flow of content based on properties of the characters and content. The "unicode-bidi" property tells the browser to use the direction specified by the "direction" property (set above).

.obv class

This simply hides the span tag with the class name "obv". This will hide the gibberish you typed into the span.

That's it!

Your final email address should look like this:

moc.elpmaxe@garbageelpmaxe

There is a drawback to this method. Munging your email address in this way will make it inaccessible to screen readers. It would be a good idea to also provide the disabled a way to contact you.

Now bask in the glow of knowing that spammers will be spamming a gibberish lemon of an email address, while nice people can read your actual address.