-
Notifications
You must be signed in to change notification settings - Fork 765
Description
This issue is an explanation and discussion touchpoint for changes being drafted in PR 13299.
One thing we wanted to enable in Gaps 1 is allowing decorations to respond to conditions such as spanning items in Grid. Rather than having decorations run all the way across the grid and "beneath" spanning items, an author might want decorations to terminate in places where spanners form visible T intersections. Contrast the following two examples:
Currently, to handle this, the spec has a concept called Gap Intersection Points:
A gap intersection point is defined to exist in each of the following locations:
- The center of the start or end edge of a gutter.
- The center of an intersection between gaps in different directions.
In the examples above, the Gap Intersection Points are placed as follows:
This definition seems natural for Grid at first, but it ends up being awkward in other layouts. #12784 has the best examples of this. Whereas Grid is structured as a single 2D container, wrapped Flex and Multicol layouts are structured in two layers: a flex line or multicol line contains a set of boxes which can be separated by gutters, and these line containers are themselves optionally separated by their own gutters. Flex structurally is this:
But Gap Intersection Points would call for this:
Which creates some tension in the mental model. This is exacerbated by the fact that we've seen cases where authors create layouts that resemble grids but actually use Flex, for example #12602 (comment):
Several of us discussed these issues at TPAC last year (see #12784 (comment)) and came up with a different mental model for handling these cases. Instead of Gap Intersection Points, we define Segment Endpoints approximately as follows (details under discussion in the PR linked above):
- Bounds of a Gap: For each gap, endpoints are created at its two bounds:
- At the start of the gap, a start segment endpoint is created.
- At the end of the gap, an end segment endpoint is created.
- Within a Gap: When a cross/perpendicular gap touches a given gap (either overlapping it, or abutting it without overlapping),
two endpoints are created which align with the boundaries of the cross/perpendicular gap:
- The earlier boundary creates an end segment endpoint.
- The later boundary creates a start segment endpoint.
The Grid example at the top of this comment would result in segment endpoints as follows; start endpoints in cyan and end endpoints in magenta:
In Flex we get the following:
Multicol with and without spanners:
Note that this change is largely just a shift in the mental model and does not necessarily affect implementation. However, this shift unlocks a couple of powerful simplifications:
- Grid, Flex, and Multicol layouts that look identical visually produce the same set of reference points for drawing decorations. This makes for more consistent expectations and behaviors when the same set of parameters (decoration break settings, inset values) are applied to different layouts.
- Intersection points had this quirk where the location of the intersection point corresponded to an inset value of 0 for edge intersection points but -50% (i.e. half the width of the crossing gap) for interior intersection points. With segment endpoints, the location of the segment endpoint consistently maps to an inset value of 0.






