My career in technology

When using the symbol “#” (called “hash mark”, “number sign” or “pound symbol”, depending on your locale) in an e-mail address, you can have some undesireable effects when trying to post the address to a web page. What happens in your e-mail client when you click on this link: Your#1Fan@nowhere.com? If you are using Outlook, everything after “Your” is missing in the To: line. (Other clients may have the same problem, I don’t know.) Here is how I resolved the problem.

We have an E-mail address that was configured to have the hash symbol in it. Configuring it that way was not my decision, I just had to live with the consequences. A mailto link in the href attribute of an <a> (anchor) tag will ignore the # symbol and anything that comes after it, and I needed to figure out how to make it provide the address in the e-mail when a user clicks the link.

Using a little HTML sleight-of-hand, I was able to make the link work properly.

The first thing I tried was using the HTML entity. The HTML entity is:

&#035;

or

&#x23;

but you can see the entity includes a # character inside it. Guess what the mailto link does to that? You would think it ignores the # and everything after, filling in the To: with “Your&”, but it doesn’t. Instead, it interprets the HTML entity as the character itself, so there is no difference between using the character or the HTML entity for it.

I’d show you on this page, but WordPress automatically edits the text anywhere I don’t use the Sourcecode tag, changing the entity to the character (more on this in a moment). On your own you can create an html file with the following code:

<a href="mailto:Your&#035;1Fan@nowhere.com">Test this!</a>

Anyway, there is, however, another way to encode the # character. You can use the hexadecimal number for the character, %23.

<a href="mailto:Your%231Fan@nowhere.com">Test this!</a> 

Test this!

Eureka, it works!

Final note: I had to get really creative to get this to post properly at all. Using the HTML entity outside the Sourcecode tags kept getting automatically re-written by WordPress into the character itself, every time I saved the post. Using the HTML entity, in the the Sourcecode tags, displayed the # character on the post rather than the six characters of the HTML entity.

I tried using the HTML entity for the ampersand character (the ampersand followed by amp;) followed by #35; in the Sourcecode tags, but the post would display it as typed (9 characters)!

&amp;#035;

See?!?!? Aargh!

So I finally figured out how to make WordPress display what I wanted (5 characters of the HTML entity for the # character). Web pages won’t render the hex for the character as the character, so that was out. But guess what – there are two ways to write the HTML entity – ampersand followed by amp; and ampersand followed by #38;.

&#038;

And to get the above to display correctly, I had to replace the ampersand with the numetic HTML entity, like so…

&#038;#038;

And, as I am sure you can guess, that also had to have the entity in front of it, and so on and so on…

Using the numerical HTML entity for ampersand in WordPress’ Sourcecode tags renders the character, using the letters renders as typed. What a pain!

Take home – if HTML renders what you are trying to display oddly, especially when you are trying to render special characters, there are multiple ways to refer to those characters, so keep trying!

I'm an overachiever this week.

For this week, anyway. We'll see what happens going forward.

Advertisements

Comments on: "Quick Fix: Hashing Out an E-mail Address" (3)

  1. Ratheesh Kumar R said:

    For # use %23 in mailto: Code
    For $ use %24 in mailto: Code
    For % use %25 in mailto: Code
    For & use %26 in mailto: Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: