Fighting email spam is every day more complex, but there is always the need of including contact information in a website. So, there is an interesting solution both to hide the email from bots and keep it readable (and also clickable) for users.
One common way to hide an email in a HTML document is to write it with a different syntax, so avoiding the @ character.
A popular example is:
However, this type of obfuscation has some negative drawbacks: the first one is that the email cannot be copied as it is. The user must replace the square brackets with the appropriate content before being able to use the email.
The second disadvantage is related to the search engines. Even if you think that spam bots are not able to recognize the email, try to google something like
You will get thousands of “obfuscated” mail addresses. This is due to the fact that Google always ignores @ character, while if you use the above pattern, it shows you even obfuscated emails.
CSS only method
So, one of the most clever methods that I’ve found to obfuscate emails is to write it from right-to-left and use the CSS
<span style="unicode-bidi:bidi-override; direction: rtl;"> moc.niamod@liame </span>
This is a quite good solution: the email is readable, it can easily be copied and it is protected from bots and crawlers. But there is still two problems: the
span is not clickable and if in the same block element there are only numbers they will be displayed wrong, from right to left.
Enhance the CSS method: the RTL syntax
To enhance the obfuscation method, we can wrap the mirrored email with an
anchor element, instead of the
span, so that we can open our mail client and we can add the unicode directionality marker character
‎ to force the browser display surrounding text from left to right:
<a href="#" onclick="this.href='mailto:'+ this.innerHTML.split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;"> moc.niamod@liame </a>‎
style and the
onclick event somewhere.