Skip to content

[css-multicol] image support for column rules #5080

@MatsPalmgren

Description

@MatsPalmgren

From the discussion in #2748 it seems that image support for column rules is a requested feature.
I propose to add three new properties to support that:

  • column-rule-image-source: none | <image>
  • column-rule-image-slice: [<number [0,∞]> | <percentage [0,∞]>]{1,2} for slicing the image into three regions. The initial value, 0, makes the whole image fill the rule area as specified by column-rule-image-repeat. A non-zero value defines an area at the start/end of the rule area that isn't stretched (as demonstrated in the testcase below).
  • column-rule-image-repeat: stretch | repeat | round | space

Here's a testcase demonstrating these properties. And here's a video of how it would render.

I think we can start with these properties for now and consider column-rule-image-width/outset at a later stage. They seem less important and I'd prefer to look at the column-rule-extent / column-rule-inset in #2748 first, in case those might affect the decision/design.

(If we decide to add row-rule-* properties in #2748 then these three properties should also be added in that axis of course.)

Fwiw, the above three properties should be fairly easy to implement in UAs that already support the corresponding border-image-* properties since you can leverage existing rendering code for those.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions