Proposing <bdo> for Hiding Email Addresses

There are so many methods of email address hiding, the most popular being using the MailHide service (which basically CAPTCHA-protects your email address), embedding your email address in an image, and using unescape() and JavaScript to print the email address.

All of these methods work but they all have caveats, and there is no method that can be used that will, in effect, not have caveats. By far the most usable method is the JavaScript method as it allows the user to select the email, but the downside is that JavaScript has to be enabled.

That’s why when I found out about <bdo> I was surprised people weren’t using it more. I hope with this blog post to be able to alert people to this usage, and perhaps, give myself more insight on this practice with your comments and such.

What is <bdo>?

<bdo>, in layman terms, is something you wrap a block of text around to change the direction of text. It only applies for this little area, which makes it incredibly helpful to use.

For example, if I were to reverse the word test backwards, I would use <bdo dir=”rtl”>test</bdo> and the result would display as tset, which is test backwards. Similarly, if you were in a right-to-left language and you needed to type something left-to-right, you would use <bdo dir=”ltr” />.

This practice isn’t used much, and spam bots usually don’t pick up on the use of <bdo>, making it useful for obfuscating information to deter the recognition of them by bots.

What are the uses for <bdo>?

There are many uses for <bdo>. When I learned about <bdo> I gradually incorporated this into my websites (I like to call it my “network”). Right now, I’m using it for:

  • Email addresses. By typing in your email address backwards and wrapping it with <bdo> you can make your email address hidden. The downside is that the email address cannot be highlighted (or rather, it can, but the result will be backwards).
    This is the method I use (at the time of writing) on my contact page for users who do not want to use the contact form. I recommend it only be used for email addresses relatively short or easy to type.
  • CAPTCHA questions. In an effort to simplify the interface to my contact page, I removed the reCAPTCHA and replaced it with a simple math question, “What is five minus two?”, wrapped in <bdo>.
    While this was probably not the most secure method, it works. I frequently change the question, and so far there have been no spam to my inbox that have come through my contact form.

Support for <bdo>

At the time of writing, <bdo> is supported by all major browsers, including Internet Explorer 6 and up, Mozilla Firefox, Safari (after version 2), Chrome, and Opera. It basically stands for Bidirectional Override.

There may be a small chance of an error when the page is formatted right-to-left (say, in an Arabic language). However, simply do not use this code in these cases and you should be all right.