Web Typography Pain Points

When I launched mattwie.be, I said that I had some things to say about the state of CSS typo­graph­ic 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­pound­ed by incon­sis­tent brows­er implementation.

I’m going to espe­cial­ly focus on ::first-line and ::first-letter pseu­do-ele­ments which, to my sur­prise, WebKit has some mas­sive prob­lems with. Specifically:

  • WebKit does not accept text-transform on the ::first-line pseu­do ele­ment. This embar­rass­ing bug is almost 6 years old and means that the com­mon typo­graph­ic 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 does­n’t accept a font-family rule in both the ::first-letter and ::first-line pseu­do-ele­ments. The lat­ter is usu­al­ly OK, but the for­mer real­ly sucks. Even worse, in both cas­es, 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 QuirksMod­e’s test case. (Opera does this too.)

Fire­fox isn’t all ros­es either, despite their ter­rif­ic efforts in bring­ing long-await­ed Open­Type fea­tures into CSS. The main thing I noticed was that Fire­fox treats ::first-letter odd­ly style-wise. It does­n’t seem to behave as a full-fledged block-lev­el 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 anoth­er DOM ele­ment that also sets the font-size.

Some oth­er issues:

  • WebKit sets its pseu­do-small caps (when using font-variant: small-caps) small­er than oth­er browsers. It also seems to add some pseu­do-embold­en­ing 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­cal­ly, 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­at­ed 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­e­gy with some UA sniff­ing and the jQuery fan­cylet­ter plu­g­in, which I con­tributed a small patch to along the way. I’d describe that strat­e­gy, but then this post would nev­er be pub­lished. View source!