One of the striking aspect of Mac OS X 10.7 Lion is the extent to which it borrows from iOS. One amusing aspect of this mobile phone influence, is that the system now supports Emoji characters, which have been standardised within Unicode recently. While Emoji are technically characters, they are small icons, and are rendered both in iOS and in Mac OS X Lion as colour bitmaps. Having a font that is both a bitmap and colour is something I had not seen since the Amiga.

Beside cute animals, the Emoji range also contains some semi-useful icons, including ones that represent clocks faces for the twelve hours (between 0x1F550 and 0x1F55B), so I thought I would hack a small javascript that would display the icon corresponding to the current time. In trying to do this, I uncovered one annoying limitation of javascript: it cannot handle characters that do not fit on 16 bits, if you look at the code points mentioned above, they do not fall within the Basic Multilingual Plane (BMP). If you try to call String.fromCharCode(0x1F550) on Safari, you won’t get an error, just a bogus character in the private area (0xF550).

The workaround for this problem is to understand that javascript does not really work with unicode characters, but with utf-16 elements (regardless of the encoding of the page). You can therefore encode your character using Surrogates. Building the surrogate pair implies some bit manipulations. In the end not much has changed in the last twenty years: access to exotic characters invariably involves hacking around with code-point and escape sequences. On the C64, you had to choose between lower-case and graphical characters…

Here is the resulting code (I factored out the surrogate calculation, mostly to avoid escaping problems with WordPress). If you use web-browser that supports emoji, you should see the actual code in action in the top-right corner of this page, if emoji are not supported, you will probably see an empty square.

var date = new Date();
var hour = (date.getHours() + Math.round(date.getMinutes() / 60) + 11) % 12;
var emo = 0x1F550 + hour;
var h = high_surrogate(emo);
var l = low_surrogate(emo);
clock = String.fromCharCode(h) + String.fromCharCode(l);
document.getElementById("emoclock").textContent = clock;