Friday, September 07, 2007

Yet more tick mark fun

I've written about this three times now. Read my previous posts here

But it turns out it's not as simple as the browser somebody is using. The other day I noticed that my tick marks weren't displaying on a computer that had IE7 installed. After more fiddling around I realised the fonts installed on that particular PC must be different to the ones installed on other PCs I'd tested and IE7 was unable to find the tick mark. I'm not sure whether IE7 only uses the current font or if it tries other fonts in an attempt to find the correct symbol but in any case it just displayed a square block.

Because of this I'm thinking perhaps the only 100% reliable solution is to either use an image or to display a checkbox in all situations, not just for IE6. In a desperate attempt to avoid either of those solutions, I've started using the 'Arial Unicode MS' font for my document. I guess this is fairly unlikely to work on Macs and Linux boxes, but they aren't particularly high on my list of required supported environments and they will fall back to more conventional fonts anyway, which hopefully work for these computers.

Update: Even the ‘Arial Unicode MS’ font won’t always work, even on Windows. This font is not installed by default on Windows systems, but it does come with Office, which I guess most Windows users will have installed.

1 comment:

Anonymous said...

I'm fairly certain that the vast majority of Penguin distros use Unicode-friendly fonts, and I'd be very surprised if the current Mac OSs aren't in the same boat.

That leaves an extremely tiny minority of Windows PCs that have been upgraded to IE7, but don't have any UC fonts - Windows 2000 machines, perhaps??

How's this, then. For all checkboxes, we print as follows:

<span style="font-family: Arial Unicode MS;">&#10004;</span>

Then, at the bottom of the document (or using an onload event), we add this:

<!--[if lt IE 7]>
<script type="text/javascript">
var s = document.getElementsByTagName ('span');
var n = s.length;

for (var x = 0; x < n; x++)
 if ('\u2714' == s[x].innerHTML)
  s[x].innerHTML = '<strong style="font-family: Wingdings;">&uuml;</strong>';

Obvously classes would be better than style attributes, but this is just to give you the idea.