Hide Phone Numbers From Skype Using the HTML Soft Hyphen

I ran into an annoying problem while updating my web site recently. I have Skype installed and running on my Windows desktop. Skype is a great application; I use it all the time, and I recommend it to others. However, while testing my site in Internet Explorer, I noticed something I had never seen before (probably because I never use IE for my personal web browsing): Skype added some unwanted link formatting to the phone number in my site header, as you can see here.

Skype formatting on HTML CSS phone number

This formatting only shows up in IE (yet another reason to dislike that browser). To my eye, it looks rather gaudy, like something you might see in a cheap late-night infomercial. Even worse, the extra width added to the phone number was throwing off the layout of my site header.

Clearly something had to be done. A quick search turned up this thread on the Skype community forums:

http://forum.skype.com/topic/78380-avoid-skype-toolbar-recognizing-numbers/

I was disappointed to learn that this had been reported to the Skype developers as a problem over three years ago, and still nothing has been done about it. Apparently, Skype views this as a “feature” which they are unwilling to disable—their recommended solutions include asking the client to “turn off highlighting from the Skype button on the toolbar when he visits your site” (I’m sure my clients will appreciate that suggestion), and a vendor-specific meta tag which does not validate and does not always work.

Fortunately, I was able to find a simple solution, in the unexpected form of the HTML soft hyphen. The HTML 4 specification has this to say about it:

“The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character.”

The intent of the soft hyphen is to allow content authors to aid the justification of text by specifying how a word may be split across two lines. However, I found that it may also be used to hide a phone number from Skype, simply by inserting the soft hyphen character ( ­ ) between the area code and the exchange:

800-­555-1234

As long as the phone number does not break across two lines, the soft hyphen is not displayed:

800-­555-1234

In exchange for adding one character of non-semantic markup to our page, we get a solution that is quick and easy to implement, easy to remember, passes validation, and works in all browsers including IE6!

I really hope Skype listens to their user base, and turns this “feature” off by default in future releases. Until then, the HTML soft hyphen offers a painless way to get rid of the Skype link on phone numbers.

More From the Blog

Comments

  1. Arie says:

    Brilliant, thanks!

  2. Prity says:

    Thanks a lot. This was really helpful, since am also facing same problem with my client site. Thanks a lot again…

  3. Dana says:

    Thank you, thank you, thank you. Agreed, very annoying!

  4. caro says:

    thanks so much! i ran into this problem a few weeks ago, and it annoyed me to the extreme. now (thanks to your little html trick) its gone and i’m so happy. thank you <3

  5. Randy says:

    Thanks!

  6. Brent says:

    Thank you! This is the only reliable solution that I’ve found so far. Tested on IE7/8/9 and FF 5.

  7. TC says:

    We’ve always used the meta override to remove it.

    We’ve been working around Skype with this extra markup for 3 years now. Skype decision-makers, if you are reading this, shame on you for ignoring the web design community for so long despite overwhelming support for removing this. May you suffer the alienation of the community for years to come. You can’t just go fucking up people’s work like this.

  8. Joe Kirby says:

    A really cool fix!

  9. Lev says:

    Very simple and clean solution!

  10. Anne says:

    Much appreciated! You saved me a lot of time and aggravation.

  11. Pubudu says:

    thanks so much, the solution is best for my EDM (html email).

  12. laura says:

    omg thank you so much, it helped with my a level website development coursework x

  13. Thanks for the tip. Seems like an odd solution, but it works. This has been annoying.

  14. CBloss says:

    One problem I found with the soft hyphen is that iPhones won’t pick it up as a number so they can’t click on it in Safari to call the number. There is a way to use CSS to hide the Skype interface annnnd still make the numbers clickable. :)

    http://stackoverflow.com/questions/3032427/how-to-prevent-phone-numbers-to-be-converted-into-skype-links

Comments are closed.