Interaction of text-indent, ::first-letter and float

The interaction of text-indent with floated ::first-letter is currently 
specified in a way that creates unexpected results.

The issues I see can be demonstrated using these lines of code:

<div style="text-indent: 5em;">This line is part of the test.</div>

div::first-letter {
  float: left;
  font-size: 2em;
}

I'm an author and when I wrote these lines, I expected this rendering:

      --- his line
       |  is part
of the test.

Note: This is what IE9 (starting with Preview #3) renders.

Issue #1:

I think this is related to the issue discussed not long ago in [1].

IE6 to IE8, Presto and WebKit render this:

      ---      his line
       |  is part of the
test.

While Gecko renders:

---      his line
  |  is part of the
test.

Both look incorrect to me. The latter seems to be what the spec 
intended. Currently, I can get the expected behaviour only when I set 
margin-left on the ::first-letter instead of using text-indent.

If I got a sectioning block element and many paragraphs inside of which 
I only want the first-letter of the first-child to be floated, I have to 
reset text-indent on the first-child in addition to setting float on the 
:first-child::first-letter.

That's not hard work, but it appears more complex than necessary.


Issue #2

I understand there may be problems with the expected rendering as 
proposed above when text flows into the same direction as the float 
does. I think as an author I'd expect something along these lines:

If the element text-indent is applied to has its direction property set 
to "ltr" (or "rtl") and the ::first-letter of that element has its float 
property set to "right" ("left"), then text-indent is applied in front 
of the ::first-letter, else, text-indent is applied in front of the 
letter following the ::first-letter.

Like:

    This  /|
point is  |.
about bla...

I think this is in line with the current state of the specification.

so the semi-spec text above could end like: ... else, behave as specified.

Note: IE9 currently renders text-indent in front of the ::first-letter 
in the direction:ltr + float:right case. I couldn't think of a case 
where this would make more sense than my proposal.

float and ::first-letter interaction in rtl context are currently 
untestable in IE9 (a blank page appears instead).

Kind regards, Daniel


[1] http://lists.w3.org/Archives/Public/www-style/2010Jul/0256.html

Received on Tuesday, 10 August 2010 17:46:01 UTC