Mobile Friendly Website

CSSPLAY

Doing it with style

Email COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Brad Bice:-
Good technique. Is there a way to still link to working e-mail addresses using mailto: while hiding the address like this? The only drawback to using this is that while an address can be displayed backwards, if I want to link to it I still have to use the actual address in the href="mailto:" portion of the anchor.
(27.02.2004, 14:57)

Daniel Kirwilliam:-
is there some way you could make javascript open a new window with using the correct 'mailto:' address .. all it needs is a function in javascript to reverse the name as well.
(16.04.2004, 11:22)

Stu:-
It is always possible to do this with javascript, but that is not what this site is about. On another site of mine I use the following 'mailto:redclifferedmag.co.uk.9' and use javascript to put the @ sign 9 characters from the left after mailto:
(16.04.2004, 13:55)

porneL:-
Not much improvement over image to me. Opera does not reverse address copied to clipboard. :( !yeb
(07.10.2004, 22:41)

Peutch:-
Hi everyone,
This is indeed a very good technique. However it can be disturbing for browsers that don't support CSS. My solution is to create a standard email link with the class="antispam" corresponding to the usual {unicode-bidi:bidi-override ; direction :rtl;} .
Within that very link, I insert a span class="nocss" set to {display:none;} so that it only appears to unsupported-CSS browsers. Within that span, I write a small explanation as to why the email looks weird. That partially solves the accessibility concern.
As to the e-mail address, I use a "antispam_address@server.extension" and prefill the message body with a sentence like : don't forget to remove the "antispam_" part of the address. Example can be seen at http://www.pdimension.net/photos20-29/photos27/ (sorry for spam !)
I would have another solution to the spam problem : using the <bdo> tag with "dir" attribute set to "rtl". That would achieve exactly the same effect as CSS. However, I do not know if spambots are smart enough to reverse the mail when it is enclosed in a <bdo> tag. In other words, I simply don't know if it's efficient !
(30.10.2004, 17:31)

Rick:-
? Need help in finding unsigned email. Your suggestions (if any) would be a godsend.
(21.12.2004, 20:06)

Jose Miguel Pasini:-
This is a great idea, but if I copy/paste into any text editor I get the inverted version (using firefox on linux).
(18.02.2005, 05:23)

Pif:-
You can do the same with this tag: <bdo dir="rtl">backwards!</bdo> a you don't need enabled css.
(26.02.2005, 18:43)

Stu:-
Quite right, but this is a css playground. Also the <bdo> tag will not validate when placed in some tags (<a> tag for instance).
(26.02.2005, 20:47)

Pif:-
Thx, I don't know this.
(27.02.2005, 09:29)

Charles:-
I'm guessing this isn't working in Safari 1.2.4. I got the novel scrambling:
"Why not email me at oc.u7s@uts.ku"
(01.03.2005, 02:16)

Stu:-
Charles, I guess you are right.
(01.03.2005, 09:52)

Dan:-
I ran this page on browsercam, and it only works on a few browsers. Lots have the ".ku" variation mentioned above. Oh well. It was a cool idea!
(02.03.2005, 19:22)

Jon:-
Works fine in Opera for me (build 7483)
(03.03.2005, 18:50)

Stu:-
Jon, it didn't work in Opera when I first put this on the site. Since then Opera has been updated several times and it now works. Hopefully Mac browsers will catch up soon.
(03.03.2005, 19:36)

Mathias Bynens:-
After you came up with this ultra-cool email address obfuscation method through CSS, I quickly wrote the obfuscate_email() PHP function. And now, I uploaded my very own email obfuscator that converts the email into ASCII and optionally reverses it through CSS. It can output (X)HTML links and/or just the encoded email address.

http://mathibus.com/tools/obfuscator/
(23.04.2005, 09:15)

Howard:-
Your technique for hiding e-mail addresses DOES work in the current version of Opera (8.01).
(26.06.2005, 02:18)

Stu:-
Howard, that's why I now say 'didn't' work in Opera ;o)
(26.06.2005, 08:38)

Jimmy:-
http://www.w3schools.com/tags/tag_bdo.asp

It's XHTML compliant...
(05.09.2005, 16:32)

Mardeg:-
Another pure CSS method - http://mardeg.sitesled.com
This generates a logo of the email using random text, then miniaturises it to resemble normal text. Note that Opera only displays the minilogo correctly when Tools -> Preferences, Advanced tab has Minimum Font size (pixels) set to 1
(25.10.2005, 09:51)

oki:-
in opera 8.5 its working.
an other solution can be to work with css
":after" .de:after { content:".de" }
<span class="de">test@domain</span>

but this is not working in ie
im not sure about safari
(26.01.2006, 14:05)

Anonym:-
Why not use something like:
<span class="email">XXXXX</span>

And then, in the CSS :
span.email:after {
/*\40 = @ in CSS*/
content: "\40.XXXXX";
}

However, as metioned, it doesn't work in IE. But what if we would use a conditional comment for IE and use this method for IE?
(30.04.2006, 20:58)

robin:-
I referenced this technique in the article Obscuring Your Email From Spammers, found here:
diagrammes-modernes.blogspot.com

Thank you for your useful site.
(23.05.2006, 01:03)

Boris:-
Because it isn't a link, I copy it to my clipboard. When I paste in in my Gmail, I get:
ku.oc.u7s@uts

So, it's still not really usefull, just funny:-)

Boris
(01.10.2006, 13:20)

Gary:-
For info this demonstration DOES work in Safari for Windows. And Opera, as previously stated.
(17.04.2008, 09:51)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page