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

I was playing a bit more with the thought of how intersections could be handled. I did so from a design point of view. Once all questions are clarified, I'm happy to express this in syntax form.

Here's what I came up with so far:

- The rules are sliced into three parts, a start part, a middle part, and an end part, similar to border images, as @MatsPalmgren outlined above.
- The extent of a rule is defined by an inner and an outer part, which are independent from each other.
  - The inner part is specified by how intersections of gaps are handled and how they align to each other.
  - The outer part is specified by either the content or the content box.
- There are three ways for how intersections can be handled:
  1. Keep them empty, i.e. only extend the rules up to the segment edges.
  2. Extend the rules up to where they intersect.
  3. Ignore interections and let the rules extend over the whole content. (This option probably only makes sense if all gaps extend over the whole content, i.e. in grid layout, otherwise they would be cut off in the middle.)
- Horizontal and vertical rules are handled individually, also in regard of their extent.

## Examples

I have created some mockups to illustrate the different types of extents. The colors and patterns are just for illustration purposes, so please bare with me!

Some general notes on them: All the examples paint the horizontal rules above the vertical ones and their middle part is repeated.

### Extend up to center of gap

Grid layout, no outer extent:

![Extend up to center of gap (Grid layout)](https://user-images.githubusercontent.com/958943/83362743-ea05f380-a393-11ea-84d7-285781107499.png)

Masonry/Flexbox layout, no outer extent:

![Extend up to center of gap (Masonry/Flexbox layout)](https://user-images.githubusercontent.com/958943/83362748-ebcfb700-a393-11ea-9b96-5eb90bd2c697.png)

### Extend up to edge of segment

Grid layout, no outer extent.

![Extend up to edge of segment](https://user-images.githubusercontent.com/958943/83362745-eb372080-a393-11ea-95fb-97e194560bb8.png)

### Extend over whole content

Grid layout, no outer extent.

![Extend over whole content](https://user-images.githubusercontent.com/958943/83362746-eb372080-a393-11ea-9929-780e4322f240.png)

### Extend over whole content box

Grid layout.

![Extend over whole content box](https://user-images.githubusercontent.com/958943/83363647-589a7f80-a39b-11ea-9536-2e999de14096.png)

## Open questions

- When rules are overlapping, it needs to be defined whether the horizontal or the vertical rules are painted last, and if that is also something that should be controllable by authors.
- When applied to Flexbox or Masonry layout, it needs to be clarified whether the rules extend up to the longer or the shorter tracks. (In my example I chose the longer one.)
- When extending over the whole content and ignoring intersections, it needs to be specified whether they always extend over the whole content or only up to next T-intersection. (In the examples they only extend up to the T-intersections.)
- It needs to be defined how gap images of different widths are handled in regard of the intersections when extending them to the center of the gap.

I surely missed a few questions. So please let me know when there are more things that need clarification.

Sebastian

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

Received on Sunday, 31 May 2020 23:14:36 UTC