UPDATED: Dead links removed. There is a new version of this article, and a new world clock.

Working on a project with people in different parts of the world recently, I found myself thoroughly confused by the problem of timezones. Standard time zone clocks normally just show the local time at a given moment in diiferent cities; I found myself continually carrying out arithmetic to work out questions like:

• When it’s 4pm in New York, what time will it be in Tokyo?
• How many hours of overlap are there between working days in New York and Hong Kong?
• Which cities’ offices are currently open?

I had an idea for a display mechanism and wondered if it could be done using CSS and a bit of PHP.

The result is the hill193 A Better World Clock. It should be self explanatory, but it uses linear ‘analogue’ 24 hour dials to make comparisons of time across zones far easier. In addition, working hours (in this case 9am – 6pm) are highlighted.

All positioning is done using CSS. The PHP code behind the clocks is pretty basic and just works on a fixed offset to the server clock for each region. So there’s certainly no taking summer time adjustments into account for the moment. The HTML and CSS is static but is refreshed every 30 seconds. It’s been tested in Mozilla 1.4, Internet Explorer 6 and Opera 7, although it needs a little refining.

Newer: Real time geography ›