[css-inline] should specify that line with initial letter is shortened relative to all floats initial letter can interact with

[dbaron]

The spec for initial letters currently says that the initial letter is placed relative to the line, and CSS 2 specifies that the line is shortened by floats next to it.

However, this doesn't correctly account for initial letter.

If you interpret the specs literally, then something like:

#float_one { float: left; width: 100px; height: 100px }
#float_two { float: left; width: 200px; height: 100px; clear: left; }
p::first-letter { font-size: 20px; initial-letter: 5 }

<div id="float_one"></div>
<div id="float_two"></div>
 <!-- line the next p up so that the first line is next to float_one only,
      but the initial letter is next to both floats -->
<div style="height: 50px"></div>
<p>This paragraph has an initial letter.</p>

will yield the bottom half of the capital "T" overlapping #float_two, because the initial letter is placed relative to its line box, and the line box is placed relative to its height only, and that height only intersects #float_one

I think the spec needs to say that the line is shortened to account for floats "next to" the initial letter, using wording similar to that in CSS 2. I haven't thought about this solution in any detail, though.

cc @chenpighead

[dauwhe]

Here's @dbaron's example in Safari 10.0, with #float_one green and #float_2 red.

[fantasai]

Edits committed per WG discussions in 71edb81 and @dauwhe added diagrams.
See spec at https://drafts.csswg.org/css-inline-3/#initial-letter-floats
Related discussion at #360

[dbaron]

There's a discussion relevant to this issue that was recorded in #360 (comment)