Skip to content

[css-borders-4] naming of the "not curved" (90deg convex) keyword for corner-shape #11607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
noamr opened this issue Jan 30, 2025 · 6 comments · May be fixed by #12033
Open

[css-borders-4] naming of the "not curved" (90deg convex) keyword for corner-shape #11607

noamr opened this issue Jan 30, 2025 · 6 comments · May be fixed by #12033

Comments

@noamr
Copy link
Collaborator

noamr commented Jan 30, 2025

Following up on #10993

When the corner shape is a fully convex angle (as in, it's not curved at all, superellipse(infinity)), we resolved on referring to it as none.
I think a better name for this is straight. It's not that the corner has no shape, the corner has a straight shape.

I put it as straight in the draft but we can resolve on this separately if we are ok with it, bring it back to none, or come up with something different.

This keyword is important for animating corner-shape.

@noamr noamr changed the title [css-shapes-2] naming of the "not curved" keyword for corner-shape [css-borders-4] naming of the "not curved" keyword for corner-shape Jan 30, 2025
@noamr noamr changed the title [css-borders-4] naming of the "not curved" keyword for corner-shape [css-borders-4] naming of the "not curved" (90deg convex) keyword for corner-shape Jan 30, 2025
@tabatkins
Copy link
Member

I agree that using a different keyword than none is better here, now that values are animatable. I think straight is reasonable.

@jsnkuhn
Copy link

jsnkuhn commented Jan 31, 2025

Definitely agreed a none shape option doesn't really make sense. There is definitely a shape just a common one.

Going to throw square on the pile as I think it better represents the actual shape of the default corner. I guess technically rectangle might be more correct if the size of the defined corner has a different width than height but square is close enough and it's shorter.

straight makes me think of a straight line which this isn't. It's a 90deg angle.

Wouldn't this shape also be the initial value: #11623

@jsnkuhn
Copy link

jsnkuhn commented Feb 16, 2025

To me a none corner implies that it would look like this:

Image

potentially confusions with "straight":

  • straight is a homophone for "strait" the body of water (like the Strait of Gibraltar) https://en.wikipedia.org/wiki/Strait

  • There's also the phrase "dire straits" which gives the root word "strait" a third meaning.

  • straight is also relatively difficult to spell. Easy to mix up the a and i. (I've literally done this a number of times while writing this post)

  • in isolation a straight corner to me would look like angle/bevel. As it is a single straight line. the shape we are talking about is 2 straight lines connecting at 90deg

Why "square":

  • the isolated corner looks like a carpenters/framing square (https://en.wikipedia.org/wiki/Steel_square)

  • possible negative: i guess this could be confused with the notch shape which you could call an inset square??

@smfr
Copy link
Contributor

smfr commented Mar 30, 2025

I'm OK with square or straight with a preference for the former. "Straight" is generally used to describe a single line, without bends. But here we have a 90deg bend.

@SebastianZ
Copy link
Contributor

I'd also vote for square, rectangle, or even rectangular and dislike straight for the reasons mentioned by the others.

possible negative: i guess this could be confused with the notch shape which you could call an inset square??

I think the keywords distinguish the shape clearly enough from a notch shape. And I also believe, notch is fine for an inset rectangular shape.

Sebastian

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-borders-4] naming of the "not curved" (90deg convex) keyword for `corner-shape` , and agreed to the following:

  • RESOLVED: Use square for opposite of notch
The full IRC log of that discussion <TabAtkins> noamr: right now this value is named "straight", but i dont like it
<TabAtkins> noamr: this is when we treat it as a non-rounded rect
<TabAtkins> noamr: other proposals are "square" or "none"
<TabAtkins> noamr: or "rect"
<TabAtkins> noamr: i think in the issue consensus was for "square"
<TabAtkins> astearns: and Simon prefers square
<fantasai> TabAtkins: Prefer square to straight. Straight sounds like it means bevel.
<TabAtkins> astearns: any concerns over choosing square?
<fantasai> RESOLVED: Use square for opposite of notch

noamr added a commit to noamr/csswg-drafts that referenced this issue Apr 1, 2025
- Use `square` instead of `straight`
- Use the log2 version for the `superellipse()` parameter
- Interpolate symetrically from the middle.

Closes w3c#11607
Closes w3c#11608
Closes w3c#11609
@noamr noamr linked a pull request Apr 1, 2025 that will close this issue
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Apr 2, 2025
See resolution:
w3c/csswg-drafts#11607 (comment)

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
R=fs@opera.com
aarongable pushed a commit to chromium/chromium that referenced this issue Apr 2, 2025
See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Apr 2, 2025
See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Apr 2, 2025
See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}
ChunMinChang pushed a commit to ChunMinChang/gecko-dev that referenced this issue Apr 7, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Apr 8, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Apr 8, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fsopera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthalchromium.org>
Reviewed-by: Fredrik Söderquist <fsopera.com>
Cr-Commit-Position: refs/heads/main{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789

UltraBlame original commit: 0ade8ec792c25737a00e0f89e049851972d878dd
globau pushed a commit to globau/firefox-test that referenced this issue Apr 8, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Apr 8, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fsopera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthalchromium.org>
Reviewed-by: Fredrik Söderquist <fsopera.com>
Cr-Commit-Position: refs/heads/main{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789

UltraBlame original commit: 0ade8ec792c25737a00e0f89e049851972d878dd
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Apr 8, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fsopera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthalchromium.org>
Reviewed-by: Fredrik Söderquist <fsopera.com>
Cr-Commit-Position: refs/heads/main{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789

UltraBlame original commit: 0ade8ec792c25737a00e0f89e049851972d878dd
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Apr 9, 2025
… a=testonly

Automatic update from web-platform-tests
Rename corner-shape: straight to square

See resolution:
w3c/csswg-drafts#11607 (comment)

R=fs@opera.com

Bug: 407751758
Change-Id: Ieadd0d1915c0965f484d5a93262fc76634382313
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1441427}

--

wpt-commits: 7f29264e2ae16d05f72faba0b1538e6eb3dd52aa
wpt-pr: 51789
copybara-service bot pushed a commit to ChromeDevTools/devtools-frontend that referenced this issue Apr 20, 2025
Backend CL: https://chromium-review.googlesource.com/c/chromium/src/+/6421727
CSSWG resolution: w3c/csswg-drafts#11607 (comment)

Bug: 402346406
Change-Id: I809b190ca383acb42b4adf88d3a8ca53f30368d7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6444664
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Tuesday Morning
Development

Successfully merging a pull request may close this issue.

6 participants