<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>23rd World &#187; JavaScript</title>
	<atom:link href="http://23rdworld.com/category/coding/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://23rdworld.com</link>
	<description>Home of Seattle-based web site designer and blog consultant, Mahalie Pech.</description>
	<lastBuildDate>Fri, 07 Oct 2011 18:43:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Email protection using CSS</title>
		<link>http://23rdworld.com/2009/04/08/email-protection-using-css/</link>
		<comments>http://23rdworld.com/2009/04/08/email-protection-using-css/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 23:18:41 +0000</pubDate>
		<dc:creator>Administrator</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[contact]]></category>
		<category><![CDATA[email]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[spam]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://23rdworld.com/?p=197</guid>
		<description><![CDATA[This post originally appeared on my personal blog in March of 2005. It is till useful a half decade later, so finally posting it here. This code is also available on Snipplr as well. Any spambot worth its salt spawned by evil genius could "guess" email addresses by skimming for all 'alias@'s and automatically concatenate [...]]]></description>
			<content:encoded><![CDATA[<a href="http://23rdworld.com/2009/04/08/email-protection-using-cssemail-protection-using-css/"><img src="http://23rdworld.com/wp-content/uploads/2009/04/spam_protect_emails.jpg" alt="Email Link Protection - a graceful and user-friendly technique" title="spam_protect_emails" width="500" height="128" /></a>
<em>This post originally appeared on my personal blog in March of 2005. It is till useful a half decade later, so finally posting it here. This code is also <a href="http://snipplr.com/view/16077/gracefully-degrading-email-obfuscation/">available on Snipplr</a> as well.</em>
<p>Any spambot <strike>worth its salt</strike> spawned by evil genius could "guess" email addresses by skimming for all 'alias@'s and automatically concatenate them with the site's url base and any other domains found on the page, so in the javascript I separate the '@' from the alias.</p>

<p>Enough about the wheres and whys, here's some cut n' paste fun for your use. This code will use javascript to display a normal, clickable mailto: link on your page and if javascript is turned off you still get a screen-readable, selectable email address displayed using a CSS trick.</p>
<blockquote class="code">
<pre>
&lt;style type="text/css"&gt;
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
linkAddy=('alias' + '@' + 'yourdomain.com')
document.write('&lt;a href="mailto:' + linkAddy + '"&gt;' + linkAddy + '&lt;/a&gt;')
//--&gt;
&lt;/script&gt;

&lt;noscript&gt;
&lt;p&gt;Please email me at
&lt;strong&gt;&lt;span class="backwards"&gt;moc.niamodruoy@saila&lt;/span&gt;
&lt;/strong&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;/noscript&gt;
</pre>
</blockquote>

<p>Here's a version for you really paranoid folks that don't want live links at all (or maybe you just want a tiny user obstacle to ensure necessity of correspondence), but you do want your email address to appear correctly if possible but with better protection, plus insurance if javascript is turned off:</p>

<blockquote class="code"><pre>
&lt;style type="text/css"&gt;
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
&lt;/style&gt;
Please email me at
&lt;span class="backwards"&gt;&lt;script type="text/javascript"&gt;
&lt;!--
backAddy=('moc.niamodruoy' + '@' + 'saila')
document.write(backAddy)
//--&gt;
&lt;/script&gt;&lt;/span&gt;
&lt;noscript&gt;&lt;strong&gt;alias at
yourdomain dot com&lt;/strong&gt;&lt;/noscript&gt;
</pre></blockquote>

<p>Here's a working example:</p>

<p>Please email me at  

<script type="text/javascript">
<!-- 
linkAddy=('ma' + 'il' + '@' + 'mahalie.com')
document.write('<a href="mail' + 'to:' + linkAddy + '">' + linkAddy + '</a>')
 //-->
</script>
<noscript>
   <span style="unicode-bidi:bidi-override; direction: rtl;font-weight:bold;">moc.eilaham@liam</span>.
</noscript></p>

<p>Here's a few other ways to protect email addresses from spam bots. If you have a preferred method not listed here, please let me know in the comments.</p>
<ul>
<li><a href="http://www.alistapart.com/articles/gracefulemailobfuscation">Graceful Email Obfuscation</a> article from A List Apart takes it up a notch, with an htaccess rewrite and redirect. Could be worth setting up for a large site where you need to add email links quickly and easy.</li>
<li><a href="http://hivelogic.com/enkoder/form">Hivelogic Enkoder Form</a> - use their form to generate some javascript. Works great but relies on javascript to work.
</li><li><a href="http://www.addressmunger.com/">Addressmunger.com</a> - uses ASCII, JavaScript, and scrambling of letters in your email address.</li>
<li><a href="http://www.knechtology.com/stop-spam/email_encoder.html">K'nechtology Email Encryption</a> - encodes email addresses in to hexadecimal values. <strong>This isn't very secure</strong> as it would be extremely easy for a bot to decode hex.
</li></ul>]]></content:encoded>
			<wfw:commentRss>http://23rdworld.com/2009/04/08/email-protection-using-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

