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: email[at]domain[dot]com.

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 *[at]*[dot]*. 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 unicode-bidi and direction proprieties to display the email correctly. Using this trick, you do not only rely on Javascript (which is a bit limiting), so as a consequence you can achieve a better browser support:

<span style="unicode-bidi:bidi-override; direction: rtl;">

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 &#x200E; 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;">

This solution is standalone and it does not depend on Javascript frameworks or external resources. Remember that if you do not like inline declarations, you can easily move the style and the onclick event somewhere.