Two easy ways of obfuscating your email address with CSS

Writing down you email either using plain text or in an mailto: link will get you every email spider’s attention and soon your inbox will be filled with mails telling you how awesome private parts of celebrities are or how to enlarge your own private parts. Although spam filters should be able to keep your mail boxes clean to some extend, in my opinion it doesn’t hurt to try hindering email spiders getting hold of your email adress in the first place.

What probably first comes to mind is using an image but don’t fire up the gimp just yet, there are more elegant geeky methods to do this, using CSS as seen on techblog.tillate.com

Both methods will keep the emails addresses human readable but prevents spiders, cylons and other bots from getting hold of it, preventing them from sending you mails about blue pills.

Copy pasting the results will show you what the toasters are going to see, have fun.

1. Changing direction of the text

<style type="text/css">
span.codedirection { unicode-bidi:bidi-override; direction: rtl; }
</style>
<p><span class="codedirection">gro.ihsnetonia@liamekaf</span></p>

2. Inserting hidden text

<style type="text/css">
p span.displaynone { display:none; }
</style>
<p>fakemail@<span class="displaynone">null</span>ainotenshi.org</p>

You might also like

6 thoughts on “Two easy ways of obfuscating your email address with CSS

  1. Pingback: ezineaerticles » Blog Archive » Two easy ways of obfuscating your email address with CSS

  2. Imagine this:
    A blind person goes to your website. They use accessibility software, such as a screen reader to read the content, but they have a question. The screen reader lets them find the link to the Contact page. Once there, the screen reader reads your email address to them. Only, it reads it how a computer reads it. It reads it as either “gro.ihsnetonia@liamekaf” or “fakemail@nullainotenshi.org”. They email you, and either get a Mailer Daemon response because neither of those email addresses exist (but they don’t know that, of course) or it goes into the bit bucket and they think you’re rude for ignoring their email.

    Obfuscated emails are not the solution. And for us seeing people, they’re a pain in the rear because copying and pasting on the second one comes out wrong.

  3. I’m not sure how accessibility software, in this case for the blind works and if it is affected by this. The second method is probably going to affect them but again I’m not sure. Yet those problems, it is probably better than using images with you email address.

    You see, I’m stuck between a rock and a hard place here as I’m obliged by law to show my email address in a human-readable way. Maybe some java script will is able to help here, but again I’m not sure as I really have no idea about what accessibility software is capable of.

    I’m open for any suggestions.

  4. If you use an image and put the actual email address in the alt=”" tag on the image, the screenreader should be able to read it just fine. Spammers could probably also still pick it up.

    Honestly, I don’t obfuscate my email address, but I use it everywhere. GMail’s spam filter catches 99% of it. Evolution (using Bogofilter) catches anything that gets through that.

  5. Anyone who copies either of those addresses to paste into their mail program are going to be unhappy at the result.

  6. @beerfan

    Well, that’s kind of the point.

    It remains human readable though, and that’s all I want have to do to comply with the laws here.

    frankly, I wouldn’t show my email if it wasn’t mandatory :D