W3C home > Mailing lists > Public > www-style@w3.org > February 2017

[CSSWG] Minutes Seattle F2F 2017-01-11 Part III: Text Breakout - Inline Layout & Initial Letter

From: Dael Jackson <daelcss@gmail.com>
Date: Mon, 13 Feb 2017 20:20:10 -0500
Message-ID: <CADhPm3vTUDdxu6eT3eqoSbD2nrY92e-D5Xagjus8D0-GfMF2Xw@mail.gmail.com>
To: www-style@w3.org
  These are the official CSSWG minutes.
  Unless you're correcting the minutes,
 Please respond by starting a new thread
   with an appropriate subject line.

Text Track

Inline Layout & Initial Letter

  - RESOLVED: The 'float' property has no effect on initial letter
              boxes. Note that it still affects 'display'
              computation, so applying it to inlines will still turn
              them into floats.
  - RESOLVED: Initial letter boxes are in-flow.
  - An issue will be filed to define how line boxes and
      initial-letter interact https://github.com/w3c/csswg-drafts/issues/887
  - It seemed like people were leaning towards a decision that
      initial letter can add extra space above the top of the first
      line box, but the group had to break before a conclusion could
      be reached.


Agenda: https://wiki.csswg.org/planning/seattle-2017
Note: The group split the morning of the 11 January on two
      tracks: FX and Text.

Scribe: fantasai

Text Track

Inline Layout & Initial Letter

Slides: https://lists.w3.org/Archives/Public/www-archive/2017Feb/att-0000/Initial-Letter-examples-SeattleF2F.pdf

Floats & initial-letter

  <fantasai> https://drafts.csswg.org/css-text-decor-4/
  <astearns> https://github.com/w3c/csswg-drafts/issues/689
  dauwhe: Lots of issues popping up in GitHub
  dauwhe: falling into 2 categories.
  dauwhe: One is interaction of initial-letter and floats.
  dauwhe: Other category might describe as more fundamental about
          how box model works for initial letters.
  [dauwhe shows off example]
  dauwhe: This is dbaron's example
  <dbaron> https://github.com/w3c/csswg-drafts/issues/689#issuecomment-270385732
  * fantasai agrees with dbaron's proposal in the issue

  dauwhe: webkit treats initial letter as a float, e.g. applying
          'clear' has an effect just like for floats.
  dauwhe: As a book person, this is breaking fundamental rule that
          the letter isn't moved away from subsequent text.
  dbaron: I think the spec actually says this is wrong already.

  dbaron: Spec currently doesn't handle this case correctly.
  dbaron: I think the spec says the T overlaps the red float, but
          not 100% clear.

  [dauwhe shows more examples]
  dauwhe: If there is a float before the first line of the
          paragraph, what happens?
  dauwhe: Float separating letter from subsequent text is obviously
  dauwhe: Pushing down the float below the first letter is awkward.
  dauwhe: Best result is if the float is in the top left corner of
          the paragraph, before the initial letter.
  dbaron: This is a float whose anchor is somewhere in the first
  dauwhe: Float anchored on second line, here are some possible
  dbaron: Spec currently calls for third behavior (float after the
          initial letter).
  dbaron: Other option is the second one (float aligned to top of
          second line, but placed before the initial letter, pushing
          it out).
  dauwhe: Can we say that float anchored on first line is before the
          initial letter?
  dauwhe: and if anchored subsequent lines pushes down?

  SteveZ: If float is placed before first line is begun, should push
          aside the initial letter.
  dbaron: Suppose float is between "winter" and "of"
  SteveZ: Then you get the first result (initial letter in top left

  dbaron: Seems like we all agree on the results we want.
  dbaron: Want to throw in one other comparison.
  dbaron: Want to consider float on second line case.
  dbaron: Also consider bunch of floats that are before the
          paragraph, some of which are placed lower on the page.
  dbaron: As in the example I posted.
  dbaron: In these cases it doesn't make sense to push the float
          down, because we've already placed the float.
  * fantasai agrees with dbaron
  astearns: There's rules about float not being able to go above the

  SteveZ: Going back to the first example, why doesn't the paragraph
          follow the T in moving down?
  dbaron: I think in this case, the T should be here (aligned the
          top to the top of the first line of text, so partway above
          the top edge of the red box)
  dbaron: This matches what we do for a single line (no initial
          letter) with the height of the initial letter.
  dbaron: Even though some impls would start flush with the green
          box and have the text overlap the subsequent float...
  Florian: If the floats of the same width or decreasing width, if
           increasing width doesn't look great.
  SteveZ: So don't do that.
  dbaron: It's not that bad.

  dbaron: In a real-world example, like stuff on Wikipedia, 'cuz
          wikipedia is the main site on the Web that uses floats as
          they were intended.
  dbaron: If you have two floats here *draws two boxes, lower one is
  dbaron: If you have some text here *draws 4 squiggly lines
          representing para next to first float*
  dbaron: *draws drop-cap T and subsequent squiggles starting a
          little above the top of the bottom box and flush with its
          far-right edge*
  dbaron: This doesn't look weird
  [everyone agrees]
  [looking back at second-line cases]
  dbaron: Spec currently calls for #3 (float is below initial letter)
  dauwhe: Agree, #3 is the best imho
  Florian: If you have multiple floats all anchored on the first
  fremy: In #3 if you have a right float, it also gets pushed down?
  dbaron: Only floats on the same side as the initial letter.
  dbaron: If there was a right float *after* the left float, then it
          would go down, too.
  fremy: OK

  Florian: What happens with 'initial-letter' and 'text-align:
  [dauwhe shows off bad WebKit behavior]
  myles: Do you have any more bugs in WebKit?
  <dbaron> I just filed https://github.com/w3c/csswg-drafts/issues/884
           on text-align interaction

  <astearns> issue https://github.com/w3c/csswg-drafts/issues/360 -
             we know the intent behind the solution
  astearns: So we have intent behind solution for 360
  <astearns> we also have the intent for
  astearns: For 689 also have intent
  astearns: Next is 688
  <astearns> https://github.com/w3c/csswg-drafts/issues/688

Floating an initial letter

  dauwhe: What if you declare 'float' and 'initial-letter' on the
          same thing?
  dbaron: Would like define that 'float' is ignored.
  dbaron: Part of the advantage of this is that it provides good
  dbaron: Right now you can do float and non-float methods.
  dbaron: People might want to fall back to either one of those,

  rachelandrew: People might want to do it as shapes.
  rachelandrew: In Shapes Level 1, can only do shapes on floats
  dbaron: If we want to support that, then we should say that you
          can use shapes on initial letter.
  fantasai: We have initial-letter-wrap property which basically
            does that.
  astearns: That only works for glyph shape. If you want a basic
            shape, would want shape-outside to apply to the initial
  * rachelandrew files https://github.com/w3c/csswg-drafts/issues/885

  astearns: So interaction between float and initial letter.
  astearns: Is only for first letter?
  fantasai: initial-letter currently defined so that it applies to
            ::first-letter and to inlines at the start of a block.
  fantasai: so it's not specific to ::first-letter.
  dbaron: I'd still be okay with it overriding float, even on

  Florian: I buy fallback story, with one concern.
  Florian: If height applies to initial-letter, then you need to
           pull out @supports.
  fantasai: We need to say that one of them gets ignored, might as
            well be 'float'
  SteveZ: No, you make the initial letter element a float and
          initial-letter applies to that.
  astearns: So proposal is ...
  fantasai: Just say that 'float' doesn't apply to initial letter
  dbaron: I would actually change the computed value.
  dbaron: I get annoyed by computed value changes when dependency
          graph becomes messy.
  dbaron: But there aren't any properties that mess with computed
          value of initial-letter, so less worried about this one.
  astearns: Objections?
  Proposed resolution: The 'float' property has no effect on initial
           letter boxes.

  fantasai: But what about 'display: block' elements? On those
            'initial-letter' doesn't apply, so 'float' should take
  dbaron: Yea, I guess, and then you have to figure out whether on
          inlines it's the first inline...
  dbaron: On an inline, 'float' will change 'display: inline' to
          'display: block'
  dbaron: so have a problem there.
  dbaron: Stick with proposed resolution, and then fallback will
          work for ::first-letter, but not for inlines
  dbaron: since 'initial-letter' applies to ::first-letter and to
          inlines at the start of a block, and 'float' makes an
          inline no longer an inline

  [Now discussing use cases for applying initial-letter with a span]

  Florian: Needed for handling cases where automatic :first-letter
           detection doesn't do the right thing.
  tantek: Also if you want the first letter to be an image.
  astearns: I'm OK with what dbaron said, allow fallback on
            ::first-letter but not on inline spans.
  fremy: But wouldn't the 'display: block' thing take effect anyone?
  dbaron: But the spec calls out ::first-letter specifically, not
          dependent on its 'display'.
  dbaron: In the case of applying 'float' to inline, it'll just be a
  SteveZ: So you're saying that because 'float' turned it into a
          block, then 'initial-letter' cannot apply
  fantasai: Right.

  RESOLVED: The 'float' property has no effect on initial letter
            boxes. Note that it still affects 'display' computation.

Are initial letters in-flow?

  <astearns> https://github.com/w3c/csswg-drafts/issues/743

  Florian: What depends on this?
  fantasai: There's some spec prose in various places that uses
            in-flow and out-of-flow.
  fantasai: I think we should define it to be in-flow.
  fremy: Table box generation rules e.g. are affected.
  dbaron: I would also prefer to define it as in-flow.
  dbaron: I would like to change as little as possible, but be clear
          for those things that care.
  dbaron: Agree with fantasai that it ought to be in-flow.

  astearns: I'm happy with that, but one concern...
  astearns: Working on other features... we have this paragraph
            *highlights drop-cap squiggle drawing from before*
  astearns: It has a baseline here. Want to refer to it as the first
            line box's baseline.
  dbaron: We can detach whether it's in the first line box from
          whether it's in flow.
  fantasai: It doesn't have a line box.
  dbaron: Agree that it's not part of the first line box, but
          disagree that it doesn't have a line box
  astearns: and disagree it doesn't have a baseline

  [dauwhe pulls up examples of flow around a drop-cap with a
          one-line paragraph]
  dauwhe: These are partly floaty, but not entirely.
  astearns: Baselines?
  fantasai: In alignment spec we're defining first and last
            baselines, and initial letter not part of that.
  astearns: [missed]

  fantasai: It's floaty, but we should not classify it as
  dauwhe: There is a box here that behaves differently from other
          boxes in CSS.
  dauwhe: We should say that it is in-flow for text-selection etc.
          But also things flow around it.
  SteveZ: It has some properties of float.
  dbaron: Part of my rationale is the various places in the spec
          that say, e.g. "if it has in-flow content", this should
  Florian: I don't have a good mental model of places where the spec
           uses these terms.
  Florian: But ppl who do...
  fantasai: I have a good enough mental model to say we definitely
            are better off to say it's "in-flow".
  dbaron: Most of these places are checks for in-flow content, and
          this definitely should count.
  fremy: unsure...
  dbaron: We can define how it works in the spec, but in terms of
          how other things consider it as content.
  dbaron: It should be in-flow.
  fantasai: It's only like an out-of-flow in that, like floats,
            it has wrapping behavior.
  fantasai: An out-of-flow element has a placeholder and is laid out
            somewhere else. That is not the case here.
  fantasai: Because these categories are used elsewhere, we need to
            specify clearly which one it falls into so that it is
            hooked up to the rest of CSS.
  fantasai: And I think the appropriate categorization here is
  Florian: And if there are places which are not using the
           classifications correctly, we should fix those there.
  fantasai: Yes.

  [dbaron quotes from CSS2.1 to illustrate uses of in-flow vs
  <dbaron> I quoted: "Line boxes that contain no text, no preserved
           white space, no inline elements with non-zero margins,
           padding, or borders, and no other in-flow content (such
           as images, inline blocks or inline tables), and do not
           end with a preserved newline must be treated as
           zero-height line boxes for the purposes of determining
           the positions of any elements inside of them, and must be
           treated as not existing for any other purpose."
  astearns: fremy, are you ok with resolving as in-flow and working
            out details if necessary later?
  dbaron: For the record, I think this is what falls out of CSS2.1

  skk: In the drop-cap with one-line paragraph, if underline is
       applied to this red line, what happens?
  skk: Does first letter also have an underline?
  dbaron: I believe the underline applies to the initial letter at
          the correct position
  SteveZ: You need to call that out explicitly
  dbaron: I think this falls out from the discussion of which line
          box the initial letter belongs in.
  astearns: So resolve on being in-flow, and raise an issue on the
            line box.

  RESOLVED: Initial letter boxes are in-flow.

  <dbaron> Filed https://github.com/w3c/csswg-drafts/issues/887 on
           interaction with line boxes

  fantasai: Is there a reason the root element is out-of-flow?
  fantasai: Because it behaves exactly like an in-flow box, but it's
            described as out-of-flow.
  astearns: defer that discussion to tomorrow...

How initial-letter makes the block taller

  <astearns> https://github.com/w3c/csswg-drafts/issues/719
  dauwhe: Issue on initial-letter clarifying how it makes the block
  dauwhe: We have the alignment points
  dauwhe: but we don't just glue the content box to the top of the
          containing block.
  dauwhe: Seems like we lay out first line, then place initial
          letter relative to first line.
  dauwhe: No idea how to proceed here in spec terms...
  dauwhe: I just know what I want things to look like.
  dbaron: I think some of the issues where this makes a difference
          are what happens if you have other stuff on the first line
  dbaron: e.g. what if you have a 'vertical-align: top' image on the
          first line.
  dbaron: I'm curious what are cases where you know what you want.
  dbaron: Issue that I filed, not at all convinced that there were
          cases that mattered. Just wanted spec to say something so
          we all agree.
  astearns: If you put a bunch of margin on your initial letter, it
            should push the paragraph down.
  dbaron: Assuming initial letter is positioned such that it would
          do that.

  Florian: What's the use case for margins on the initial letter?
  SteveZ: You might want negative margins to pull content into the
          glyph bounding box.
  dbaron: A case for bottom margins, if you want your letter to line
          up with the top five lines but you actually want it to
          exclude space from the 6th line.
  astearns: Diacritics is a good case for margins on the initial
  astearns: You don't want margin on paragraphs in general, but want
            enough to ensure no collision of diacritics.
  dauwhe: We already exclude glyph area.
  dauwhe: Also think there should be a high bar for saying you can't
          use margin in CSS.

  jensimmons: If you have border/padding, wanting margin is natural.
  [discussion of using margins and padding for spacing]
  jensimmons: You want to set your paragraph margins and padding for
              no initial letter, and make further adjustment on
              initial letter itself for when it is present.
  dbaron: Main thing it affects is what vertical-align top and
          vertical-align bottom do.
  dbaron: These feel like they're not really for formatting text.
  dbaron: They're for layout tricks and you happen to have an inline
          and you want it to do something special.

  SteveZ: When you were talking about line box, could say that
          initial-letter box affects the top of the line box but not
          the bottom.
  SteveZ: So the top of the line box gets moved up so it includes
          the initial letter, but the bottom doesn't.
  SteveZ: But worry about some alignment issues...
  dbaron: That is one of the two entirely reasonable options.
  dbaron: The other is saying the line box is entirely unaffected.
  SteveZ: Yes, but if you want to align something to the top
          including initial letter, you need to affect the line box.
  fantasai: You do have the option of using 'vertical-align:
            text-top', if we increase the height of the line box.

  astearns: I'm leaning towards not increasing height of the line.
  astearns: So it's a question of whether we can find a use case.
  SteveZ: If you don't do that you need to rewrite the block text so
          that it explicitly calls out the initial letter box to
          affect the hight of the box.
  fantasai: It does seem simpler to say that it affects the height
            of the line box.
  astearns: My whole paragraph is top-aligned.
  fantasai: What do you mean?
  dbaron: You can't vertical-align a block.
  astearns: All content in the first line is 'vertical-align: top'
  astearns: We're positioning the cap height of this content.
  fantasai: You're positioning the initial letter to the root inline
            box, which isn't vertical aligned.
  astearns: OK

  Florian: Affecting height of the line box would interact badly
           with line-height-step sizing.
  Florian: You're step sizing your lines.
  Florian: You add in initial letter with margins and padding and
  Florian: And suddenly your first line is double height.
  Florian: It's not what you want.
  fantasai: Or is it?
  SteveZ: That would be intended, right? You're trying to maintain
  SteveZ: Using margins on initial letters needs careful thought.
  dbaron: My gut feeling is that line-stepping or various proposals
          would be more likely to benefit from not increasing height
          of the line box.
  dbaron: But hard to tell without working through it.
  Florian: If the first line that might or might not be affected is
           at the beginning of the content, then better to avoid
           step sizing it.
  Florian: But if it's the third paragraph, then you might want to
           apply it there, to maintain the rhythm.
  dauwhe: For raised caps the block gets taller, there isn't a flow

  <dbaron> I think a bunch of people are leaning towards the idea
           that the initial letter can add extra space above the top
           of the first line box.
  astearns: We need to define this box and figure out interactions,
            but we're not going to do that now. Gonna do lunch.
  SteveZ: Independently of whether initial letter affects the line
          box side, it affects the container size.
  dbaron: Yes, that's already clear in the spec.
  dbaron: Issue is whether it does that by increasing the size of
          the first line box or by adding space above the first line

  <br type=lunch><div id="DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2"><br />
<table style="border-top: 1px solid #D3D4DE;">
        <td style="width: 55px; padding-top: 13px;"><a
width="46" height="29" style="width: 46px; height: 29px;" /></a></td>
		<td style="width: 470px; padding-top: 12px; color: #41424e;
font-size: 13px; font-family: Arial, Helvetica, sans-serif;
line-height: 18px;">Virus-free. <a
target="_blank" style="color: #4453ea;">www.avast.com</a>
</table><a href="#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2" width="1"
Received on Tuesday, 14 February 2017 01:21:15 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:15:02 UTC