diff --git a/CSSGapDecorations/explainer.md b/CSSGapDecorations/explainer.md index 57e350a8..3418df26 100644 --- a/CSSGapDecorations/explainer.md +++ b/CSSGapDecorations/explainer.md @@ -240,6 +240,33 @@ into the intersection and negative values receding from it. ``` +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-outsets { + column-rule-edge-outset: 0px; + column-rule-interior-outset: 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-outsets { + column-rule-start-edge-outset: 0px; + column-rule-end-edge-outset: 8px; + column-rule-start-interior-outset: 0px; + column-rule-end-interior-outset: 8px; +} +``` + + + ### Interaction with spanning items Authors may also change the set of intersections where gap decorations break, 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-5px.png b/CSSGapDecorations/images/example-column-inset-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-5px.png rename to CSSGapDecorations/images/example-column-inset-5px.png diff --git a/CSSGapDecorations/images/example-column-outset-minus-5px.png b/CSSGapDecorations/images/example-column-inset-minus-5px.png similarity index 100% rename from CSSGapDecorations/images/example-column-outset-minus-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