Skip to content

Commit 8814e9e

Browse files
noamrfantasaitabatkins
authored
[css-shapes-2] Specify the grammar for shape() (w3c#11207)
* [css-shapes-2] Specify the grammar for `shape()` - <<position>> can be used instead of an absolute point. - One of a <<position>>'s dimension can be used for hline/vline - Since keywords define the different components, order of components is flexible. Curves: - `with` is used for control points - Two control points are separated by / - Relative control points can be relative to segment-start/segment-end/reference-box Resolution: w3c#10649 (comment) Closes w3c#10649 Closes w3c#10666 * Update css-shapes-2/Overview.bs Co-authored-by: fantasai <fantasai.bugs@inkedblade.net> * Update css-shapes-2/Overview.bs Co-authored-by: fantasai <fantasai.bugs@inkedblade.net> * Update css-shapes-2/Overview.bs Co-authored-by: fantasai <fantasai.bugs@inkedblade.net> * Update css-shapes-2/Overview.bs Co-authored-by: fantasai <fantasai.bugs@inkedblade.net> * Add note about by/to * Update css-shapes-2/Overview.bs * Update css-shapes-2/Overview.bs * Update css-shapes-2/Overview.bs * Update css-shapes-2/Overview.bs * Update css-shapes-2/Overview.bs --------- Co-authored-by: fantasai <fantasai.bugs@inkedblade.net> Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
1 parent 75a4d2b commit 8814e9e

File tree

1 file changed

+90
-31
lines changed

1 file changed

+90
-31
lines changed

‎css-shapes-2/Overview.bs‎

Lines changed: 90 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,16 @@ spec:css-writing-modes-4; type:concept; text:physical
2828
spec:css-writing-modes-4; type:concept; text:"writing mode"
2929
spec:svg2; type:property;
3030
text:fill-rule
31+
spec:css-values-5; type:value;
32+
text:top;
33+
text:right;
34+
text:bottom;
35+
text:left;
36+
text:center;
37+
text:x-start;
38+
text:y-start;
39+
text:x-end;
40+
text:y-end;
3141
</pre>
3242

3343
<style type="text/css">
@@ -162,17 +172,32 @@ The ''shape()'' Function</h4>
162172
Each command's starting point is the previous command's ending point.
163173

164174
<pre class=prod>
165-
<<shape-command>> = <<move-command>> | <<line-command>> | <<hv-line-command>> |
166-
<<curve-command>> | <<smooth-command>> | <<arc-command>> | close
175+
<<shape-command>> = <<move-command>> | <<line-command>> | close |
176+
<<horizontal-line-command>> | <<vertical-line-command>> |
177+
<<curve-command>> | <<smooth-command>> | <<arc-command>>
178+
179+
<<move-command>> = move <<command-end-point>>
180+
<<line-command>> = line <<command-end-point>>
181+
<<horizontal-line-command>> = hline
182+
[ to [ <<length-percentage>> | left | center | right | x-start | x-end ]
183+
| by <<length-percentage>> ]
184+
<<vertical-line-command>> = vline
185+
[ to [ <<length-percentage>> | top | center | bottom | y-start | y-end ]
186+
| by <<length-percentage>> ]
187+
<<curve-command>> = curve
188+
[ [ to <<position>> && [ with <<control-point>> [ / <<control-point>> ]? ] ]
189+
| [ by <<coordinate-pair>> && [ with <<relative-control-point>> [ / <<relative-control-point>> ]? ] ] ]
190+
<<smooth-command>> = smooth
191+
[ [ to <<position>> && [ with <<control-point>> ]? ]
192+
| [ by <<coordinate-pair>> && [ with <<relative-control-point>> ]? ] ]
193+
<<arc-command>> = arc [ <<command-end-point>>
194+
&& [ of <<coordinate-pair>> ]
195+
&& <<arc-sweep>>? && <<arc-size>>? && [rotate <<angle>>]? ]
196+
197+
<<command-end-point>> = [ to <<position>> | by <<coordinate-pair>> ]
198+
<<control-point>> = [ <<position>> | <<relative-control-point>> ]
199+
<<relative-control-point>> = <<coordinate-pair>> [ from [ start | end | origin ] ]?
167200
<<coordinate-pair>> = <<length-percentage>>{2}
168-
<<by-to>> = by | to
169-
<<move-command>> = move <<by-to>> <<coordinate-pair>>
170-
<<line-command>> = line <<by-to>> <<coordinate-pair>>
171-
<<hv-line-command>> = [hline | vline] <<by-to>> <<length-percentage>>
172-
<<curve-command>> = curve [<<by-to>> <<coordinate-pair>> using <<coordinate-pair>>{1,2}]
173-
<<smooth-command>> = smooth [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>]?]
174-
<<arc-command>> = arc [[<<by-to>> <<coordinate-pair>>] || [of <<length-percentage>>{1,2}] ||
175-
<<arc-sweep>>? || <<arc-size>>? || [rotate <<angle>>]?]
176201
<<arc-sweep>> = cw | ccw
177202
<<arc-size>> = large | small
178203
</pre>
@@ -185,19 +210,25 @@ The ''shape()'' Function</h4>
185210
Percentages are resolved against the width or height, respectively,
186211
of the [=reference box=].
187212

188-
<dt><dfn><<by-to>></dfn> = <dfn value for="shape(), <by-to>">by</dfn> | <dfn value for="shape(), <by-to>">to</dfn>
213+
<dt><dfn><<command-end-point>></dfn> = [ <dfn value for="shape(), <command-end-point>">by</dfn> <<position>> | <dfn value for="shape(), <command-end-point>">to</dfn> <<coordinate-pair>> ]
189214
<dd>
190215
Every command can be specified in "absolute" or "relative" coordinates,
191-
determined by their <<by-to>> component.
192-
''to'' indicates that any <<coordinate-pair>>s in the command
216+
determined by their ''shape()/by'' or ''shape()/to'' component.
217+
''shape()/to'' indicates that any <<coordinate-pair>>s in the command
193218
are relative to the top-left corner of the [=reference box=],
194-
while ''by'' indicates that the <<coordinate-pair>>s
219+
while ''shape()/by'' indicates that the <<coordinate-pair>>s
195220
are relative to the command's starting point.
196221

222+
<<relative-control-point>> defines how ''shape()/by'' and ''shape()/to'' are interpreted for curve control points,
223+
while <<horizontal-line-command>> and <<vertical-line-command>> define how ''shape()/by'' and ''shape()/to'' are
224+
interpreted for horizontal and vertical lines, respectively.
225+
226+
When ''shape()/to'' is used, the coordinates can be specified as <<position>>s instead of <<coordinate-pair>>s.
227+
197228
Note: In either case, <<percentage>> values in <<coordinate-pair>>s
198229
are always computed relative to the [=reference box's=] size.
199230

200-
<dt><dfn><<move-command>></dfn> = <dfn value>move</dfn> <<by-to>> <<coordinate-pair>>
231+
<dt><dfn><<move-command>></dfn> = <dfn value>move</dfn> <<command-end-point>>
201232
<dd>
202233
Adds a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands">moveto</a> command
203234
to the list of path data commands,
@@ -209,42 +240,58 @@ The ''shape()'' Function</h4>
209240
Note: This starts a new subpath,
210241
for the purpose of the ''close'' command.
211242

212-
<dt><dfn><<line-command>></dfn> = <dfn value>line</dfn> <<by-to>> <<coordinate-pair>>
243+
<dt><dfn><<line-command>></dfn> = <dfn value>line</dfn> <<command-end-point>>
213244
<dd>
214245
Adds a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command
215246
to the list of path data commands,
216247
with an ending point specified by the <<coordinate-pair>>.
217248

218249
This draws a straight line from the command's starting point to its ending point.
219250

220-
<dt><dfn><<hv-line-command>></dfn> = [<dfn value>hline</dfn> | <dfn value>vline</dfn>] <<by-to>> <<length-percentage>>
251+
<dt><dfn><<horizontal-line-command>></dfn> = hline [ to [ <length-percentage> | left | center | right | x-start | x-end ]
252+
| by <length-percentage> ]
221253
<dd>
222-
Adds a horizontal (for ''hline'') or vertical (for ''vline'')
254+
Adds a horizontal
223255
<a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command
224256
to the list of path data commands.
225257

226258
This is equivalent to a ''line'' command
227-
with the <<length-percentage>> given as the horizontal or vertical component, respectively,
228-
of the <<coordinate-pair>>,
229-
and the other component specified appropriately to make the line horizontal or vertical.
259+
with the <<length-percentage>> given as the horizontal component of the <<coordinate-pair>>.
260+
Specifying the horizontal component of <<position>> instead of a <<length-percentage>> (''left'', ''center'', ''right'', ''x-start'', or ''x-end''),
261+
would draw a line to that <<position>>, with the <<position>>'s vertical component remaining the same as the starting point.
262+
263+
<dt><dfn><<vertical-line-command>></dfn> = vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]
264+
<dd>
265+
Adds a vertical
266+
<a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command
267+
to the list of path data commands.
230268

231-
<dt><dfn><<curve-command>></dfn> = <dfn value>curve</dfn> [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>{1,2}]]
269+
This is equivalent to a ''line'' command
270+
with the <<length-percentage>> given as the vertical component of the <<coordinate-pair>>.
271+
Specifying the horizontal component of <<position>>
272+
(''top'', ''center'', ''bottom'', ''y-start'', or ''y-end'')
273+
instead of a <<length-percentage>>,
274+
would draw a line to that <<position>>, with the <<position>>'s horizontal component remaining the same as the starting point.
275+
276+
<dt><dfn><<curve-command>></dfn> = <dfn value>curve</dfn> [ [ to <<position>> && with <<control-point>> [ / <<control-point>> ]? ]
277+
| [ by <<coordinate-pair>> && with <<relative-control-point>> [ / <<relative-control-point>> ]? ] ]
232278
<dd>
233279
Adds a Bézier curve command to the list of path data commands,
234-
ending at the point specified by the first <<coordinate-pair>>.
280+
ending at the point specified by the <<position>> following the ''shape()/to'' keyword,
281+
or the <<coordinate-pair>> following the ''shape()/by'' keyword, as specified by <<command-end-point>>.
235282

236-
The <css>using</css> component specifies control points for the curve:
237-
if a single <<coordinate-pair>> is provided,
283+
The <css>with</css> component specifies control points for the curve:
284+
if a single <<control-point>> or <<relative-control-point>> is provided,
238285
the command specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a>;
239-
if two <<coordinate-pair>>s are provided,
286+
if two <<control-point>>s or <<relative-control-point>>s are provided,
240287
it specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">cubic curve</a>.
241288

242-
<dt><dfn><<smooth-command>></dfn> = <dfn value>smooth</dfn> [[<<by-to>> <<coordinate-pair>>] || [using <<coordinate-pair>>]?]
289+
<dt><dfn><<smooth-command>></dfn> = <dfn value>smooth</dfn> [ [ to <<position>> && [with <<control-point>> ]? ]
290+
| [ by <<coordinate-pair>> && [ with <<relative-control-point>> ]? ] ]
243291
<dd>
244292
Adds a smooth Bézier curve command to the list of path data commands,
245-
ending at the point specified by the first <<coordinate-pair>>.
246-
247-
The <css>using</css> component specifies control points for the curve:
293+
ending at the point specified by the <<position>> following the ''shape()/to'' keyword, or the <<coordinate-pair>> following the ''shape()/by'' keyword, as specified by <<command-end-point>>.
294+
The <css>with</css> component specifies control points for the curve:
248295
if it's omitted,
249296
the command specifies a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">smooth quadratic curve</a>;
250297
if it's provided,
@@ -259,11 +306,23 @@ The ''shape()'' Function</h4>
259306
so the curve appears to smoothly continue from the previous command,
260307
rather than possibly making a sudden direction change.
261308

309+
<dt><dfn><<control-point>></dfn> = [ <<position>> | <<relative-control-point>> ]
310+
<dd>
311+
Provides a control point to a quadratic or cubic Bézier curve.
312+
313+
<dt><dfn><<relative-control-point>></dfn> = <<coordinate-pair>> [ from [ start | end | origin ] ]?
314+
<dd>
315+
Provides a control point to a quadratic or cubic Bézier curve.
316+
When a <css>from</css> keyword is specified followed by <css>start</css>, <css>end</css>, or <css>origin</css>,
317+
the given <<coordinate-pair>> is relative to
318+
the command's starting point, the command's end point, or the [=reference box=], respectively.
319+
If such component is not provided, the <<coordinate-pair>> is relative to the segment's start.
320+
262321
<dt><dfn><<arc-command>></dfn> = <dfn value>arc</dfn> [[<<by-to>> <<coordinate-pair>>] || [of <<length-percentage>>{1,2}] || <<arc-sweep>>? || <<arc-size>>?|| rotate <<angle>>? ]
263322
<dd>
264323
Add an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">elliptical arc</a> command
265324
to the list of path data commands,
266-
ending at the point specified by the <<coordinate-pair>>.
325+
ending at the <<command-end-point>>.
267326

268327
The <css>of</css> component specifies the size of the ellipse that the arc is taken from.
269328
The first <<length-percentage>> provides the horizontal radius of the ellipse

0 commit comments

Comments
 (0)