International number formatting on the web with JavaScript

In the UK numbers are typically shown as follows;

07700 900 123

020 7946 0123

This is known as the "local" or "UK National" format

When dialled from abroad, the leading 0 is replaced with +44 so the 07700 number in the above example would become +44 7700 900 123

Unfortunately, there isn't really an acceptable way of writing this for both audiences.

Numbers for an international audience

Most commonly (and the one form I generally accept) is placing the 0 within a bracket e.g. +44 (0)20 7946 0123 – however even this is met with some objections as brackets were traditionally used for the STD code (i.e. the above number could be written as (020) 7946 0123 indicating to people within the 020 area that they can omit that code)

I've also seen +44 020 7946 0123 which is just entirely wrong, (+44) 020 7946 0123, +44 (020) 7946 0123 and various other combinations which just cause confusion.

Another approach

The ideal answer is simply to show the visitor to your website the number they are most likely to dial

This can be achieved really easily with some simple JavaScript that will work in most cases. Simply wrap the number in a <span> element e.g.;

<span class="telnum">07700 900 123</span>  

Then include the following JavaScript in your web page;

var tz = Date().toString().match(/\(([A-Za-z\s].*)\)/)[1]  
if (tz != 'BST' && tz != 'GMT') {  
   $('.telnum').html('+44 7700 900 123');
}

What this code does is simply looks at the browser timezone – chances are if it's not BST or GMT then they're not in the UK – and overwrites all occurrences of the .telnum class you've defined earlier with the internationally formatted number.

GeoIP?

Of course, GeoIP would be far more accurate but this requires an API call and I'm a great fan of not complicating (or slowing down!) web requests.

Using the timezone is a bit of a hack, but it works well enough in 90% or more of cases I expect.

Other little touches

I'm a stickler for attention to detail, so these things matter to me - like using JavaScript to ensure the correct English form of 'a' or 'an' is used in a form when a drop-down is changed.

The important thing is that none of these little hacks require javascript. If the user has it disabled they'll just see the local format number and have to work it out for themselves.

Printing international numbers

Unfortunately printed media can't change on the whim of a user or based on its geographic location, so I'd vote for using one of the following two formats;

+44 7700 900 123

+44 (0)7700 900 123

The second will annoy some people, the first will confuse some locals. Pick the lesser of two evils; personally if someone is confused by the top one I probably don't want them calling me anyway ;-)

« Back to home