What's a Letter in CSS's first-letter Pseudo-element?

, ,

Looks like Firefox 3.5 broke this CSS:

div.xxx:first-letter {font-size:xx-large; color:red}

The first letter is not colored or bigger if the first char is the Unicode (N-ARY SUMMATION; U2211).

Here's a screenshot of what Firefox 3.5 shows:

firefox3.5 CSS first letter

Try this test page to see what your browser show: CSS first-letter pseudo-element test page.

As of , in {IE, Safari, Opera}, all the first characters are rendered large and red, regardless whether it is technically a letter.

As of , in IE9, Safari, Opera, Chrome, all highlight the first character.

Versions before Firefox 3.5 works fine.

Is Firefox 3.5's Behavior Correct by W3C?

The question is, is Firefox 3.5's behavior correct by W3C? The spec is here: http://www.w3.org/TR/CSS2/selector.html#first-letter

However, the spec is not exactly clear on this.

I think it's better if it applies to all Unicode chars, and just the first char, no exceptions.

Emulating the traditional publication behavior is quite vague and problematic. For example, the spec says if the first letter is a double quote, then that double quote should also be cap'd alone with the letter after the double quote. Also, it says if the first char is digits such as 3, it should be cap'd too.

These are problematic and inconsistent. If emulating tradition is focused, then digit chars shouldn't apply. But, including the quotation char as part of the “first-letter” is also problematic, because it breaks simplicity and consistency.

It would be much simpler and consistent, and probably more applicable to today's digital world, if the pseudo-element “first-letter” is “first-char” instead. For those who needs to cap the first punctuation char alone with the letter that follows, they might as well do special CSS for those cases, or, W3C really should have tags like second-letter, last-letter (for last punctuation, usually closing quotation char.).

Jukka K Korpela gives a good analysis of the situation:

Newsgroups: comp.infosystems.www.authoring.stylesheets
Date: Tue, 28 Jul 2009 19:25:57 +0300
Subject: Re: firefox 3.5 broke css :first-letter

at: Source groups.google.com

blog comments powered by Disqus