Skip to content

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

Closed

Description

@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

Activity

  1. dauwhe commented on Jan 4, 2017

    @dauwhe
    Contributor

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

    689

  2. fantasai commented on May 25, 2018

    @fantasai
    Collaborator

    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

  3. dbaron commented on Jul 4, 2018

    @dbaron
    MemberAuthor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions