Hixie's Natural Log

2004-01-27 22:21 UTC Allowing innovation in obscure parts of specifications

We had our (hopefully) final CSS2.1 Editors teleconference today, resolving the last few CSS2.1 issues that were raised during Last Call. At last count we had about 272 separate issues. We still have to actually edit the document, and send out replies and check that everyone who raised an issue is happy with our decisions, but it is a milestone nonetheless.

The last issue we addressed was related to an issue we resolved early on in the process. (We haven't yet sent out the e-mail reply on this issue. We will be doing so at some point relatively soon.) Some time ago, fantasai questioned whether :first-letter should match the contents of :before pseudo-elements. After some debate, the working group decided that CSS2 was clear on this, and that the main case fantasai had raised (the case of counters in generated content) was solved by taking list item markers out of :before. (We agreed that the first digit of the number in a list item shouldn't be styled like a first letter.)

Thus it was decided to leave the draft as is, but to make an editorial clarification in the draft to the effect that :first-letter should never match list markers. Simple enough, we thought. However, when it came to trying to write the actual text to go into the specification, it became clear that we weren't all sure what we had agreed to! In particular, what should happen when you have a list item marker with list-style-position: inside?

Before deciding on particular rules, we thought we should check what implementations did. I wrote a simple test case:

<html lang="en">
  <style type="text/css">
   li { list-style-position: inside; }
   li.a:first-letter { color: blue; font-size: 2em }
   li.b:first-letter { color: blue; font-size: 2em; float: left; }
   <li class="a"> TESTA </li>
   <li class="b"> TESTB </li>

What do browsers do with this?

Amaya 8.2

Both list items are unstyled, with a small vertical teal bar at the end of the second.

Doesn't support :first-letter at all.

Konqueror 3.1

Both list items are unstyled.

Doesn't support much of :first-letter in the first place, and doesn't do anything with the :first-letter on this test.

MacIE 5

Both list items are unstyled.

Tantek says he couldn't work out how to handle this case, so Tasman (the MacIE rendering engine) just bails if you try to set :first-letter on a list item with list-style-position: inside.

WinIE 6

Both numbers are styled, both Ts are styled, the "ESTA" text is baseline-aligned with the first "1.T" text, and the "ESTB" text is top aligned with the "2.T" text.

Applies the :first-letter styles to both the marker and the T. This is probably within the allowed renderings of CSS2, and is readable. Unfortunately, it applies the styling to the numbers, which the working group agreed was not desirable.

Mozilla 1.6


The "TESTA" text is all blue and large, the "TESTB" is unstyled, and there is a lone "T" on the next line.

After a reflow:

The "TESTA" text is still all blue and large, but the second line, while still unstyled, now only says "ESTB". There is still a lone "T" on the next line.

Mozilla's rendering is where things start getting silly. The :first-letter style is getting applied to the entire first line, and the T on the second line appears twice! If you reflow the page (for example, resize it, or change the font zoom) then the unstyled T vanishes, leaving the first letter on the next line. Not, the working group decided, the most optimal of renderings.

Opera 7.50

The numbers are unstyled, both Ts are styled, the "ESTA" code is baseline-aligned with the rest of the first line, the "2." text is bottom aligned with the second T, and the "ESTB" text is top aligned with the second T, with a horizontal offset of a few pixels.

We couldn't work out exactly what Opera was doing. The first line's rendering makes sense, but the second is quite odd. At no point in the discussion did we ever consider that there might be more than one baseline for the unstyled parts of the rendering.

Safari 1.1

The first T is styled with the rest of the line unstyled. The second line reads "T 2. ESTB", with the T styled and drop-capped.

This is probably the most accurate rendering in terms of CSS2, but it is as unreadable as the Mozilla rendering. The float property on the second line's :first-letter is acting exactly like a float, going all the way to the left of the line and pushing the other content. This is somewhat at odds with what the working group really intended float to mean on a :first-letter pseudo-element, namely "make a drop-cap".

Our conclusion? Well, we don't want to force UAs to have to render something in a typographically poor manner, but yet at the same time we don't have any idea what the right way to render this is. All the ideas we could come up with were flawed in some way. So instead, we took the cop-out solution:

UAs may ignore ':first-letter' on list items with 'list-style-position: inside'.

Making this a "may" instead of a "must" means that user agents are still free to try to do something useful in this case, so if someone does manage to find a useful rendering, they can implement it.