diff --git a/CSSGapDecorations/explainer.md b/CSSGapDecorations/explainer.md index add65cc6..a8017760 100644 --- a/CSSGapDecorations/explainer.md +++ b/CSSGapDecorations/explainer.md @@ -218,29 +218,56 @@ default; changing this behavior is covered in a later section of this document. Authors may adjust the positions of endpoints relative to gap intersections, either as a fixed distance or as a percentage of the width of the intersection. -The "zero point" is the edge of the intersection, with positive values extending -into the intersection and negative values receding from it. +The "zero point" is the edge of the intersection, with negative values extending +into the intersection and positive values receding from it. ```css -.outset-0px { - column-rule-outset: 0px; +.inset-0px { + column-rule-inset: 0px; } ``` - + ```css -.outset-5px { - column-rule-outset: 5px; +.inset-5px { + column-rule-inset: -5px; } ``` - + ```css -.outset-negative-5px { - column-rule-outset: -5px; +.inset-negative-5px { + column-rule-inset: 5px; } ``` - + + +Authors may also adjust endpoints more granularly, making a distinction between "edge" +endpoints (which fall on the edge of the container), +and "interior" endpoints (any endpoint that is not an "edge"). + +```css +.edge-interior-insets { + column-rule-edge-inset: 0px; + column-rule-interior-inset: 5px; +} +``` + + + +Similarly, authors can have even more granular control to adjust the positions of endpoints, +making a distinction between "start" and "end" endpoints, in addition to the "edge" and "interior" distinction. + +```css +.start-end-edge-interior-insets { + column-rule-start-edge-inset: 0px; + column-rule-end-edge-inset: 8px; + column-rule-start-interior-inset: 0px; + column-rule-end-interior-inset: 8px; +} +``` + + ### Interaction with spanning items @@ -251,7 +278,7 @@ In the latter case, gap decorations paint "behind" items in the container. ```css .t-intersections { gap-rule-break: spanning-item; - gap-rule-outset: 0px; + gap-rule-inset: 0px; } ``` @@ -259,7 +286,7 @@ In the latter case, gap decorations paint "behind" items in the container. ```css .all-intersections { gap-rule-break: intersection; - gap-rule-outset: 0px; + gap-rule-inset: 0px; } ``` @@ -446,7 +473,7 @@ example ```css .container { rule: 1px solid black; - column-rule-outset: 0px; + column-rule-inset: 0px; } ``` diff --git a/CSSGapDecorations/images/example-column-outset-0px.png b/CSSGapDecorations/images/example-column-inset-0px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-0px.png rename to CSSGapDecorations/images/example-column-inset-0px.png diff --git a/CSSGapDecorations/images/example-column-outset-50percent.png b/CSSGapDecorations/images/example-column-inset-50percent.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-50percent.png rename to CSSGapDecorations/images/example-column-inset-50percent.png diff --git a/CSSGapDecorations/images/example-column-outset-minus-5px.png b/CSSGapDecorations/images/example-column-inset-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-minus-5px.png rename to CSSGapDecorations/images/example-column-inset-5px.png diff --git a/CSSGapDecorations/images/example-column-outset-5px.png b/CSSGapDecorations/images/example-column-inset-minus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-5px.png rename to CSSGapDecorations/images/example-column-inset-minus-5px.png diff --git a/CSSGapDecorations/images/example-column-interior-inset-5px.png b/CSSGapDecorations/images/example-column-interior-inset-5px.png new file mode 100644 index 00000000..60b7e26e Binary files /dev/null and b/CSSGapDecorations/images/example-column-interior-inset-5px.png differ diff --git a/CSSGapDecorations/images/example-column-start-end-edge-interior-insets.png b/CSSGapDecorations/images/example-column-start-end-edge-interior-insets.png new file mode 100644 index 00000000..9e1b64af Binary files /dev/null and b/CSSGapDecorations/images/example-column-start-end-edge-interior-insets.png differ diff --git a/CSSGapDecorations/images/example-segment-outset-0px.png b/CSSGapDecorations/images/example-segment-inset-0px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-0px.png rename to CSSGapDecorations/images/example-segment-inset-0px.png diff --git a/CSSGapDecorations/images/example-segment-outset-minus-5px.png b/CSSGapDecorations/images/example-segment-inset-minus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-minus-5px.png rename to CSSGapDecorations/images/example-segment-inset-minus-5px.png diff --git a/CSSGapDecorations/images/example-segment-outset-plus-5px.png b/CSSGapDecorations/images/example-segment-inset-plus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-segment-outset-plus-5px.png rename to CSSGapDecorations/images/example-segment-inset-plus-5px.png