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-letter pseudo-elements which, to my surprise, WebKit has some massive problems with. Specifically:
- WebKit does not accept
::first-linepseudo 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 is
font-variant: small-capswhich would work fine if we could also use
text-transform: lowercase, but we can’t.
- WebKit also doesn’t accept a
font-familyrule in both the
::first-linepseudo-elements. The latter is usually OK, but the former really sucks. Even worse, in both cases, a
font-familyrule 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-letterCSS 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-letterspec 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!