When I launched mattwie.be, I said that I had some things to say about the state of CSS typographic controls. I’m making good on that threat. Things have come a long way from too-long measures of Times New Roman on a mid-gray background, but CSS still lags behind page layout software in many areas, which is only compounded by inconsistent browser implementation.
I’m going to especially focus on ::first-line
and ::first-letter
pseudo-elements which, to my surprise, WebKit has some massive problems with. Specifically:
- WebKit does not accept
text-transform
on the::first-line
pseudo element. This embarrassing bug is almost 6 years old and means that the common typographic practice of setting the first line of a paragraph in all-caps is impossible in Safari, Chrome, and—insanely—iBooks, which uses WebKit for its ebook rendering. The closest you can get isfont-variant: small-caps
which would work fine if we could also usetext-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 latter is usually OK, but the former really sucks. Even worse, in both cases, afont-family
rule will cause them to fall back to the system font! - WebKit has a bug where modifying the DOM of an element that has a
::first-letter
CSS rule attached will result in a phantom first letter. See QuirksMode’s test case. (Opera does this too.)
Firefox isn’t all roses either, despite their terrific efforts in bringing long-awaited OpenType features into CSS. The main thing I noticed was that Firefox treats ::first-letter
oddly style-wise. It doesn’t seem to behave as a full-fledged block-level element when setting float or display properties. It also compounds the font-size
when the ::first-letter
coincides with another DOM element 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 better compensate for the fact that they’re not true small caps. - Inconsistencies between browsers in conforming to the
::first-letter
spec for including punctuation characters. Specifically, WebKit only seems to include punctuation that precedes the letter, not punctuation after it.
I’ve created a test page that illustrates a lot of these pain points. I also made a page that demonstrates a WebKit normalization strategy with some UA sniffing and the jQuery fancyletter plugin, which I contributed a small patch to along the way. I’d describe that strategy, but then this post would never be published. View source!