Reverse Your Email with CSS and Prevent Spam
SPAM… Literally the most annoying word! When I used to work in IT Support, I would constantly get asked how to stop spam, and my reply would always be that you can’t! There is only so much software you can install / filters you can set going before you realise, the spam eventually reaches you anyway, fact! It’s just part or web life.
This is a cheeky little tip that will help preventing ‘spam bots’ getting hold of your email address. Next time you have to display your Email on your website, use the following code….
CSS:
span.test {
direction: rtl; unicode-bidi:bidi-override;
}
HTML:
<p><span class="test">moc.tset@tset</span></p>
The CSS reverses the direction of the text, so you write your email backwards, the CSS sorts it out so it displays fine on your website, but this way, ‘spam bots’ can’t read your email! woop!
About the author...
Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency Strawberry. Follow him on Twitter (@stugreenham) to find out what he's up to.
Here are some other posts:
Share the post...
We appreciate you helping our site grow by taking a few minutes to spread / share this post below:
Love this tip dude!!
This wouldn’t be worth it to me. Any non-visual user agent would read the email backwards, including search engines, screen readers, etc.
I prefer to stick with the actual email, and using other anti-spam methods where applicable, such as Askimet or “Are you human?” type checking.
Love this script first off. Nice and clean. However, I was wondering if there is a way to mask it inside the code if you wanted to link the email. For example, if I wrapped this in an HREF tag the email address would either remain backwards or be exposed to a bot reading HTML for email addresses, no? It may not be possible to have “moc.tset@tset:otliam” convert into “mailto:test@test.com” and the link work. I tried adding the class to the A tag as well.
As a side note, here is how I have been doing it…it is not CSS and a little old school but just wanted to throw it out there:
<!–
emailE=’domainname.com’
emailE=(‘recipient’ + ‘@’ + emailE)
emailM=’?subject=any subject here’
document.write(‘‘ + emailE + ‘‘)
//–>
Thanks for your time.
Anyway to apply the a href tag without the email being exposed? I tried the a href with the email backwards but it didn’t work, just brought up the email address backwards.
Thanks.
@Eric – I agree, many might not find this useful, but it is quite simple little effect you can do with CSS, I agree that some other methods are perhaps more solid.
@Chris and @Bobby – I haven’t been able to figure out a way to use this method with the hyperlink this as of yet, which is quite annoying as it would make it much more useful! Chris, thanks for sharing the method you use, I will try this out. Let me know if either of you figure out how to include the A tags!
Dude,
Proofread before you post:
1.) “It’s just part or web life. ” > “It’s just part of web life.”
2.) “…that will help preventing ’spam bots’ getting…” > “…that will help prevent ’spam bots’ getting…”
Now edit and go get some sleep.
@Dude – Sorry for delay in replying, I have been away! Thanks for pointing out that I have bad grammar! This is just a blog I do in my spare time so spelling etc isn’t the end of the world if one or too slip through so I won’t lose sleep over it. Thanks for taking the time to tell me tho lol. Also I noticed you didnt leave your website url?