Make 'box' definition for gradients normative, rearrange some prose accordingly

Author: fantasai

css3-images/Overview.html

@@ -686,12 +686,8 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
    These are commonly used for subtle shading in background images, buttons,
    and many other things. The two functions described in this section allow
    an author to specify such an image in a terse syntax, so that the UA can
-   generate the image automatically when rendering the page. Gradients are a
-   type of image, and can be used anywhere an image can, such as in the
-   &lsquo;<code class=property>background-image</code>&rsquo; or &lsquo;<code
-   class=property>list-style-image</code>&rsquo; properties. Gradients have
-   no <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. The
-   syntax of a <a href="#ltgradient"><i>&lt;gradient></i></a> is:
+   generate the image automatically when rendering the page. The syntax of a
+   <a href="#ltgradient"><i>&lt;gradient></i></a> is:
 
   <pre
    class=prod><dfn id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
@@ -703,6 +699,10 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
    href="#ltrepeating-radial-gradient"><i>&lt;repeating-radial-gradient></i></a>
    are defined in their applicable sections below.
 
+  <p>Gradients are a type of image, and can be used anywhere an image can,
+   such as in the &lsquo;<code class=property>background-image</code>&rsquo;
+   or &lsquo;<code class=property>list-style-image</code>&rsquo; properties.
+
   <div class=example>
    <p>As with the other <a href="#ltimage"><i>&lt;image></i></a> types
     defined in this specification, gradients can be used in any property that
@@ -716,18 +716,19 @@ <h2 id=gradients><span class=secno>5. </span> Gradients</h2>
    </ul>
   </div>
 
-  <p class=note>In many places this section references a box, such as "the
-   box's top-left corner" or "the box's right side". In all of these
-   circumstances, the "box" refers to a rectangle with the dimensions of the
-   <a href="#concrete-object-size"><i>concrete object size</i></a>. A
-   gradient has no intrinsic dimensions. This means that, for example, if you
-   use a gradient in the &lsquo;<code
-   class=property>background-image</code>&rsquo; property (with &lsquo;<code
-   class=property>background-size</code>&rsquo; at the default value and
-   &lsquo;<code class=property>background-repeat</code>&rsquo; not equal to
-   &lsquo;<code class=property>round</code>&rsquo;), the "box" will simply be
-   the size of the background sizing area. If you use a gradient in a
-   list-style-image, the "box" will be a 1em square.
+  <p>A gradient is drawn into a box with the dimensions of the <a
+   href="#concrete-object-size"><i>concrete object size</i></a>. Elsewhere in
+   this section this rectangle is simply called the "box".
+
+  <p>A gradient has no <a href="#intrinsic-dimensions"><i>intrinsic
+   dimensions</i></a>. This means that, for example, if you use a gradient in
+   the &lsquo;<code class=property>background-image</code>&rsquo; property
+   (with &lsquo;<code class=property>background-size</code>&rsquo; at the
+   default value and &lsquo;<code
+   class=property>background-repeat</code>&rsquo; not equal to &lsquo;<code
+   class=property>round</code>&rsquo;), the box will simply be the size of
+   the background sizing area. Similarly, for a gradient used as a
+   list-style-image, the box would be a 1em square.
 
   <p class=issue>It has been suggested that several of the controls offered
    by gradients are unnecessary. Repeating gradients could potentially be

css3-images/Overview.src.html

@@ -444,9 +444,7 @@ <h2 id="gradients">
 	are commonly used for subtle shading in background images, buttons, and many 
 	other things.  The two functions described in this section allow an author to 
 	specify such an image in a terse syntax, so that the UA can generate the image 
-	automatically when rendering the page.  Gradients are a type of image, and can 
-	be used anywhere an image can, such as in the 'background-image' or 
-	'list-style-image' properties.  Gradients have no <i>intrinsic dimensions</i>.
+	automatically when rendering the page.
 	The syntax of a <i>&lt;gradient></i> is:</p>
 
 	<pre class=prod><dfn>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
@@ -455,6 +453,9 @@ <h2 id="gradients">
 	<i>&lt;repeating-linear-gradient></i>, and <i>&lt;repeating-radial-gradient></i> are 
 	defined in their applicable sections below.</p>
 
+	<p>Gradients are a type of image, and can be used anywhere an image can,
+	such as in the 'background-image' or 'list-style-image' properties.
+
 	<div class=example>
 		<p>As with the other <i>&lt;image></i> types defined in this specification, 
 		gradients can be used in any property that accepts images.  For example:</p>
@@ -464,14 +465,16 @@ <h2 id="gradients">
 		</ul>
 	</div>
 
-	<p class=note>In many places this section references a box, such as "the box's 
-	top-left corner" or "the box's right side".  In all of these circumstances, 
-	the "box" refers to a rectangle with the dimensions of the <i>concrete object size</i>. 
-	 A gradient has no intrinsic dimensions.  This means that, for example, if you use a gradient in the 
-	'background-image' property (with 'background-size' at the default value and 'background-repeat'
-	not equal to 'round'), the "box" will simply be the size of the background sizing 
-	area.  If you use a gradient in a list-style-image, the "box" will be a 1em 
-	square.</p>
+	<p>A gradient is drawn into a box with the dimensions of the <i>concrete
+	object size</i>. Elsewhere in this section this rectangle is simply
+	called the "box".
+
+	<p>A gradient has no <i>intrinsic dimensions</i>.  This means that, for
+	example, if you use a gradient in the 'background-image' property (with
+	'background-size' at the default value and 'background-repeat' not equal to 
+	'round'), the box will simply be the size of the background sizing 
+	area. Similarly, for a gradient used as a list-style-image, the box
+	would be a 1em square.
 
 	<p class=issue>It has been suggested that several of the controls offered by gradients are unnecessary. Repeating gradients could potentially be done by hooking into ‘background-repeat’, sizing and positioning radial gradients could be done by hooking into ‘background-size’ and ‘background-position’, etc.</p>