[css-gaps-1] Insets instead of outsets

[kbabbitt]

This came up while I was working on spec changes for the resolutions we took in #12024 (comment) and #12603 (comment).

Right now, fine adjustments to gap decoration endpoints are specified as outsets. At the edges of containers, positive values protrude beyond the content edge, negative values recede from it. At interior intersections, positive values protrude into the intersection, negative values recede from it. See the examples starting here: https://www.w3.org/TR/css-gaps-1/#example-74d806b0

The reasoning for representing these as outsets fell out of the fact that column-rule-outset and row-rule-outset each took a single value. I wanted that single value to, by default, do the most commonly wanted thing for a grid: decorations flush with the content edges and continuing through intersections. I achieved that by setting the initial value to 50% and defining the percentage basis to be the crossing gap width at an intersection and 0 at the container edge. (The same examples linked previously illustrate this.)

The key assumptions underpinning that reasoning were negated by the resolutions we took in 12024 and 12603. We will now have separate properties for offsets at edges versus interior intersections, and percentages will resolve with the same basis for both. Given those changes, I think expressing these adjustments as insets rather than outsets would be more intuitive:

---

column-rule-break: intersection;
column-rule-inset: 0px;

---

column-rule-break: intersection;
column-rule-inset: 5px;

---

column-rule-break: intersection;
column-rule-inset: -5px;

---

column-rule-break: intersection;
column-rule-edge-inset: 0px;
column-rule-interior-inset: 50%;

---

[jav099]

Looking at the last example, does this mean that when inset is set to a px value, a positive value means going "in", negative value means going "out", but when inset is set to a %, it still relates to the % of the crossing gap (i.e. going "out")?

[kbabbitt]

Hmm, that's a good point, and a tricky one. It would be really confusing, and likely problematic for things like calc(), if positive values went "in" for px and "out" for %. On the other hand, that means the value to reach to the center of the intersection - which would be the initial value for *-interior-inset - would be -50%, which is a little weird.

[jav099]

Yeah it's not very intuitive if px and % go in different directions. But as you say, negative % is also weird. Perhaps % just doesn't make as much sense now that its insets?

[SebastianZ]

I think it makes sense to introduce an auto keyword and make it the initial value. It would still compute to 0 at the edges and to -50% at the intersections, but avoids the awkwardness of negative values for the general use cases.
And I'd argue that use cases for negative percentages are very limited besides the initial value and maybe animations from and to that initial value.

And percentages for the edges might refer to the crossing gap width of the first intersection when going inwards. That means, percentages for the interior and edge values would be reflected.
Alternatively, they could be disallowed for the edge values for the time being.

---

I need to get myself up to date again. Though some years ago I suggested that the lengths of the rules could be defined using percentages, where the percentages would "refer to the length of the gutters".

Not to derail this discussion, though I wanted to note that there are also use cases for letting percentages refer to the content size instead of the gap width.

Sebastian

[tabatkins]

It would be really confusing, and likely problematic for things like calc(), if positive values went "in" for px and "out" for %

It's not problematic for calc() as long as it's defined in a consistent way, where the %s resolve against a negative length. background-position works somewhat similarly, where the % is just resolved against a non-obvious length (container size minus image size).

But I agree that it's confusing and we shouldn't do that. ^_^

[kbabbitt]

I believe the resolutions we took in #8402 commit us to making this change. I think an auto keyword that resolves to 0 on the edge properties and -50% on the interior properties makes sense.

@jav099 could you please incorporate this change into the other updates you're making for the gap decoration outset properties?