w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.48k stars 660 forks source link

[css-inline-3] inline boxes and line-fit-edge vs text-box-trim/edge #10834

Open fantasai opened 1 month ago

fantasai commented 1 month ago

Now that we've split line-fit-edge (inherited) and text-box-edge (non-inherited), there's an interesting question of how these two features interact when applied to inline boxes, particularly if they have conflicting "opinions".

Inline boxes currently have two sizes:

In the existing line height model, these two are not the same: block-axis margin/padding/borders are ignored completely for sizing, in favor of line-height.

In the newer line-height model, as part of making inline layout more controllable, we want to use the margin box for sizing. That means line-fit-edge has to trim down the content box, not an imaginary other box, otherwise it's confusing (to size by applying margin/padding to one set of edges, but draw by applying it to a different set of edges). Thus by default, we need to apply trimming to inline boxes.

The initial value of text-box-trim is none. Should we:

  1. Make text-box-edge ignored by inline boxes and always trim to the line-fit-edge?
    • This means authors can only ever use line-fit-edge to control the sizing of an inline box; but line-fit-edge inherits and might not be appropriate if they want to change the value on one item in order to draw its border differently.
  2. Make text-box-edge apply to inline boxes regardless of text-box-trim? (Its initial value already defers to line-fit-edge.)?
  3. Make text-box-edge apply to the sides indicated by text-box-trim only, using line-fit-edge otherwise?
  4. Something else?

What would be useful and understandable?

fantasai commented 1 week ago

In consideration of https://github.com/w3c/csswg-drafts/issues/10904 I think we should go with the third option for the text-box properties: make text-box-edge apply to the sides indicated by text-box-trim on the inline box, and use that to draw the box decorations.

I'm still unsure how we should interact with line-fit-edge, but I think if we go with the principle that the edge used for painting and the edge used for layout should match in the new line layout model, then that means drawing to the line-fit-edge when not trimming.

In other words, the proposal is to go with option 3.

css-meeting-bot commented 1 week ago

The CSS Working Group just discussed [css-inline-3] inline boxes and line-fit-edge vs text-box-trim/edge, and agreed to the following:

The full IRC log of that discussion <matthieud> fantasai: we split property into 2
<matthieud> fantasai: one detail we should clarify : when you paint an inline box what edge to you use to paint the box
<matthieud> fantasai: when text-box-trim is on, we should use the edge to paint the background
<matthieud> fantasai: what edge do we use to size the text ?
<matthieud> fantasai: do we use the painted edge ? or we still size it against the line-fit-edge ?
<matthieud> fantasai: if text-box-trim is off, and we have border/background, what edge to we draw them ? (line-fit or text edges)
<matthieud> fantasai: in the new line box model, we want to use the visible edges of the box to show the contribution of the box
<matthieud> fantasai: to be consistent, text-box-edge should trim an inline box according to text-box-trim. if not, the edge use for drawing and sizing is the edge specified by line-fit-edge
<matthieud> fantasai: otherwise that creates inconsistency between box used for sizing and box used for background
<Rossen16> q?
<fantasai> PROPOSED: text-box-trim trims inline to the text-box-edge; otherwise use the line-fit-edge; both for sizing and for painting
<fantasai> (except when line-fit-edge is normal and we do the weird old thing)
<fantasai> RESOLVED: text-box-trim trims inline to the text-box-edge; otherwise use the line-fit-edge; both for sizing and for painting
<florian> seems fine