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

On Tue, Aug 10, 2010 at 10:45 AM, Daniel Schattenkirchner
<schattenkirchner.daniel@gmx.de> wrote:
> 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).

The IE/Webkit/Opera behavior seems extremely wrong.  Gecko's behavior
seems to be what's intended, I agree, and is actually sensical.

I don't think I like magic behavior for text-indent on an element
based on whether a child of the element is floating in a particular
direction, based on the text-direction of the element.  That seems way
too confusing, and likely to cause undesired behavior when the floated
child is something other than ::first-letter, like an image.

It's always possible to target the element itself when you target its
::first-letter, so I recommend just selectively removing the
text-indent on the element and applying a margin to the
::first-letter.

~TJ

Received on Tuesday, 10 August 2010 18:33:11 UTC