Skip to content

Commit eab4363

Browse files
svgeesussvgeesus
committed
[css-gaps][editorial] markup fixes for FPWD
1 parent 939e370 commit eab4363

File tree

1 file changed

+103
-70
lines changed

1 file changed

+103
-70
lines changed

‎css-gaps-1/Overview.bs

+103-70
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
Title: CSS Gap Decorations Module Level 1
33
Shortname: css-gaps
44
Level: 1
5-
Status: ED
5+
Status: FPWD
6+
Prepare for TR: yes
7+
Date: 2025-04-17
68
Group: csswg
79
Work Status: exploring
810
Repository: w3c/csswg-drafts
911
URL: https://drafts.csswg.org/css-gaps-1
12+
TR: https://www.w3.org/TR/css-gaps-1/
1013
Editor: Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
1114
Abstract: This module introduces several properties to add row and column gap decorations to container layout types such as grid and flex.
1215
</pre>
@@ -61,8 +64,10 @@ Gap decorations {#gap-decorations}
6164
column-rule: 6px solid blue;
6265
}
6366
</pre>
64-
<img src="images/example-grid-with-spans.png">
65-
<figcaption>A grid with spanning items and gap decorations.</figcaption>
67+
<figure>
68+
<img alt="" src="images/example-grid-with-spans.png">
69+
<figcaption>A grid with spanning items and gap decorations.</figcaption>
70+
</figure>
6671
</div>
6772

6873
<div class="example">
@@ -76,8 +81,10 @@ Gap decorations {#gap-decorations}
7681
column-rule: 6px solid blue;
7782
}
7883
</pre>
79-
<img src="images/example-flex.png">
80-
<figcaption>A flexbox with gap decorations.</figcaption>
84+
<figure>
85+
<img alt="" src="images/example-flex.png">
86+
<figcaption>A flexbox with gap decorations.</figcaption>
87+
</figure>
8188
</div>
8289

8390
Layout and painting {#layout-painting}
@@ -119,14 +126,16 @@ Layout and painting {#layout-painting}
119126
border: 1px dashed black;
120127
}
121128
</pre>
122-
<img src="images/example-gap-intersection-grid.png">
123-
<figcaption>
124-
Locations of <a>gap intersection points</a> in a grid with spanning items.
125-
Note the presence of <a>gap intersection points</a>
126-
even where a spanning item touches the edge of a container,
127-
and where an intersection is flanked by spanning items on either side
128-
(for example between #2 and #6, or #4 and #7).
129-
</figcaption>
129+
<figure>
130+
<img alt="" src="images/example-gap-intersection-grid.png">
131+
<figcaption>
132+
Locations of <a>gap intersection points</a> in a grid with spanning items.
133+
Note the presence of <a>gap intersection points</a>
134+
even where a spanning item touches the edge of a container,
135+
and where an intersection is flanked by spanning items on either side
136+
(for example between #2 and #6, or #4 and #7).
137+
</figcaption>
138+
</figure>
130139
</div>
131140

132141
<div class="example">
@@ -142,13 +151,15 @@ Layout and painting {#layout-painting}
142151
border: 1px dashed black;
143152
}
144153
</pre>
145-
<img src="images/example-gap-intersection-flex.png">
146-
<figcaption>
147-
Locations of <a>gap intersection points</a> in a flexbox.
148-
Note the presence of <a>gap intersection points</a> at edges of the container,
149-
and the presence of two <a>gap intersection points</a> in close proximity where
150-
items in adjacent rows don't quite line up with each other (between #2, #3, #4, and, #5).
151-
</figcaption>
154+
<figure>
155+
<img alt="" src="images/example-gap-intersection-flex.png">
156+
<figcaption>
157+
Locations of <a>gap intersection points</a> in a flexbox.
158+
Note the presence of <a>gap intersection points</a> at edges of the container,
159+
and the presence of two <a>gap intersection points</a> in close proximity where
160+
items in adjacent rows don't quite line up with each other (between #2, #3, #4, and, #5).
161+
</figcaption>
162+
</figure>
152163
</div>
153164

154165
Note: [[CSS-ALIGN-3#column-row-gap]] defines
@@ -226,7 +237,7 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
226237
However, the specific phrasing of the definition
227238
is also intended to address cases such as the one below:
228239
<br>
229-
<img src="images/flex-offset-gap.png">
240+
<img alt="" src="images/flex-offset-gap.png">
230241
<br>
231242
The four marked <a>gap intersection points</a> fall along a common gap centerline.
232243
However, because item 3 is slightly wider than items 1 and 5,
@@ -328,11 +339,13 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
328339
rule-outset: 0px;
329340
}
330341
</pre>
331-
<img src="images/example-break-none-grid.png">
332-
<figcaption>
333-
Grid <a>gap decorations</a> with no breaks.
334-
Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
335-
</figcaption>
342+
<figure>
343+
<img alt="" src="images/example-break-none-grid.png">
344+
<figcaption>
345+
Grid <a>gap decorations</a> with no breaks.
346+
Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
347+
</figcaption>
348+
</figure>
336349
</div>
337350

338351
<div class="example">
@@ -347,11 +360,13 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
347360
rule-outset: 0px;
348361
}
349362
</pre>
350-
<img src="images/example-break-spanning-item-grid.png">
351-
<figcaption>
352-
Grid <a>gap decorations</a> broken at <a>gap intersection points</a>
353-
that are not adjacent to spanning items.
354-
</figcaption>
363+
<figure>
364+
<img alt="" src="images/example-break-spanning-item-grid.png">
365+
<figcaption>
366+
Grid <a>gap decorations</a> broken at <a>gap intersection points</a>
367+
that are not adjacent to spanning items.
368+
</figcaption>
369+
</figure>
355370
</div>
356371

357372
<div class="example">
@@ -366,11 +381,13 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
366381
rule-outset: 0px;
367382
}
368383
</pre>
369-
<img src="images/example-break-intersection-grid.png">
370-
<figcaption>
371-
Grid <a>gap decorations</a> broken at every <a>gap intersection point</a>
372-
that is not flanked by spanning items on opposing sides.
373-
</figcaption>
384+
<figure>
385+
<img alt="" src="images/example-break-intersection-grid.png">
386+
<figcaption>
387+
Grid <a>gap decorations</a> broken at every <a>gap intersection point</a>
388+
that is not flanked by spanning items on opposing sides.
389+
</figcaption>
390+
</figure>
374391
</div>
375392

376393
<div class="example">
@@ -385,13 +402,15 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
385402
rule-outset: 0px;
386403
}
387404
</pre>
388-
<img src="images/example-break-none-flex.png">
389-
<figcaption>
390-
Flexbox <a>gap decorations</a> with no breaks.
391-
Note that each flex line has its own distinct gaps.
392-
Therefore, <a>gap decorations</a> in adjacent flex lines
393-
are separate from each other even if the gaps happen to line up.
394-
</figcaption>
405+
<figure>
406+
<img alt="" src="images/example-break-none-flex.png">
407+
<figcaption>
408+
Flexbox <a>gap decorations</a> with no breaks.
409+
Note that each flex line has its own distinct gaps.
410+
Therefore, <a>gap decorations</a> in adjacent flex lines
411+
are separate from each other even if the gaps happen to line up.
412+
</figcaption>
413+
</figure>
395414
</div>
396415

397416
Note: Because flexbox has no concept of spanning items,
@@ -412,10 +431,12 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
412431
rule-outset: 0px;
413432
}
414433
</pre>
415-
<img src="images/example-break-intersection-flex.png">
416-
<figcaption>
417-
Flexbox <a>gap decorations</a> broken at every <a>gap intersection point</a>.
418-
</figcaption>
434+
<figure>
435+
<img alt="" src="images/example-break-intersection-flex.png">
436+
<figcaption>
437+
Flexbox <a>gap decorations</a> broken at every <a>gap intersection point</a>.
438+
</figcaption>
439+
</figure>
419440
</div>
420441

421442
Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties {#outset}
@@ -455,10 +476,12 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
455476
column-rule-break: intersection;
456477
}
457478
</pre>
458-
<img src="images/example-column-outset-0px.png">
459-
<figcaption>
460-
An outset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
461-
</figcaption>
479+
<figure>
480+
<img alt="" src="images/example-column-outset-0px.png">
481+
<figcaption>
482+
An outset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
483+
</figcaption>
484+
</figure>
462485
</div>
463486

464487
<div class="example">
@@ -468,11 +491,13 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
468491
column-rule-break: intersection;
469492
}
470493
</pre>
471-
<img src="images/example-column-outset-5px.png">
472-
<figcaption>
473-
An outset of ''5px'' extends the ends of <a>gap decorations</a>
474-
slightly beyond the edges of adjacent items.
475-
</figcaption>
494+
<figure>
495+
<img alt="" src="images/example-column-outset-5px.png">
496+
<figcaption>
497+
An outset of ''5px'' extends the ends of <a>gap decorations</a>
498+
slightly beyond the edges of adjacent items.
499+
</figcaption>
500+
</figure>
476501
</div>
477502

478503
<div class="example">
@@ -482,7 +507,8 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
482507
column-rule-break: intersection;
483508
}
484509
</pre>
485-
<img src="images/example-column-outset-50percent.png">
510+
<figure>
511+
<img alt="" src="images/example-column-outset-50percent.png">
486512
<figcaption>
487513
An outset of ''50%'' - the initial value - extends each end of a <a>gap decoration</a>
488514
halfway into its intersection.
@@ -492,6 +518,7 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
492518
and thus the <a>gap decoration</a> does not extend beyond the bounds of the container.
493519
(Contrast with the previous example, which specified an outset in ''px'' units.)
494520
</figcaption>
521+
</figure>
495522
</div>
496523

497524
<div class="example">
@@ -501,11 +528,13 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
501528
column-rule-break: intersection;
502529
}
503530
</pre>
504-
<img src="images/example-column-outset-minus-5px.png">
505-
<figcaption>
506-
An outset of ''-5px'' shortens the ends of <a>gap decorations</a>
507-
relative to the edges of adjacent items.
508-
</figcaption>
531+
<figure>
532+
<img alt="" src="images/example-column-outset-minus-5px.png">
533+
<figcaption>
534+
An outset of ''-5px'' shortens the ends of <a>gap decorations</a>
535+
relative to the edges of adjacent items.
536+
</figcaption>
537+
</figure>
509538
</div>
510539

511540
When considering the <a>gap intersection points</a> within a given gap,
@@ -574,10 +603,12 @@ Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
574603
column-rule: 6px solid blue;
575604
}
576605
</pre>
577-
<img src="images/example-row-over-column.png">
578-
<figcaption>
579-
Row-over-column gap decoration paint order.
580-
</figcaption>
606+
<figure>
607+
<img alt="" src="images/example-row-over-column.png">
608+
<figcaption>
609+
Row-over-column gap decoration paint order.
610+
</figcaption>
611+
</figure>
581612
</div>
582613

583614
<div class="example">
@@ -586,10 +617,12 @@ Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
586617
row-rule: 6px solid red;
587618
column-rule: 6px solid blue;
588619
</pre>
589-
<img src="images/example-column-over-row.png">
590-
<figcaption>
591-
Column-over-row gap decoration paint order.
592-
</figcaption>
620+
<figure>
621+
<img alt="" src="images/example-column-over-row.png">
622+
<figcaption>
623+
Column-over-row gap decoration paint order.
624+
</figcaption>
625+
</figure>
593626
</div>
594627

595628
Color, style, and width {#color-style-width}

0 commit comments

Comments
 (0)