I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

New CSS tests - fonts and text

Just now I published the desktop and mobile tables for the CSS Text module and related ones — think italics, underline, and letter-spacing, but also hyphenation and text-shadow.

This is a series of tests in which Firefox excels. It is the only browser to implement new declarations such as text-align-last and text-decoration-color. Even better, it also supports these on mobile, while the differences between the desktop and mobile versions of IE, Safari, and Chrome is much more pronounced. (Opera also keeps desktop and mobile closely aligned, but supports less properties. And then there’s Opera Mini ...)

On desktop most browsers support most properties, with Firefox supporting a few extra. On mobile the situation is much more murky. I mean, even letter-spacing is not supported in Opera Mini, Nokia Xpress, and Nokia S40 WebKit.

Hyphenation

Back in November I reported that hyphenation works in IE10, Firefox, and Safari. On the mobile side things are more difficult: only Safari iOS and, once more, Firefox, support hyphenation — and I have my doubts about the iOS dictionary. I once saw it hyphenate “iPhone” as “iP-hone.” One would expect the Apple dictionary to contain proper hyphenations of its own trade names.

italic

Then there is the font-style: italic test. This declaration has been supported forever — hell, even Netscape 4 got it right. On the mobile side, unfortunately, several browsers have problems, ranging from outright lack of support (Nokia Xpress) via serious bugs (Nokia S40/Symbian and Opera Mini) to a subtle but telling bug where the <code> tags in the examples are not italicised (BB10, One), even though the normal text is.

Incidentally, this last bug is also the first concrete example I found of differences between Android browsers. The HTC One X displays the bug, while the Samsung Galaxy Note does not. They run Android 4.1.1 and 4.0.3, respectively, but I doubt Android has dropped support for italic fonts between 4.0 and 4.1.

The problem here is not so much that these browsers do not support font-style: italic out-of-the-box, but that the device lacks italic fonts, or, in the case of the <code> bug, italic versions of monospaced fonts. At least, I think that’s what’s going on.

bold

Another tricky topic is font-weight. Traditionally this declaration has been used only for bold fonts, but some fonts support various weights. The test page uses Segoe UI for Windows (four weights) and Helvetica Neue for Mac (five weights). While on Mac all browsers but Opera show the five Helvetica Neue weights, on Windows only IE shows the four Segoe UI weights, with the other browsers restricting themselves to normal and bold. I’m not sure if this is a genuine bug, a problem with implementing fonts in the browser, or something else.

On mobile the situation is even more complex. While several browsers seem to support the fonts themselves, only one single browser actually uses the various weights in the test page — and if you think that browser is Safari iOS, you’re wrong. It’s, once again, Firefox.

Typography

My problem here is that I lack the typographic knowledge I need to interpret these tests. I had already decided to ask for help from several web typographers, but thought I’d only need that help when I got around to the detailed font tests, which I haven’t written yet. Turns out I need it even font-style: italic and font-weight.

I don’t think I’m going to dive deep into these matters right now — I have a lot of other tests ready to roll, and I’m going to do them first. But the font-related properties definitely merit a fresh visit later on, when I understand mobile typography better.