Re: [csswg-drafts] [css-multicol] image support for column rules (#5080)

Using [Sebastian Zartner's diagrams of grid line intersection options](https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-636545237), @mirisuzanne and I sketched out the following syntax proposal:

```
column-rule-extent: span-skip | no-skip | span-break | corner-break
```

`column-rule-extent` specifies how column rules are segmented. Each segment is drawn separately, and has its own inset and image application, if any.

* `no-skip` - extends across the grid, going behind grid items
* `span-skip` - extends across the grid, not drawn behind grid items
* `span-break` - spanning items split rule into individual segments
* `corner-break` - split at every intersection

Note: In Flexbox, the cross-axis rules are always segmented between flex lines. 

We thought it made more sense to split out handling of whether lines cross the gaps into a separate property, maybe the `column-rule-inset` property @matspalmgren mentioned earlier:

```
column-rule-inset: nearest | center | farthest | <length>
```

`column-rule-inset` specifies how far a column rule extends into (or recedes from) an intersecting gap (or the edge of the container). 

* `nearest` - Segment not extend into the gap. Computes to zero.
* `center` - Segment extends to the center of the gap.
* `farthest` - Segment crosses the entire gap.
* `<length>` - Segment intrudes by given length.

(At the edge of a container, where there is no gap, a gap is assumed to exist for the purpose of calculating the rule's length. This ensures symmetry.)

The keywords might need some bikeshedding. And/or we might want `rule-outset` instead of `rule-inset`.

Putting it all together, we'd have the following syntaxes for gap styling (with row-/column-/unprefixed variants for each):

```
/* Existing Properties */
column-gap: normal | <length-percentage>
column-rule: <color> || <line-style> || <line-width>
  column-rule-color: <color>
  column-rule-style: <line-style>
  column-rule-width: <line-width>

/* Proposed Properties */
column-rule-extent: span-skip | no-skip | span-break | corner-break
column-rule-inset: nearest | center | farthest | <length>
column-rule-image: <border image syntax but with only one axis>
  rule-image-source: none | <image>
  rule-image-slice: [ <number [0,∞]> | <percentage [0,∞]> ]{1,2}
  rule-image-width: [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]
  rule-image-outset: [ <length [0,∞]> | <number [0,∞]> ]{1,2}
  rule-image-repeat: [ stretch | repeat | round | space ]
```

(See also [open questions](https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-636545237) in @SebastianZ's post, which are follow-up questions we'll need to answer.)

What do people think?


-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-932625867 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 1 October 2021 23:07:50 UTC