W3C home > Mailing lists > Public > www-style@w3.org > July 2018

[CSSWG] Minutes Sydney F2F 2018-07-03 Part II: Initial Letters [css-inline]

From: Dael Jackson <daelcss@gmail.com>
Date: Thu, 19 Jul 2018 20:26:30 -0400
Message-ID: <CADhPm3srX-ena8=1BqmvTtNZj1cy28CNsB+0jg996C=8Z7-ayg@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.

Initial Letters

  - RESOLVED: Raised initial is justified as normal. (Issue #884)
  - RESOLVED: For sunk initials, the initial letter box’s start margin
              edge is anchored to the start edge of the line (after
              first-line 'text-indent'), and alignment happens
              afterwards in the remaining space on the line. (Issue
  - RESOLVED: Sunken initial letters suppress justification between
              the initial letter and subsequent text. (Issue #884)

  - RESOLVED: Clear doesn't apply to initial letters. (Issue #360
              and #689)
  - RESOLVED: Initial letters must not overlap floats (just like
              lineboxes don't). (Issue #360 and #689)
  - RESOLVED: If a linebox moves down or is shortened due to a
              float, initial letter moves with it, and vice versa.
              (Issue #360 and #689)
  - RESOLVED: An inline-start float originating on first line can
              go between initial letter and containing block edge.
              [It can't split the initial letter and the
              subsequent text.] (Issue #360 and #689)
  - RESOLVED: An inline-start float originating on subsequent
              impacted lines must clear the initial letter. (Issue
              #360 and #689)
  - Discussed interaction of inline-end floats with initial letters.
      There was some disagreement, and the group worked through
      various models for describing initial letters to work through
      that interaction.
      Further discussion on the exact model used to describe initial
      letters and their impact on inline-end floats was deferred to


Agenda: https://wiki.csswg.org/planning/sydney-2018#schedule

Scribe: TabAtkins

Initial Letters

  Rossen: Dave, you have the issues in some order?
  fantasai: There's in an email order.
  <fantasai> https://lists.w3.org/Archives/Public/www-style/2018Jun/0020.html
  dauwhe: That's fine.
  fantasai: First issue, 884

initial letter and text-align
  github: https://github.com/w3c/csswg-drafts/issues/884#issuecomment-392114382

  fantasai: So how does initial-letter interact with text-align?
  fantasai: Proposal is that for raised initials, no special behavior,
            it just aligns as specified.
  fantasai: Sunk initials, suggestion is that initial-letter box's
            start margin edge is anchored to start edge of the line,
            then text-indent works on the rest of the text on the
            line. It also suppresses justification between the
            initial-letter and subsequent text.
  fantasai: Say you have a bunch of Chinese characters and
            inter-character spacing, you don't want spacing between
            initial-letter and first normal text letter on first line,
            but not on subsequent lines (because they're not "next" to
            the initial letter).
  fantasai: So instead they're flush on all lines.

  dbaron: I'm a little worried about the justification part.
  dbaron: Thinking about initial letters that are single-letter words,
          like English "A" or "I". Especially with wide justification,
          seems like it'll look weird.
  dbaron: The justification from word spaces seems different than
  fantasai: Justification opportunities *on the space* are different
            than justification *between* two letters. It'll still
            justify in that case.
  dbaron: Ah, that wasn't clear. Sounds good, but I want more clarity
          in that when it's written into the spec.

  fantasai: So three separate resolutions here.
  <florian> I looked into it, I like it. (all 3)
  fantasai: First, for raised initials, alignment is honored as usual.
  Rossen: Seems uncontroversial.
  dauwhe: It's just a big letter.

  RESOLVED: Raised initial is justified as normal.

  fantasai: Second is that sunk initials are attached to the start
            edge of the line, then alignment affects the rest of the
  [myles draws a picture, it looks kinda weird]
  fantasai: We couldn't come up with anything better than that.
  florian: We couldn't find any use-cases, we just selected the
           simplest thing that wasn't horrible.
  dbaron: Do you ever actually see initial letters that aren't flush
          against the left edge?
  <dbaron> (where the left edge might be a shape rather than a
           straight edge)
  dauwhe: I've made some examples where you can set an explicit width
          on the ::first-letter and then right-align the
          initial-letter in that block, so the letters themselves
          aren't flush against the start edge.
  <tantek> the example dauwhe mentioned (I thought I heard)
  <dauwhe> tantek: yes :)

  myles: What were the other options considered?
  dauwhe: Florian put some suggestions into the issue.
  florian: That was a long time ago...
  florian: One of my proposals was - do two steps. 1, do the "attached
           to start edge, then align rest of text", then 2 flush it
           with text as much as you can.
  florian: But that didn't seem good.

  myles: I could think of a few scenarios, but this is probably best.
  myles: A third is just lay out first line right-justified, place
         first letter, then try to place everything else. That sucks.
  myles: Fourth is make it not sunken, but it's probably more
         important to honor the sunken request.
  myles: Uncommon enough we can maybe consider it an error case.
         Probably not worth doing a two-pass for that.
  myles: So out of those four options, I think current proposal is

  fantasai: Another is lay out all the lines that are affected
            start-aligned, then apply alignment to all the lines at
  florian: I think that's what I suggested, the two-pass
  dbaron: I think it's slightly different.
  [fantasai draws out their suggestions]
  dbaron: That's different, but I think florian's is slightly better
          for right-alignment, while I think fantasai's is bad for
          right-alignment. Lines won't necessarily be flush.
  florian: Since we do consider this an error case, I agree we don't
           need to do either two-pass.

  myles: [question about diagram fantasai drew]
  myles: All of these suck.
  dbaron: You could constrain the later lines to be shorter than the
          first, but it's a lot of work...
  myles: I just think this is rare enough that it just won't really
         matter what we pick.
  fantasai: I suggest to add a note to the spec that we don't expect
            this to be used, so if you actually need this to work a
            particular way, let us know.
  Rossen: This is the current behavior, too.

  Rossen: Objections?
  RESOLVED: For sunk initials, the initial letter box’s start margin
            edge is anchored to the start edge of the line (after
            first-line 'text-indent'), and alignment happens
            afterwards in the remaining space on the line.

  fantasai: Third part is initial-letter suppresses justification
            opportunities between the initial-letter and subsequent
            text. Specifically about between two characters, not about
            spaces or other stretchy characters.
  myles: Doesn't that fall out?
  fantasai: No, it's considered part of the first line's text, so
            typesetting rules between the initial letter and subsequent
            text still apply.
  myles: So when you center the first line, that text will include the
         first letter, even tho we just resolved it won't be
  <myles> So the first line's width is the full width, and
          justification/centering includes the width of the first
          letter, but the second line (when the first letter is
          sunken) has a shortened line-box, and the centering doesn't
          include the width of the first-letter inside the calculation
  <fantasai>: yes

  Rossen: Any objections?
  RESOLVED: sunken initial letters suppress justification between the
            initial letter and subsequent text.
Interaction with Floats
  github: https://github.com/w3c/csswg-drafts/issues/360 and

  fantasai: Based on minutes from earlier F2F, we made a bunch of
            changes to the spec.
  fantasai: Specific things were:
  <fantasai> https://github.com/w3c/csswg-drafts/issues/360#issuecomment-392128995
  [Issue bullets:
      - Clear does not apply to initial letters, nor does it clear
      - Initial letters must not overlap floats, just like line boxes
          must not overlap floats.
      - If a line box moves down or is shortened due to a float, the
          initial letter moves with it and vice versa.
      - An inline-start float originating on the first line goes
          between the initial letter and the inline-start containing
          block edge.
      - An inline-start float originating on subsequent impacted lines
          must clear the initial letter.
  fantasai: There's a bunch of illustrations in the issue.
  <fantasai> https://github.com/w3c/csswg-drafts/issues/360#issuecomment-270734813
  <fantasai> https://github.com/w3c/csswg-drafts/issues/360#issuecomment-270760193

  astearns: For last one, if you consider initial-letter as part of
            the first line, it falls out of the float behavior.
  fantasai: For floats on first line, going with first illustration;
            for floats on subsequent lines, going with last.
  dauwhe: The middle blue example is something we really want to
          avoid, so that's what we worked out the rules for.
  Rossen: What happens if there was a second left float that comes
          between "discontent" and "made"
  fantasai: Depends on if it's on first or second line. Then just
            follow the rules.
  fantasai: If on the second line, then the floats because the float
            is taller than the initial letter. It clears the initial
            letter, but doesn't clear the float.
  <dbaron> proposal is the first example in the blue examples, and the
           last example in the green examples, right?
  <TabAtkins> yes, dbaron

  [rossen draws picture of a drop-cap, float right anchored in second
  astearns: That float in that example - the top edge of the float
            can't be positioned above the bottom edge of the line box
            of preceding content, which includes the initial letter.
  fantasai: No reason to clear it for right floats...
  [multiple people] Oh no, that's bad.
  iank: You need to do it for both.
  dbaron: You get into fun issues if you start getting right floats
          that actually fill most of the block
  dbaron: You can then have a right float that bumps into the first
  fantasai: Then it wouldn't fit in that second line and has to move
  dbaron: To say that, you have to rewrite a bunch of text to *say* it
          won't fit, because text is currently about line boxes, and
          per that, there's nothing there right now (initial letter
          isn't in the line box)
  Rossen: Positioning a large right float is the same as positioning a
          normal left float.

  tantek: 2.1 algorithm assumes rectangle line boxes.
  tantek: for fitting floats
  tantek: A lot of its reasoning is simplified as a result.
  tantek: If you assume non-rectangular, you'll have to rethink those
          steps. Might be desirable, but we can't assume it'll "Just
  fantasai: Line boxes stack with zero distance between them; if this
            was about line box getting taller, second line would have
            to clear the initial letter too, so that's a false model.
  <tantek> yeah, I'm gonna need you to define non-rectangular line
  astearns: So we'd need to redefine some of the float behavior to say
            that, in the left-float case you set it as far left as you
            can without going above the line content (includes the
            initial letter), but for right float it can't go above the
            bottom of the actual line box.
  astearns: If the float geometry doesn't intrude into the
            first-letter geometry.

  dbaron: fantasai said in Seattle we had said we wanted the right
          floats to still be able to have their top at one of the
          intermediate lines.
  dbaron: Some of the complexity is around that.
  dbaron: I think there's an argument against that.
  dbaron: If you have right and left floats, you still need to have
          the rule that a float's top can't be above the top of a
          previous float.
  dbaron: So sometimes if you have a left float, a right float will
          get pushed down anyway below the initial letter.
  dbaron: So you're creating an inconsistent state where right floats
          are *sometimes* (indirectly) affected by the initial letter,
          so why not all the time?
  tantek: That would seem to be making the simple case bad so complex
          case works better.
  dbaron: I think it's good both ways.
  * dauwhe needs to do some drawings

  tantek: We need to decide what we want lineboxes to look like.
  tantek: It sounds like people's expectations are [missed]
  [trailed off]
  [Tantek draws two diagrams of line boxes, where the left side has a
      non-rectangular outline around the initial letter and its line
      box, with the second line tucked inside that L an subsequent
      lines. Then another diagram where the first line box is
      rectangular, and the second line is inside it tucked in the
      bottom right corner.]
  tantek: Start with a consistent linebox model, and figure out what
          consistent behaviors you get.
  myles: If you use non-rectangular thing don't call it a box...
  [mumbly discussion around the whiteboard]

  [dbaron draws another diagram where the first line box is
      rectangular, but only single-height high. The second line box is
      shortened, so there's a gap on the left]
  dbaron: We have three diagrams here.
  dbaron: A two-line dropcap.
  dbaron: In all three, the second linebox is shorter as a result,
          third and fourth are full-length.
  dbaron: Question is first linebox.
  dbaron: In first, linebox is rectangle enclosing both lines.
  dbaron: In second, linebox is sideways L enclosing drop-cap and
          first line text.
  dbaron: In third, linebox is rectangle enclosing the entirety of
          first-line (only top half of drop cap)

  fantasai: I think we should use third.
  tantek: That doesn't give you floating behavior rossen wants.
  fantasai: We can define some behaviors for the initial letter, like
            it shortens the second linebox, or that floats can't hit
            it and must clear.
  Rossen: Problem is that you want initial-letter to act like a float
          sometimes and not others, and that's weird.
  tantek: Worse is that you sometimes want it to cause floats to clear
          after, and sometimes don't.

  iank: Emil and I were discussing some tricky cases
  iank: A lot can be simplified if you treat the A as some special
        type of float, and also apply top-edge alignment rules, gets
        much simpler.
  iank: Apply top-edge alignment rule to initial letter, and
        additional rule that all subsequent floats will clear that
        initial letter.
  iank: (the rule that floats can't go higher the preceding floats)
  [iank drew a small right float followed by a large right float. Then
      tried to place initial-letter'ed line next to the floats.]
  iank: If you apply the additional constraint that the initial letter
        is always treated as a float, and has the top-edge alignment
        rule, it gets pushed down.
  dbaron: I don't think we want that blank space that'll result...
  dbaron: You need to assert that there's enough room for the initial
          letter, but shouldn't need to assert that it's past all
  iank: That's makes things very hard for us
  [iank asserted that since the initial-letter follows top edge
      alignment rule, it has to move down to at least the top edge of
      the second float]
  [dbaron said we don't want to do that - that we don't want that
      extra space]

  Rossen: One thing to make impls easy...
  Rossen: Three models for line box.
  Rossen: If we go with the box that always includes the initial
          letter as part of its bounds (#1), then that's
          straightforward for impls.
  Rossen: You have a line which is tall enough, it'll get cleared by
          either float.
  Rossen: The one contentious case is that if we have a right float on
          second line, it could have fit, but it'll get pushed down to
          clear the initial-letter instead.
  Rossen: But that's consistent with itself and with our current
          model, it's the 2.1 float algo.
  Rossen: Only different is that there's a linebox that extends past
          its initial line of content.

  dauwhe: The existing impl of this treats initial -letter as floats,
          and this gives a lot of bad behavior. If we can minimize bad
          behavior that's great, but these can't just be pure floats.
  dbaron: Rossen convinced me that 1 is better model.
  fantasai: That'll make weird alignment
  dbaron: Going with model 1 - this is linebox for float rules -
          requires fewer edits to float rules, and produces pretty
          sensible results.
  florian: Not the height of the linebox for *other* purposes, just
           for floats.
  tantek: I see appeal, but it makes the feature potentially worse
          than using floats to fake first letter.
  tantek: That would let right-floating items be fully up, not pushed
  tantek: So subsequent left floats would go beneath first letter,
          subsequent right floats wouldn't need to.
  florian: Other things break when you do it like that tho.
  fantasai: An issue I didn't want to get into today was what dbaron
            raised: what's the linebox model for initial letters?
  fantasai: You need a linebox for the letter, it has styling and
  fantasai: Need a linebox for it, for vertical alignment. Etc.
  fantasai: So I think we need two *overlapping* lineboxes. You can
            say they're same width (model 1), but we don't need to.
  tantek: That works.
  Rossen: So in that model, if you have a left float that would fit,
          why would it move down
  fantasai: Rule is that you can't have linebox between float and the
            containing block, so it can't sit there next to the
            initial letter.
  <fantasai> https://github.com/w3c/csswg-drafts/issues/360#issuecomment-270760193
  fantasai: What you're looking at there ^ is Dave's green examples,
            you just used a tiny float to make it look more confusing.
  fantasai: So either we go with the first green image, and if you
            happen to make your float small enough it'll tuck under
            there, or we don't.
  fantasai: But I thought we discussed and agreed with taking the
            third green rendering in Seattle.
  <tantek> blue 1, green 3
  iank: The way we'd implement this is to treat the letter A as an
        exclusion, and then we have optimizations that assume you
        don't put an exclusion above another one; this breaks that
  iank: Then you have to work out the layout areas...
  iank: You're asserting that the initial letter will go higher than
        other floats.
  dbaron: I'd implement this not using the float mechanism.
  fantasai: Which float is going higher than the initial latter, iank ?

  Rossen: Another example case.
  Rossen: Take initial letter. Then a float-left and float-right at
          end of first line.
  Rossen: So first float-left doesn't fit on the first line, so it
          goes below the initial letter.
  Rossen: Then the float-right can't go above the float-left, so it
          gets pushed down as well.
  Rossen: But if we reverse the order, then it would be okay for the
          float-right to be up in the corner? And you think that's not
  fantasai: So imagine the first letter is a regular float with
            clear:left.  This would clear the left float, then force
            the right float to go lower. If you reversed them the
            right float wouldn't be pushed down. What's the difference?
  fantasai: All we're saying here is that you cannot stack a float
            against the initial letter, you have to clear it.
  Rossen: So the complexity in our impl comes from the current model
          assuming you have the bottom of your content, which is
          assumed to be a position in the block direction; none of
          this is allowed to be intruded by floats.
  Rossen: The rest is just geometry on both sides, it's not
  Rossen: Float logic is simple in this case. There's a bottom defined
          as a position (*not* a geometry), then the only geometries
          to take into account are those from floats.

  dbaron: Reminder that the float rules do no in any way reference the
          bottom of line boxes, only the top.
  dbaron: I think to fix this we should *introduce* such a rule.
  dbaron: Right now the top of the float can't be higher than the top
          of the line box containing preceding content.
  dbaron: I think for initial letter the top of a float can't be
          higher than the bottom of a line box that is *prior* to a
          line box containing preceding content.
  dbaron: So if float is anchored in second line, current rules say it
          can't be above top of second line box, or first line box, or
          initial letter line box.
  dbaron: We can fix it to say that it can't be above the top of
          second line box, or bottom of first line box, or bottom of
          initial letter line box.
  dbaron: Then we can worry if we want this bottom rule to depend on
          what area the line box covers, so we can see if right floats
          can pop up or not.
  florian: And you're going on line boxes rather than clearances so
           floats anchored on first line don't necessarily have to
           clear the initial letter?
  dbaron: Yeah.

  fantasai: Alternative is, in terms of clearances, the first line box
            includes the first letter, there's nothing to clear, it's
            just in-flow content; but the part of the initial letter
            that drops below the first line box is an exclusion area
            that needs to be cleared if you're floating to the start
  dauwhe: Seems straightforward to me.
  <astearns> +1 from me
  florian: So the effect of these two models in usage, both do the
           same thing for left floats, different for right floats.
  florian: fantasai's lets right floats go high, david's doesn't.
  dbaron: I prefer linebox model because I'm hesitant to tie it too
          much into the float model. I think too many things can go
          wrong if initial letters get tied into floats, should be
          associated with lines.
  fantasai: I think we still need two lineboxes model.
  Rossen: Exclusions by current definition - if I created A to be an
          exclusion positioned like that (bottom half), a left float
          on second line will still be next to the initial letter.
  florian: It's an exclusion you must clear.
  Rossen: We don't have that right now. We have exclusions that clear
          start, end, max.
  Rossen: So if this was exclusions would it be exclude start or end?
  fantasai: Whatever float would do.
  Rossen: So start.
  Rossen: So you're saying that nothing can be placed to the start of

  fantasai: Right.
  Rossen: So if you have a left float here, what rule makes it clear?
  florian: The new rule we add, that left floats must clear it.
  Rossen: I think what you need here is not exclusions, but a
          clear-after behavior - say "after me, I want to clear all
          left floats".
  florian: So if dotted blue box has clear-after:left, left floats
           must clear it.
  Rossen: And I assert that has nothing to do with exclusions.
  TabAtkins: If the float is anchored in the middle of the first line,
             how does this give us Blue 1 rather than Blue 3?
  fantasai: You do a hypothetical layout to figure out where the
            anchor is, then place the float, *then* place the initial
            letter (which establishes the exclusion/clear-after)
            which'll affect subsequent lines.

  astearns: Two outcomes. One places right floats without caring about
            the initial letter, one does care. Can we resolve on which
            outcome we want, then work out how to specify it?
  TabAtkins: No, objections are about the mechanics.
  tantek: I think it's important to not degrade behavior from the
          legacy float stuff.
  tantek: With a very tall initial letter, it'll look extra bad.
  TabAtkins: If you put the float before your content, everything
             works fine.
  <dbaron> Use of floats for what they were intended for is pretty
           rare on the Web, outside of wikipedia...
  fantasai: Yeah, this is mostly about if the float shows up inside
            the content, such that it's on the second line. I think
            it's okay to treat that as an edge case.

  Current Whiteboard Picture:

  florian: I don't know if this is a separate convo.
  florian: If we take first blue, it looks good because the float is
           taller than the letter.
  florian: If it's shorter, does it still look good?
  fantasai: I think it's fine, and in most cases it'll be taller.
  fantasai: I think we agree on the renderings here. We should resolve
            on that.
  fantasai: We just disagree on whether right floats have to clear or

  fantasai: So for left floats: 'clear' doesn't apply to initial
  Rossen: Why doesn't it apply?
  dbaron: It's an inline.
  RESOLVED: clear doesn't apply to initial letters

  fantasai: Initial letter mustn't overlap floats, just like lineboxes
  RESOLVED: Initial letters must not overlap floats (just like
            lineboxes don't).

  <fantasai> https://github.com/w3c/csswg-drafts/issues/689
  fantasai: If a linebox moves down or is shortened due to a float,
            initial letter moves with it, and vice versa.
  florian: Not sure if there's space for initial letter but not rest
           of line, it should move down with the line...
  tantek: This is just linebreaking rules. If you have [T]he, and Th
          fits but not e, the whole thing moves down. But if you have
          [A], then it can stay on the line by itself and subsequent
          content moves down to next line, because space introduces
          linebreaking opportunity.
  <fantasai> Exact prose is in
  RESOLVED: If a linebox moves down or is shortened due to a float,
            initial letter moves with it, and vice versa.

  fantasai: An inline-start float originating on first line goes
            between initial letter and containing block edge. (It
            doesn't split the initial letter and the subsequent text.)
  florian: This is how floats works, if the initial letter isn't a
  RESOLVED: An inline-start float originating on first line can go
            between initial letter and containing block edge. (It
            can't split the initial letter and the subsequent text.)

  fantasai: An inline-start float originating on subsequent impacted
            lines must clear the initial letter.
  RESOLVED: An inline-start float originating on subsequent impacted
            lines must clear the initial letter.

  fantasai: inline-end floats that start on subsequent impacted lines
            are still an open issue.
  myles: first-line inline-end floats?
  florian: I think they're the same.
  myles: Let's talk about it later.
  fantasai: Okay, so mark an open issue in the draft about inline-end
  ACTION: Mark interaction of inline-end floats and initial letter as
          open issue

  fantasai: This should close #360 and #689.

  fantasai: Should initial-letter apply to inside list markers?
  fantasai: Discuss over lunch

<br type=lunch dur=1hr>
Received on Friday, 20 July 2018 00:27:26 UTC

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