Web Typography Pain Points

When I launched mattwie.be, I said that I had some things to say about the state of CSS typo­graphic con­trols. I’m mak­ing good on that threat. Things have come a long way from too-long mea­sures of Times New Roman on a mid-gray back­ground, but CSS still lags behind page lay­out soft­ware in many areas, which is only com­pounded by incon­sis­tent browser implementation.

I’m going to espe­cially focus on ::first-line and ::first-letter pseudo-elements which, to my sur­prise, WebKit has some mas­sive prob­lems with. Specifically:

  • WebKit does not accept text-transform on the ::first-line pseudo ele­ment. This embar­rass­ing bug is almost 6 years old and means that the com­mon typo­graphic prac­tice of set­ting the first line of a para­graph in all-caps is impos­si­ble in Safari, Chrome, and—insanely—iBooks, which uses WebKit for its ebook ren­der­ing. The clos­est you can get is font-variant: small-caps which would work fine if we could also use text-transform: lowercase, but we can’t.
  • WebKit also doesn’t accept a font-family rule in both the ::first-letter and ::first-line pseudo-elements. The lat­ter is usu­ally OK, but the for­mer really sucks. Even worse, in both cases, a font-family rule will cause them to fall back to the sys­tem font!
  • WebKit has a bug where mod­i­fy­ing the DOM of an ele­ment that has a ::first-letter CSS rule attached will result in a phan­tom first let­ter. See QuirksMode’s test case. (Opera does this too.)

Fire­fox isn’t all roses either, despite their ter­rific efforts in bring­ing long-awaited Open­Type fea­tures into CSS. The main thing I noticed was that Fire­fox treats ::first-letter oddly style-wise. It doesn’t seem to behave as a full-fledged block-level ele­ment when set­ting float or dis­play prop­er­ties. It also com­pounds the font-size when the ::first-letter coin­cides with another DOM ele­ment that also sets the font-size.

Some other issues:

  • WebKit sets its pseudo-small caps (when using font-variant: small-caps) smaller than other browsers. It also seems to add some pseudo-emboldening to bet­ter com­pen­sate for the fact that they’re not true small caps.
  • Incon­sis­ten­cies between browsers in con­form­ing to the ::first-letter spec for includ­ing punc­tu­a­tion char­ac­ters. Specif­i­cally, WebKit only seems to include punc­tu­a­tion that pre­cedes the let­ter, not punc­tu­a­tion after it.

I’ve cre­ated a test page that illus­trates a lot of these pain points. I also made a page that demon­strates a WebKit nor­mal­iza­tion strat­egy with some UA sniff­ing and the jQuery fan­cylet­ter plu­gin, which I con­tributed a small patch to along the way. I’d describe that strat­egy, but then this post would never be pub­lished. View source!