Document CSS shape() relative control points and add related Fx146 rel notes #42132
+128
−17
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chrisdavidmills
requested review from
estelle and
pepelsbey
and removed request for
a team
github-actions
bot
added
Content:CSS
Contributor
|
Preview URLs
Flaws (183)Note! 2 documents with no flaws that don't need to be listed. 🎉 URL:
External URLs (1)URL:
|
8 tasks
dipikabh
requested changes
Dec 2, 2025
Contributor
dipikabh
left a comment
dipikabh
left a comment
There was a problem hiding this comment.
Thanks a lot @chrisdavidmills! It's looking really good.
Added a few suggestions for clarifying and simplifying some text. I can take another look after your updates.
Agree - BCD looks good as is.
|
|
||
| #### Relative control points in CSS `shape()` curve commands | ||
|
|
||
| When specifying a [`<curve-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#curve-command) or [`<smooth-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#smooth-command) in a CSS `shape()` function, [`<relative-control-point>`]()s can be used to specify curve control points that are positioned relative to the start point of the current command, end point of the current command, or the top-left (origin) point of the container the shape is being drawn inside. |
Contributor
There was a problem hiding this comment.
We could split this long sentence. Also turning it into active voice might help. How about:
Suggested change
| When specifying a [`<curve-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#curve-command) or [`<smooth-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#smooth-command) in a CSS `shape()` function, [`<relative-control-point>`]()s can be used to specify curve control points that are positioned relative to the start point of the current command, end point of the current command, or the top-left (origin) point of the container the shape is being drawn inside. | |
| You can use [`<relative-control-point>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#relative-control-point) values when specifying a [`<curve-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#curve-command) or [`<smooth-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#smooth-command) in a CSS `shape()` function. These values let you specify control points that are positioned relative to the start or end point of the current command, or relative to the origin (top-left) of the container the shape is being drawn inside. |
|
|
||
| ### Symmetrical `letter-spacing` | ||
|
|
||
| The CSS {{cssxref("letter-spacing")}} property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. This approach can improve text spacing, especially in mixed-directional text [Firefox bug 1891446](https://bugzil.la/1891446). |
Contributor
There was a problem hiding this comment.
Unrelated to your update, spotted this tiny issue from earlier that could be fixed (parenthesis around the firefox bug):
Suggested change
| The CSS {{cssxref("letter-spacing")}} property now splits the specified letter spacing evenly on both sides of each character. This is unlike the current behavior where spacing is added primarily to one side. This approach can improve text spacing, especially in mixed-directional text. ([Firefox bug 1891446](https://bugzil.la/1891446)). |
|
|
||
| - **Relative control points in CSS `shape()` curve commands**: `layout.css.basic-shape-shape.enabled` | ||
|
|
||
| When specifying a [`<curve-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#curve-command) or [`<smooth-command>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape#smooth-command) in a CSS [`shape()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape) function, [`<relative-control-point>`]()s can be used to specify curve control points that are positioned relative to the start point of the current command, end point of the current command, or the top-left (origin) point of the container the shape is being drawn inside. |
Contributor
There was a problem hiding this comment.
same updates can be applied here
| - : Specifies a list of one or more comma-separated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Reference/Attribute/d#path_commands). Commands include `<move-command>`, `<line-command>`, `<hv-line-command>`, `<curve-command>`, `<smooth-command>`, `<arc-command>`, and `close`. Each command's starting point is the previous command's ending point, with the first point of the shape defined by the [`from <coordinate-pair>`](#from_coordinate-pair) parameter. | ||
|
|
||
| The syntax of most shape commands is a keyword providing a directive, such as `move` or `line`, followed by the `by` or `to` keyword, and a set of coordinates. | ||
| #### Shape commands |
Contributor
There was a problem hiding this comment.
Nice! Thanks for collecting all this related content under a section
| - If only a single `<control-point>` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Reference/Attribute/d#quadratic_bézier_curve), which is defined by three points (the start point, control point, and end point). | ||
| - If two `<control-point>` values are provided, the command draws a cubic Bézier curve, which is defined by four points (the start point, two control points, and the end point). | ||
|
|
||
| Valid values for the `<end-point>` component: |
Contributor
There was a problem hiding this comment.
Suggested change
| Valid values for the `<end-point>` component: | |
| Valid values for `<end-point>` include: |
| - : The control point is relative to the the top-left (origin) point of the container the shape is being drawn inside. | ||
|
|
||
| - `<smooth-command>` | ||
| - : Specified as `smooth [by | to] <end-point> [with <control-point>]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Reference/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the `<end-point>`, is relative or absolute, respectively. |
Contributor
There was a problem hiding this comment.
Suggested change
| - : Specified as `smooth [by | to] <end-point> [with <control-point>]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Reference/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the `<end-point>`, is relative or absolute, respectively. | |
| - : Specified as `smooth [by | to] <end-point> [with <control-point>]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Reference/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the `<end-point>`, is relative or absolute. |
|
|
||
| {{EmbedLiveSample('Using shape() to define the visible part of an element', '100%', 300)}} | ||
|
|
||
| ### Curve examples with relative control points |
Contributor
There was a problem hiding this comment.
to make it similar in style to other example headings
Suggested change
| ### Curve examples with relative control points | |
| ### Using `shape()` to draw curves with relative control points |
|
|
||
| ### Curve examples with relative control points | ||
|
|
||
| This example also uses {{cssxref("clip-path")}} to create different shapes for the clipping region of different elements. The shapes are specified using a combination of [`<curve-command>`](#curve-command) and [`<smooth-command>`](#smooth-command) , with [`<relative-control-point>`](#relative-control-point) values used for the control points. Note how some of the control points are relative to the start of the current curve, some are relative to the end of the current curve, and some are relative to the origin of the containing box. |
Contributor
There was a problem hiding this comment.
Instead of the "Note" sentence, can we add some more details to explain the three curves (similar to the description in other examples on the page)
Suggested change
| This example also uses {{cssxref("clip-path")}} to create different shapes for the clipping region of different elements. The shapes are specified using a combination of [`<curve-command>`](#curve-command) and [`<smooth-command>`](#smooth-command) , with [`<relative-control-point>`](#relative-control-point) values used for the control points. Note how some of the control points are relative to the start of the current curve, some are relative to the end of the current curve, and some are relative to the origin of the containing box. | |
| Like previous examples, this example also uses {{cssxref("clip-path")}} to create different shapes for the clipping regions of the elements. The shapes are specified using a combination of [`<curve-command>`](#curve-command) and [`<smooth-command>`](#smooth-command), and the control points are specified using [`<relative-control-point>`](#relative-control-point). | |
| The first shape (`shape1`) uses control points that are relative to the start of the curve... |
| <div id="three"></div> | ||
| ``` | ||
|
|
||
| ```css hidden live-sample___relative-control-points |
Contributor
There was a problem hiding this comment.
Can we add the @supports code to display the message when shape() is not supported?
Comment on lines
+349
to
+351
| <div id="one"></div> | ||
| <div id="two"></div> | ||
| <div id="three"></div> |
Contributor
There was a problem hiding this comment.
just for consistency with other examples on this page, can we call these shape1, shape2, and shape3?
Contributor
|
This pull request has merge conflicts that must be resolved before it can be merged. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Firefox 146 adds support for CSS
shape()relative control points, as used in<curve-command>and<smooth-command>commands, behind thelayout.css.basic-shape-shape.enabledpref. See https://bugzilla.mozilla.org/show_bug.cgi?id=1921501, and in particular, this comment for some useful details.This PR:
shape()function reference page to improve the<curve-command>and<smooth-command>descriptions (making them easier to understand and adding details) and add some working examples.Some notes:
Motivation
Additional details
Related issues and pull requests