Skip to content

[css-shapes-2] Add a shape() syntax, which accepts shape-segments equivalent to SVG path #5711

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Jan 7, 2021
Merged

[css-shapes-2] Add a shape() syntax, which accepts shape-segments equivalent to SVG path #5711

Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3002754
Add a draw() shape syntax, which accepts shape-segments equivalent to
noamr Nov 10, 2020
7998c5e
Move to css-shapes-2
noamr Nov 10, 2020
d916425
Amendments
noamr Nov 14, 2020
bffdc46
Amendments
noamr Nov 14, 2020
54bdc29
Switched back to shape, and allow logical coordinates
noamr Nov 17, 2020
d48d769
Ditch logical coordinates for now
noamr Dec 2, 2020
2e8b244
Make arc parameters order independent
noamr Dec 2, 2020
5f4b6d5
Minor spec changes
noamr Dec 9, 2020
ec435e7
Allow <<position>>
noamr Dec 9, 2020
e2a14d6
Revert "Allow <<position>>"
noamr Dec 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions css-shapes-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ spec:css-masking-1; type: value
text: nonzero
text: evenodd
spec:css-shapes-1; type:property; text:shape-margin
spec:css-shapes-2; type:type; text:<uri>
spec:css-writing-modes-4; type:concept; text:physical
spec:css-writing-modes-4; type:concept; text:"writing mode"
</pre>

<style type="text/css">
Expand Down Expand Up @@ -165,6 +168,79 @@ Supported Shapes</h3>
in the path string.
For the initial direction follow SVG 1.1.
</ul>
<dt>
<pre class=prod>
<dfn>shape()</dfn> = shape( [<<fill-rule>>,]? from <<coordinate-pair>>, <<draw-command>>#)
</pre>
<dd dfn-type=value dfn-for="shape()">
<ul>
<li>
The <<coordinate-pair>> represents the starting point for the first draw-command,
in physical coordinates.
<li>
The sequence of <dfn><<draw-command>></dfn>s represent commands of an
<a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path</a>.
</ul>
</dl>

The arguments not defined above are defined as follows:

<dl>
<dt><dfn><<coordinate-pair>></dfn> = <<length-percentage>>{2}
<dd>Defines a pair of coordinates x & y.

<dt><dfn><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hv-line-command>> |
<<curve-command>> | <<smooth-command>> | <<arc-command>> | close
<dd>
Defines a single draw command, equivalent to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation">SVG draw command</a>.
<dt><dfn><<by-to>></dfn> = by | to
<dd>
Represents the reference from which offsets are computed in <<draw-command>>s.
When ''to'' is present, the coordinates are relative to the top-left origin of the reference box.
Otherwise ''by'' is present, the coordinates are relative to the end position of the previous command.

Note:
<<percentage>> values are always computed relative to the reference box regardless of how offsets are computed.
<dd>

<dt><dfn><<move-command>></dfn> = move <<by-to>> <<coordinate-pair>>
<dd>
Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands">moveto</a> command.
<dt><dfn><<line-command>></dfn> = line <<by-to>> <<coordinate-pair>>
<dd>
Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
If '''x''' or '''y''' are present instead of a <<length-percentage>>, the line will be horizontal or vertical, respectively.
<dt><dfn><<hv-line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>>
<dd>
Corresponds to a horizontal or vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command.
<dt><dfn><<curve-command>></dfn> = curve <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would prefer using over via. The curve does not go via the control points.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I wonder if the end point should come after the control points.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lastly (hopefully), additional spec text should point out that an animation of the shape would work the same as SVG, but that curve is a bit different since the type of curve is defined by the number of parameters (rather than an identifier like SVG).

<dd>
Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a> command if one <<coordinate-pair>> is provided,
otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">cubic curve</a> command.
<dt><dfn><<smooth-command>></dfn> = smooth <<by-to>> <<coordinate-pair>> [via <<coordinate-pair>>]?
<dd>
Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">smooth cubic curve</a> command if a second <<coordinate-pair>> is provided,
otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">smooth quadratic curve</a> command.
<dt><dfn><<arc-command>></dfn> = arc <<by-to>> <<coordinate-pair>> <<arc-radius>> [<<arc-sweep>> || <<arc-large>> || <<angle>>]
<dd>
Corresponds to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">arc</a> command.
<dt><dfn><<arc-radius>></dfn> = of <<length-percentage>>{1, 2}
<dd>
Corresponds to the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">radius</a>.
If only one <<length-percentage>> is present, that value will be used for both '''rx''' and '''ry'''.
<dt><dfn><<arc-sweep>></dfn> = [cw | ccw]?
<dd>
If ''ccw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 0.
If ''cw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 1.
If it is not set, the automatic value is used.
<dt><dfn><<arc-large>></dfn> = [large | small]?
<dd>
If ''large'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 1.
If ''small'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 0.
If it is not set, the automatic value is used.
<dt>close
<dd>
Corrsepponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand">closepath</a> command.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo. Corresponds.

</dl>

<div class="issue-marker wrapper">
Expand Down