John Smith's Blog

TypeKit have recently posted a piece about font rendering in various browsers/operating systems that has inspired me to investigate something I'd noticed recently.

This blog uses Droid Sans for the headings. On Linux and OS X, this looks fine, as does Windows XP. On my Windows 7 machine however, it looks pretty horrible - the tops and bottoms of Cs are particularly bad, really jagged.

To work out why, I did rendered some test HTML using a couple of different fonts on several browsers. Here's an example, showing (from left to right)

1. Firefox 4 beta on Linux (Fedora 11)
2. Safari on OSX
3. IE9 on Windows 7
4. Firefox 3.6.11 on Windows 7
5. Firefox 3.6.11 on a MacBook running Windows XP via Boot Camp

The four lines of text are. in turn:

1. Helvetica/Arial/sans-serif lower case
2. Helvetica/Arial/sans-serif upper case
3. Droid Sans lower case
4. Droid Sans upper case

(There's no difference between IE9 beta and Firefox 3.6.11 on Windows 7 in the image above, that I can see, but apparently they should be using different rendering technologies.)

The root cause turns out to be the different font rendering technologies used in various versions of Windows:

• XP defaults to "Standard", which is regular anti-aliasing, with options for ClearType (sub-pixel rendering) or no aliasing at all (the latter being really horrible to look at.)
• Win7 gives a choice of ClearType being on or off. Turning it off seems to be the same as "Standard" in XP, although I'm not 100% certain on that

Arial looks better in Win7 with ClearType on, as does the Windows "system" font, so I wonder whether there's an issue with hinting, and/or font designers tweaking fonts to best cater for the underlying font technology?

On other thing that might be worth mentioning, if you're playing with the font rendering in Windows, various browsers react differently when you change the settings:

I primarily use Red Hat/Fedora distributions of Linux; more than anything this is for historical/comfort reasons. Whilst omissions like AVI and MP3 playback are annoying - but perfectly understandable to my mind - at least I "know where the bodies are buried", and can get a new system quickly set up the way I want.

However, to avoid missing out, I usually have one of my spare machines running one of the other current major distros. In years gone by, that would have been Mandrake/Mandriva or SuSE, but these days, of course, it's Ubuntu that has the hype and the mindshare.

Looking to install Ubuntu's new 10.10 release onto a netbook, I searched for some online docs about burning the .iso onto a USB drive, as Fedora's livecd-iso-to-disk didn't seem to want to play with an Ubuntu .iso. However, it turned out that Ubuntu's docs don't acknowledge the existence of anything other than Windows, Mac, and Ubuntu. I guess I now know how the BSD people feel...

Anyway, this got me thinking: is Ubuntu trying to cover up the fact that it's based on Linux? I grabbed the list of the current top 10 Linux distributions from DistroWatch, added on a couple of the more corporate/enterprisey ones (Red Hat, CentOS and Novell/SuSE), and ran a very simple script to pull down their homepages and count how many times they mention "Linux". Here are results:

The numbers are distorted of course, especially for those that include "Linux" in their brand-name. Fedora and OpenSuSE don't score well, but at least they do both mention it prominently near the top of the page.

However, I finding it galling that in 30-odd kilobytes of HTML, Ubuntu can't find anywhere to mention the (literal) kernel that underlies their product. It's not mentioned on their "How can it be free?" page either - there's just a mention of open source in general (which also implies it's down to the efforts of corporations, and not individuals). It should also be noted that the two mentions of Linux on Lubuntu's home page are just feed links from external sites/blogs.

Maybe we should follow RMS's example and insist on referring to it as GNU/Linux/Ubuntu?

Chrome and Safari don't support <blink> or even CSS's text-decoration: blink;, but never fear, WebKit is here to help those who want to relive the late '90s! @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .css3-blink { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 1s; }

Voila! Blinking using WebKit CSS3 animations :-)

EDIT: changed to use CSS opacity rather than color so that it should work on any background colour/image.

Testing, testing, 1-2-3...

Some people dislike native applications for mobile devices, preferring web applications due to their more open nature, (generally) better accessibility, etc. Personally, I'm quite happy to use them, as even the latest-and-greatest HTML5/CSS3/JS functionality doesn't always match up with what can be done in Cocoa Touch et al.

However, if a native app is deficient to its webapp equivalent, then that's just crazy...

The above photo was taken on October 12th 2010, a week or so after Argos - a large UK retailer - started selling the new range of iPod Touches (the ones with the retina display).

... or at least, that's what the Argos website - shown on the left iPod - tells us. The Argos app on the other hand, is still living in the past, failing to show the 4G/retina versions, and instead claiming that the year-old 3G versions are in fact "NEW". It wouldn't surprise me if that highly misleading "NEW" description could lead to some interesting cases involving Trading Standards, should anyone feel so inclined...

Following the links for the older 3G product, both show consistent information. The webapp no longer shows the misleading "NEW" product description.

On the other hand, searching for the 4G device, the webapp claims that its product code is unknown. I'll give you one guess as to where the 4G device shown on the left was purchased - good thing I didn't rely on their webapp to tell me whether it was in stock or not!