E-mail obfuscation method using only CSS

This is an awesome trick for hiding your e-mail address e-mail harvesting bots.

HTML

<span class="fu-spammers">moc.elpmaxe@sirhc</span>

CSS

.fu-spammers {
direction: rtl;
unicode-bidi:bidi-override;

The result: moc.elpmaxe@sirhc

- Edit: I did not say this method was particularly useful, just cool.
+ Edit2: Oh, hang on it would be useful if we make the link clickable with jQuery

$(document).ready(function() {
  $('span.fu-spammers').each(function(){
    var mail = $(this).html();
    $(this).html('<a href="mailto:'+mail.split("").reverse().join("")+'" rel="nofollow">'+mail+'</a>');
  });
});

The result: moc.elpmaxe@sirhc

Ok, so for it to be useful, it's not pure CSS. With the jQuery we have a nice solution which degrades gracefully. So if there's no JS then it's still readable, just not clickable.

All is well except for accessibility but thats another issue.

Please comment with improvements, suggestions.

1 Comments Posted

Very cool and unconventional.

Very cool and unconventional. However, I usually use http://www.spamspan.com for hiding emails on my sites.

It even has a drupal module, http://drupal.org/project/spamspan

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options