If you are running a website as a publishing and publicity process, you will want people to be able to contact you. Depending on the content you are publishing, and the type of response; a public forum type response may not be appropriate. From this site I may contacted via twitter or email.

However, there are robots that read websites retrieving email addresses, so commercial emails may be bulk distributed, hopefully leading to sales. This article should be unnecessary, the majority of the world has anti-spam legislation. However, if the product is less legal or comes from a less organised part of the world, this works less reliably. Please read the references for a legal perspective.

Tech history.

The above condition has been consistent for at least a decade, web authors have been using the following avoidance strategies :

  1. Munging the email address, in a fashion a human can spot and edit;
  2. Putting the email address as a picture, so software can't read it;
  3. Char encoding, so the source is written differently, but renders as an email address
  4. Creating the text of the mail address via JS, so it doesn't occur in the page source;
  5. Using “contact me” forms, so never publishing your address;

Alternative strategies.

If one considers email addresses to be public information, like store locations and registered offices, then other activities to deal with any email that arrives are required. Useful email services include anti-virus filters, and spam filtering is an extension of this concept. Email matching various heuristics is likely to be automated commercial email, and can be ignored by the mail reader.
There are a variety of tools to do this. Listing them seems outside of scope of this article.

A modest proposal.

Email harvesters work by extracting sections of text that resemble email addresses. The above solutions work by breaking this position. To the best of my knowledge (although I have done no research on this), no one is using CSS to break the pattern matching. I have embedded the CSS in style elements, as the offsets will be specific to each site. The generated HTML should be fairly google friendly, as google breaks up search input into separate words, and treats adjacent text as clustered, which this is.
If we write the following:

Plain text :

Contact me at my.name@emailhost.tld

Re-ordered version (v1) :

Contact me at  <div id=“emailHolder1” class=“emailHolder”><span style=“position:relative; left:100px;">.tld</span>
<span style=“position:relative; left:60px;">@</span> 
<span style=“position:relative; left:0px;">my.name</span> 
<span style=“position:relative; left:70px;"> emailhost</span></div>

Re-ordered version (smarter, v2) :

Contact me at <ol id=“emailHolder2” class=“emailHolder”>
<li style=“left:100px;">.tld</li>
<li style=“left:60px;">@</li> 
<li style=“left:0px; text-align:right;">my.name</li> 
<li style=“left:70px;"> emailhost</li>
<style type=“text/css”>
#emailHolder2 li { display:inline; position:relative; }

One should be able to copy and paste this text, from the webrowser without problem.
This does inhibit the ability to click to send emails, still. Sample code, following overcomes this limitation. A third party could run the page in a system that ran JS and gain access to the email address; but if you consider how much JS there is on many web applications, I don't think they would. This is abit less clumsy, but still too heavy, and requires custom CSS for email address (different number of chars).

<script type=“text/javascript”>
var $t1=$('.emailHolder span');
var $email=$t1[2].text()+$t1[1].text()+$t1[3].text()+$t1[0].text();
 $('#emailHolder2').html('<a href=“mailto:'+$email+'" title=“Send an email to '+$t1[2].text()+'">'+$email+'</a>');

This does have the deficit of being long winded, and needing custom CSS for email address (different number of chars)

As I do not give up, I try again :

Contact me at <span id=“myname”>name</span><span id=“myhost”>&nbsp; &nbsp; &nbsp;</span><span id=“mytld”>.tld</span>
<style type=“text/css”>
#myname {} /* . . . . */
#myhost { content:"@emailhost”; width:150px; }
#mytld  {} /* . . . . */

Some of the spans can probably be removed, the only critical one is the middle one. If you embed the entire email address in the CSS, I suspect the robot will still find it. I really wanted to use this CSS instruction in 2003, but browsers didn't support it very well.

Final solution

When first I thought about this, it seemed a simple idea. Now I have written this, its trying to be clever without much gain. #ToBeUpdated
The best solution that I am aware of is CSS generated content. I am using generated content in other situations, so I am confused abut whys it not working...


  1. http://en.wikipedia.org/wiki/Email_address_harvesting
  2. http://www.private.org.il/harvest.html
  3. http://www.small-business-database-marketing.com/anti-spam-laws.html
  4. http://www.lawdonut.co.uk/law/sales-and-marketing/marketing-and-advertising/your-email-marketing-and-anti-spam-law
  5. http://www.scotchspam.org.uk/law.html
  6. http://www.w3.org/TR/CSS21/generate.html#content
  7. http://caniuse.com/css-gencontent
  8. http://www.labnol.org/internet/hide-email-address-web-pages/28364/#!