Arkanis Development

Styles

Mail address and text obfuscator

Published

I just wanted to encode my own mail address on a static HTML page to prevent it from being collected by SPAM bots or crawlers. However the tool I used for this vanished together with my old website. I searched for a similar tool in the Internet but after about 10 seconds I had an excuse to make a new one on my own. :3

The HTML obfuscator basically replaces the normal characters with their respective HTML escape code. Markdown also uses this approach and randomly mixes the decimal and hex representation of the character code and PHP Markdown takes it a bit further and adds some scarce unencoded characters to the mix so I used this algorithm.

Just put your text (mail address, Jabber-URI, Skype name, etc.) into the tool and it will output the encoded version. Since the main usage are mail addresses it will also output a mailto: URI as well as a complete mailto: link with the mail address as text.

I also played around with some special Unicode characters to break the long codes lines in a more pleasant way. The soft hyphen (U+00AD) is displayed as a normal hyphen (-) if it's at the end of a line otherwise it's not displayed at all. The zero width space (U+200B)… well, is like a normal space but can not be seen. Basically it's just an offer to the browser to break the line where ever you insert it. However if I would embed such special characters into the code generated by the tool you would copy and paste them along with the code and this would surely confuse some people. Therefore I abandoned this idea (even if it looked quite good) and used the usual overflow: auto scrollbars.

Anyway, I hope some people find this tool useful. If you have questions or some ideas just post a comment or drop me a mail.

2 comments for this post

leave a new one

#1 by
Marc

Thanks, used this for my phone number + email :)

#2 by
Stephan

Thats what it's for. :) Glad it's helpful.

Leave a new comment

Having thoughts on your mind about this stuff here? Want to tell me and the rest of the world your opinion? Write and post it right here. Be sure to check out the format help (focus the large text field) and give the preview button a try.

optional

Format help

Please us the following stuff to spice up your comment.

An empty line starts a new paragraph. ---- print "---- lines start/end code" ---- * List items start with a * or -

Just to keep your skill sharp and my comments clean.

or