Markdown content adding extra spaces in <code>

gistfile1.md

A quick search for "javascript email address obfuscation" yielded a stackoverflow answer to URL encode it, along with comments about how that doesn't work. The next result in Google was an Email Address Obfuscator, which in my experience caused issues on mobile devices.

Another idea which is pretty common, is to use myemailaddress at example dot com. I don't like it because robots are smarter than that.

The next best thing is an image. Just type the email address into your favorite image processing program and voilà, you have an image to use instead of your email address. Then you have to deal with :hover effects of links. In my case, a color change as well as a slight background change. No sweat, put both versions in the image, and use the CSS :hover property to move the image up.

Now, what do you put into the actual link? Either you can put href="#", but sometimes clicking it brings the user to the top of the page, which may not be what you want. So you need to put something in there. What?

I put this:

<a href="mailto:404-Not-Found@example.com?subject=Hi!&amp;amp;body=Either type the email address or use the form. Thanks!"></a>

Opening this link shows the following:

Great! So far so good. The last piece is the text in the link. I used "404 Not Found".

One potential issue I realized is that on mobile devices, when users click the email link, they think it'll open up their email app using my real email address. It'll be a pain to go back to the browser, memorize the email address, go back to the mail app and type it in. The solution: hide the link on mobile devices (they can use the form).

Full source code:

HTML

<a href="mailto:404-Not-Found@example.com?subject=Hi!&amp;body=Either type the email address or use the form. Thanks!" id="contact_email">
<span>404 Not Found</span>
</a>

CSS

@media (max-width: 992px) {
	#contact_email{ display: none; }
}
#contact_email span{
	background-image: url("email.png");
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	text-indent: -10000px;
	width: 100%;
}
#contact_email:hover span{
	background-position: 0 -20px;
}