Re: [csswg-drafts] [css-shapes-2] Add a way to change an element's shape (#6997)

It looks like we won't be able to have "one property to rule them all". Though @smfr's approach still seems like a great approach to handle the border shape issue.
And I agree with him that `border-shape` fits best here. As the background's shape can be adjusted to follow the border area via `background-clip: border-area`. And there is also a [`shape-inside` property defined in CSS Round Display 1](https://drafts.csswg.org/css-round-display/#shape-inside-property) (that spec. really needs a rebranding as it's about arbitrary display shapes), which affects the content area and also takes a `<basic-shape>`, and might possibly also take a `border-area` value.

With those three, authors can basically change the whole element's shape.

Regarding the suggested syntax for `border-shape`, I think it has a few mistakes in it based on how I understand @smfr's descriptions and it might also see some additions and relaxationst. Therefore, my interpretation of this is,

- the shape is meant to _either_ be defined via a `<corner-shape>`, the single- or the double-`<basic-shape>` syntax, but no combinations of those variants are allowed.
- the different variants are not meant to be surrounded by parentheses.
- corner shape syntax should follow what's defined in CSS Borders 4. (Currently, we only have `round` and `angle`, see https://github.com/w3c/csswg-drafts/issues/10747#issuecomment-2295384616) about the status of `scoop` and `notch` ‒ I'd be happy to add them back in.)
- the order of values is irrelevant and besides the shape definition itself, nothing is required.
- the line width may also be set for the double-`<basic-shape>` syntax, then only setting the width of the border box.

Given those points, I think the syntax of `border-shape` should look like this:

```ebnf
border-shape: [ <corner-shape> || <border-radius> ]
              | [ <basic-shape> [ <line-width> || <border-line-style> || <geometry-box> ] ]
              | [ <basic-shape> [ <line-width> || <geometry-box> ] ]{2}

<corner-shape> = [ round | angle ]{1,4}
<border-line-style> = dotted | dashed | solid
<border-radius> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
```

Open questions are:

- How does this interact with other properties like `corner-shape`, `border-radius`, `border-*-width`, `border-*-style`, etc.? Is it meant to be a shorthand for them?
- May [`<line-style>`](https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style) be used instead of the restricted `<border-line-style>`?
- How are line styles meant to be drawn?
- Are the shapes restricted somehow to avoid overly huge ink overflows?

Sebastian

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


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

Received on Tuesday, 10 September 2024 22:00:13 UTC