[css-shapes] change basic shape syntax description to prose

Author: astearns

css-shapes/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Shapes Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-09-24 name=dcterms.date>
+  <meta content=2013-09-27 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -51,7 +51,7 @@
 
    <h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 September
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 September
     2013</h2>
 
    <dl>
@@ -435,69 +435,72 @@ <h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
   <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
    Shapes</h4>
 
-  <p>The following basic shapes are supported.
+  <p>The following basic shapes are supported. All basic shapes use
+   functional notation following the rules defined in <a
+   href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values
+   and Units</a> <a href="#CSS3VAL"
+   rel=biblioentry>[CSS3VAL]<!--{{CSS3VAL}}--></a>.
 
   <dl>
-   <dt><dfn
-    id=rectangle>rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
-    [&lt;length&gt;|&lt;percentage&gt;]]{3,5})
+   <dt><dfn id=rectangle>rectangle</dfn>() takes either four or six arguments
+    of &lt;length&gt; or &lt;percentage&gt;
 
    <dd>
     <ul>
-     <li> The first four values represent <strong>x, y, width</strong> and
+     <li> The first four arguments represent <strong>x, y, width</strong> and
       <strong>height</strong> of the rectangle. Negative values for width and
       height are invalid.
 
-     <li> The last two optional values represent <strong> rx</strong> and
+     <li> The last two optional arguments represent <strong> rx</strong> and
       <strong>ry</strong>. For rounded rectangles they define the x-axis
       radius and y-axis radius of the ellipse used to round off the corners
       of the rectangle. Negative values for rx and ry are invalid. See notes
-      below on edge cases for these values.
+      below on edge cases for these arguments.
     </ul>
 
-   <dt><dfn
-    id=inset-rectangle>inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
-    [&lt;length&gt;|&lt;percentage&gt;]]{3,5})
+   <dt><dfn id=inset-rectangle>inset-rectangle</dfn>() takes either four or
+    six arguments of &lt;length&gt; or &lt;percentage&gt;
 
    <dd>
     <ul>
-     <li> The first four values represent the <strong>top, right,
-      bottom</strong> and <strong>left</strong> offsets from the content
-      rectangle inward that define the positions of the edges of the inset
-      rectangle. Negative values for any of these insets are invalid.
+     <li> The first four arguments represent the <strong>top, right,
+      bottom</strong> and <strong>left</strong> offsets from the relevant box
+      inward that define the positions of the edges of the inset rectangle.
+      Negative values for any of these insets are invalid.
 
-     <li> The last two optional values represent <strong> rx</strong> and
+     <li> The last two optional arguments represent <strong> rx</strong> and
       <strong>ry</strong>. For rounded inset rectangles they define the
       x-axis radius and y-axis radius of the ellipse used to round off the
       corners of the inset rectangle. Negative values for rx and ry are
-      invalid. See notes below on edge cases for these values.
+      invalid. See notes below on edge cases for these arguments.
     </ul>
 
-   <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
-    [&lt;length&gt;|&lt;percentage&gt;]]{2})
+   <dt><dfn id=circle>circle</dfn>() takes three arguments of &lt;length&gt;
+    or &lt;percentage&gt;
 
    <dd>
     <ul>
-     <li> The three values values represent <strong>cx</strong>,
+     <li> The three arguments represent <strong>cx</strong>,
       <strong>cy</strong>, and <strong>r</strong>. They define the x-axis and
       y-axis coordinates of the center of the circle and the radius of the
       circle. A negative value for r is invalid.
     </ul>
 
-   <dt><dfn id=ellipse>ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
-    [&lt;length&gt;|&lt;percentage&gt;]]{3})
+   <dt><dfn id=ellipse>ellipse</dfn>() takes four arguments of &lt;length&gt;
+    or &lt;percentage&gt;
 
    <dd>
     <ul>
-     <li> The four values represent <strong>cx</strong>, <strong>cy</strong>,
-      <strong>rx</strong>, and <strong>ry</strong>. They define the x-axis
-      and y-axis coordinates of the center of the ellipse and the x-axis and
-      y-axis radius of the ellipse. Negative values for rx and ry are
-      invalid.
+     <li> The four arguments represent <strong>cx</strong>,
+      <strong>cy</strong>, <strong>rx</strong>, and <strong>ry</strong>. They
+      define the x-axis and y-axis coordinates of the center of the ellipse
+      and the x-axis and y-axis radius of the ellipse. Negative values for rx
+      and ry are invalid.
     </ul>
 
-   <dt><dfn
-    id=polygon>polygon</dfn>([&lt;fill-rule&gt;,]?[&lt;length&gt;|&lt;percentage&gt;]{2}#)
+   <dt><dfn id=polygon>polygon</dfn>() starts with an optional
+    &lt;fill-rule&gt; argument, followed by a list of arguments consisting of
+    &lt;length&gt; or &lt;percentage&gt; pairs.
 
    <dd>
     <ul>
@@ -507,7 +510,7 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
       property in SVG for details. Possible values are nonzero or evenodd.
       Default value when omitted is nonzero.
 
-     <li> The two length values represent <strong>xi</strong> and
+     <li> Each pair argument in the list represents <strong>xi</strong> and
       <strong>yi</strong> - the <strong>x</strong> and <strong>y</strong>
       axis coordinates of the i-th vertex of the polygon.
     </ul>
@@ -518,11 +521,11 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
   </dl>
 
   <p>The values for corner radii on rectangle or inset-rectangle are
-   determined implicitly if either the rx or ry values are not specified, or
-   are specified but with invalid values. If neither rx nor ry are properly
-   specified, the values are 0 for both. If only one value is properly
-   specified, that value is used for both. And if the values cause any of the
-   curves to overlap, the solution for <a
+   determined implicitly if either the rx or ry arguments are not specified,
+   or are specified but with invalid values. If neither rx nor ry are
+   properly specified, the values are 0 for both. If only one value is
+   properly specified, that value is used for both. And if the values cause
+   any of the curves to overlap, the solution for <a
    href="http://www.w3.org/TR/css3-background/#corner-overlap">overlapping
    curves</a> from CSS Backgrounds and Borders <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> is used to avoid the

css-shapes/Overview.src.html

@@ -337,61 +337,67 @@ <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
 
 
       <h4 id="supported-basic-shapes">Supported Shapes</h4>
-      <p>The following basic shapes are supported.
+      <p>The following basic shapes are supported. All basic shapes use functional notation following the rules defined in <a href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values and Units</a> [[CSS3VAL]].
       <dl>
-          <dt><dfn id="rectangle">rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3,5})</dt>
+          <dt><dfn id="rectangle">rectangle</dfn>() 
+            takes either four or six arguments 
+            of &lt;length&gt; or &lt;percentage&gt;</dt>
           <dd>
               <ul>
                   <li>
-                      The first four values represent 
+                      The first four arguments represent 
                       <strong>x, y, width</strong> and 
                       <strong>height</strong>  
                       of the rectangle. 
                       Negative values for width and height are invalid.
                   </li>
                   <li>
-                      The last two optional values represent 
+                      The last two optional arguments represent 
                       <strong> rx</strong> and <strong>ry</strong>. 
                       For rounded rectangles they define 
                       the x-axis radius and y-axis radius 
                       of the ellipse used to round off 
                       the corners of the rectangle. 
                       Negative values for rx and ry are invalid. 
-                      See notes below on edge cases for these values.
+                      See notes below on edge cases for these arguments.
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="inset-rectangle">inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3,5})</dt>
+          <dt><dfn id="inset-rectangle">inset-rectangle</dfn>() 
+            takes either four or six arguments 
+            of &lt;length&gt; or &lt;percentage&gt;</dt>
           <dd>
               <ul>
                   <li>
-                      The first four values represent the 
+                      The first four arguments represent the 
                       <strong>top, right, bottom</strong> and 
                       <strong>left</strong> offsets 
-                      from the content rectangle inward 
+                      from the relevant box inward 
                       that define the positions 
                       of the edges 
                       of the inset rectangle. 
                       Negative values for any 
                       of these insets are invalid.
                   </li>
                   <li>
-                      The last two optional values represent 
+                      The last two optional arguments represent 
                       <strong> rx</strong> and <strong>ry</strong>. 
                       For rounded inset rectangles they define 
                       the x-axis radius and y-axis radius 
                       of the ellipse used to round off 
                       the corners of the inset rectangle. 
                       Negative values for rx and ry are invalid. 
-                      See notes below on edge cases for these values.
+                      See notes below on edge cases for these arguments.
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{2})</dt>
+          <dt><dfn id="circle">circle</dfn>() 
+            takes three arguments 
+            of &lt;length&gt; or &lt;percentage&gt;</dt>
           <dd>
               <ul>
                   <li>
-                      The three values values represent 
+                      The three arguments represent 
                       <strong>cx</strong>, 
                       <strong>cy</strong>, 
                       and <strong>r</strong>. 
@@ -402,11 +408,13 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="ellipse">ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3})</dt>
+          <dt><dfn id="ellipse">ellipse</dfn>() 
+            takes four arguments 
+            of &lt;length&gt; or &lt;percentage&gt;</dt>
           <dd>
               <ul>
                   <li>
-                      The four values represent 
+                      The four arguments represent 
                       <strong>cx</strong>, 
                       <strong>cy</strong>, 
                       <strong>rx</strong>, and 
@@ -419,14 +427,17 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="polygon">polygon</dfn>([&lt;fill-rule&gt;,]?[&lt;length&gt;|&lt;percentage&gt;]{2}#)</dt>
+          <dt><dfn id="polygon">polygon</dfn>() 
+            starts with an optional &lt;fill-rule&gt; argument, 
+            followed by a list of arguments consisting of 
+            &lt;length&gt; or &lt;percentage&gt; pairs.</dt>
           <dd>
               <ul>
                   <li><strong>fill-rule</strong> - The filling rule used to determine the interior of the
                       polygon. See <a href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property in SVG for details. Possible values are nonzero
                       or evenodd. Default value when omitted is nonzero.</li>
                   <li>
-                      The two length values represent <strong>xi</strong> and <strong>yi</strong> - 
+                      Each pair argument in the list represents <strong>xi</strong> and <strong>yi</strong> - 
                       the <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th vertex of the polygon.
                   </li>
               </ul>
@@ -440,7 +451,7 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
       <p>The values for corner radii 
         on rectangle or inset-rectangle 
         are determined implicitly 
-        if either the rx or ry values 
+        if either the rx or ry arguments 
         are not specified, 
         or are specified but with invalid values. 
         If neither rx nor ry are properly specified,