[css-gaps-1] Initial editor's draft. #10393 #11115

kbabbitt · 2024-10-30T18:00:36Z

Major changes from the unofficial draft:

Defer gap decoration areas out of Level 1
Drop the direction-relative properties
Generalize *-rule-break to apply to all container types
Remove the join keyword from *-rule-outset and fold its behavior into *-rule-break
Define algorithms for:
- Determining gap decoration endpoints
- Expanding repeaters in color/style/width properties

- Defer out gap decoration areas - Remove direction-relative properties - Flesh out definitions and algorithms - Add examples

Plus minor editorial changes.

alisonmaher · 2024-11-04T17:16:47Z

Drop the direction-relative properties

I can't remember, was this based on feedback from the working group?

kbabbitt · 2024-11-04T17:40:30Z

Formatted version of draft can be found here: https://kbabbitt.github.io/css-gap-decorations/pr-11115/Overview.html

kbabbitt · 2024-11-04T17:43:03Z

Drop the direction-relative properties

I can't remember, was this based on feedback from the working group?

It was based on feedback from the issue discussion.

#10393 (comment)

(possibly?) add main-rule and cross-rule for Flexbox (personally I'd prefer to just use row-rule and column-rule)

#10393 (comment)

Me too. There is no main-gap or cross-gap property, so I don't think we need main-rule or cross-rule either.

KurtCattiSchmidt

Looks great overall, mostly just nits

KurtCattiSchmidt · 2024-11-04T21:39:00Z

css-gaps-1/Overview.bs

+	<a>multicol containers</a>, <a>flex containers</a>, and <a>grid containers</a>.
+
+	<a>Gap decorations</a> do not take up space.
+	That is, the presence or thickness of a <a>gap decoration</a> will not alter the placement of anything else.


Is "thickness" the best word here? "dimensions" seems more generic. Or should you use "width" to better align with the properties defined below?

For context, this paragraph was copied verbatim from https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules. But I agree with this and the next couple of suggested changes to the wording, so I'll go ahead and make them.

KurtCattiSchmidt · 2024-11-04T21:39:24Z

css-gaps-1/Overview.bs

+	That is, the presence or thickness of a <a>gap decoration</a> will not alter the placement of anything else.
+	If a <a>gap decoration</a> is wider than its gap,
+	any adjacent boxes will overlap the decoration,
+	and in some cases the decoration may possibly extend outside the box of the container.


Nit: "possibly" seems unnecessary

KurtCattiSchmidt · 2024-11-04T21:40:02Z

css-gaps-1/Overview.bs

+	and in some cases the decoration may possibly extend outside the box of the container.
+	<a>Gap decorations</a> are painted just above the border of the container.
+	For scrollable containers,
+	note that while the border and background of the container obviously aren't scrolled,


Nit: "obviously" seems unnecessary

KurtCattiSchmidt · 2024-11-04T21:40:40Z

css-gaps-1/Overview.bs

+
+	A <dfn>gap intersection point</dfn> exists in each of the following locations:
+	<ul>
+		<li>The center of an intersection between a gap and the content edge of the container.


These should have closing </li>'s

Added throughout.

KurtCattiSchmidt · 2024-11-04T21:41:37Z

css-gaps-1/Overview.bs

+		Name: column-rule-break, row-rule-break
+		Value: ''intersection'' | ''spanning-item'' | ''none''
+		Initial: ''spanning-item''
+		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>


Do these need href's?

Nope, Bikeshed will generate them automatically, see https://speced.github.io/bikeshed/#autolinking

KurtCattiSchmidt · 2024-11-04T21:48:02Z

css-gaps-1/Overview.bs

+	<a>gap intersection points</a> which would normally determine their endpoints.
+	The initial value of ''50%'' places the <a>gap decoration</a> endpoint in the center of the intersection.
+	With a value of ''0'', the <a>gap decoration</a> endpoint will coincide with the edge of the intersection.
+	Negative values may be used to recede from the intersection.


Should this indicate direction? "...may be used to recede from the intersection in the negative direction", or is that implied with "recede"?

Changed the wording a bit to clarify. In short: a negative value moves the endpoint away from the center of the intersection.

alisonmaher

Overall, looks good to me, as well, with a few suggestions below.

alisonmaher · 2024-11-05T00:50:35Z

css-gaps-1/Overview.bs

+Color, style, and width {#color-style-width}
+============================================
+
+Lists of values and the ''repeat()'' notation {#lists-repeat}


Would it make sense to move this below the definitions for column-rule-* and row-rule-* or is this the order other specs define repeat/list behavior?

https://drafts.csswg.org/css-grid-1/#grid-definition places the repeat() definition after the grid-template-* properties but before the shorthands. Changed the ordering in this spec to match.

alisonmaher · 2024-11-05T00:51:23Z

css-gaps-1/Overview.bs

+------------------------------------------------------------------------------
+	<pre class='propdef'>
+		Name: gap-rule-paint-order
+		Value: row-over-column | column-over-row


This could probably use a visualization

alisonmaher · 2024-11-05T00:52:00Z

css-gaps-1/Overview.bs

+	<div class="example">
+		The following examples illustrate adjustment of gap decoration endpoints using the 'column-rule-outset' property.
+		<dl>
+			<dt><pre>column-rule-outset: 0px;</pre>


Might make sense to add 50% as an example since it's the default

alisonmaher · 2024-11-05T00:52:33Z

css-gaps-1/Overview.bs

+			At an intersection with another gap
+		<dd>
+			The <a>crossing gap width</a> is the used value of the 'column-rule-width'
+			or 'row-rule-width' property, whichever applies to the other gap.


Not sure what "the other gap" means here

Changed to "the intersecting gap" - is that clearer?

I could also change the <dd> above to "At an intersection with a perpendicular gap" and then change this to "the perpendicular gap." (I was trying to leave room for possible future layouts that have gaps in directions other than vertical or horizontal - for example a hexagonal layout - but could set that aside for now if "perpendicular" would be clearer.)

alisonmaher · 2024-11-05T00:53:04Z

css-gaps-1/Overview.bs

+			or 'row-rule-width' property, whichever applies to the other gap.
+	</dl>
+
+	To <dfn>compute the offset</dfn> for a given <a>gap intersection point</a> within a given gap:


There is more than one intersection point, right? Does that need to be clarified below?

Yes, a given gap will have multiple gap intersection points - at least 2 at each edge of the container, plus 1 anywhere there's an intersection with another gap.

What I'm trying to communicate on this line is that the specific gap intersection point we're talking about is an input to the algorithm below. I'll go back through the algorithms and assign names to the inputs/given values using |...| to make this clearer.

alisonmaher · 2024-11-05T00:57:06Z

css-gaps-1/Overview.bs

+			Let |subset| be a list that initially contains only the item removed from |endpoints|.
+
+		<li>
+			Remove the first item from |endpoints| and add it to the end of |subset|.


"Remove the first item from |endpoints|" is mentioned in the item above. Does it only need to be in one?

It's intentionally in both, though reading the algorithm again I realized I could make it clearer with some edits.

alisonmaher · 2024-11-05T00:57:47Z

css-gaps-1/Overview.bs

+
+	<pre class='propdef'>
+		Name: column-rule-break, row-rule-break
+		Value: ''intersection'' | ''spanning-item'' | ''none''


I think these could likely use some sort of visualization

alisonmaher · 2024-11-05T00:58:44Z

css-gaps-1/Overview.bs

+	note that while the border and background of the container obviously aren't scrolled,
+	the decorations need to scroll along with items in the container.
+
+	A <dfn>gap intersection point</dfn> exists in each of the following locations:


This could likely use some sort of visualization since I'm struggling to understand how the first is an intersection point

alisonmaher · 2024-11-05T01:01:02Z

css-gaps-1/Overview.bs

+	<a>multicol containers</a>, <a>flex containers</a>, <a>grid containers</a>, and <a>masonry containers</a>
+	position child boxes adjacent to each other with gaps, also known as <a>gutters</a>, between them.
+	Each such gap may contain a <dfn>gap decoration</dfn> which authors
+	may use to provide a visual separator between adjacent boxes.


Is "visual separator" the right terminology if gap is defining the separation. Maybe something that notes it is used to style the gaps instead of as the separator itself?

If so, it might make sense to have a link to the definition of gap here (but maybe that wouldn't make sense since I don't think multicol has a gap property)

Is "visual separator" the right terminology if gap is defining the separation. Maybe something that notes it is used to style the gaps instead of as the separator itself?

Re-worded this a bit; let me know what you think.

If so, it might make sense to have a link to the definition of gap here (but maybe that wouldn't make sense since I don't think multicol has a gap property)

The "gutter" link is intended to serve this purpose - this is the term defined in css-align-3 and used in the multicol and grid specs.

alisonmaher · 2024-11-05T01:01:46Z

css-gaps-1/Overview.bs

+
+	<em>This section is not normative.</em>
+
+	[[CSS-MULTICOL-1#column-gaps-and-rules]] allows for rules to be drawn


Should we note that this will eventually be deprecated in favor of this specification?

Yes, but probably not here since this section is not normative. Added a sentence to the section with the normative property definitions.

kbabbitt · 2024-11-05T23:43:01Z

@alisonmaher @KurtCattiSchmidt Thanks for the comments! I've pushed some changes with updates to the text; will work on making more visuals.

kbabbitt added 7 commits October 16, 2024 14:56

Copy spec skeleton from kbabbitt.github.io/css-gap-decorations

e30ca46

Update metadata

2d91db4

Update anchor definition for masonry containers

9292d6d

Major editing pass

47837b8

- Defer out gap decoration areas - Remove direction-relative properties - Flesh out definitions and algorithms - Add examples

Fold the 'join' behavior from outset properties into break properties

39ec713

Plus minor editorial changes.

Move break and outset properties closer to corresponding algorithms

af2aa34

Clarify and simplify repeat algorithm

637a8b2

kbabbitt requested a review from alisonmaher October 30, 2024 18:01

KurtCattiSchmidt suggested changes Nov 4, 2024

View reviewed changes

alisonmaher reviewed Nov 5, 2024

View reviewed changes

Address textual suggestions

9253967

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-gaps-1] Initial editor's draft. #10393 #11115

[css-gaps-1] Initial editor's draft. #10393 #11115

kbabbitt commented Oct 30, 2024

alisonmaher commented Nov 4, 2024

kbabbitt commented Nov 4, 2024

kbabbitt commented Nov 4, 2024

KurtCattiSchmidt left a comment

KurtCattiSchmidt Nov 4, 2024

kbabbitt Nov 5, 2024

KurtCattiSchmidt Nov 4, 2024

KurtCattiSchmidt Nov 4, 2024

alisonmaher Nov 5, 2024

KurtCattiSchmidt Nov 4, 2024

kbabbitt Nov 5, 2024

KurtCattiSchmidt Nov 4, 2024

kbabbitt Nov 4, 2024

KurtCattiSchmidt Nov 4, 2024

kbabbitt Nov 5, 2024

alisonmaher left a comment

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

alisonmaher Nov 5, 2024

alisonmaher Nov 5, 2024

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

kbabbitt Nov 5, 2024

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

alisonmaher Nov 5, 2024

alisonmaher Nov 5, 2024

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

alisonmaher Nov 5, 2024

kbabbitt Nov 5, 2024

kbabbitt commented Nov 5, 2024


		<em>This section is not normative.</em>

		[[CSS-MULTICOL-1#column-gaps-and-rules]] allows for rules to be drawn

[css-gaps-1] Initial editor's draft. #10393 #11115

Are you sure you want to change the base?

[css-gaps-1] Initial editor's draft. #10393 #11115

Conversation

kbabbitt commented Oct 30, 2024

alisonmaher commented Nov 4, 2024

kbabbitt commented Nov 4, 2024

kbabbitt commented Nov 4, 2024

KurtCattiSchmidt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisonmaher left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kbabbitt commented Nov 5, 2024