Added a Definitions section used for defining 'exclusion area' and 'content area' - concepts used in the rest of the spec.

A number of small editorial, spelling and grammar fixes.

Author: atanassov

css3-exclusions/Exclusions.src.html

@@ -93,17 +93,32 @@ <h3 id="values">Values</h3>
         repeated explicitly.
     </p>
 
+    <h3 id="definitions">Definitions</h3>
+    <dfn>Exclusion Area</dfn>
+    <p>
+        The area used for excluding inline flow content around an exclusion element. By default the
+        area is equivalent to the [[!CSS21]] border box. This specification modifies this
+        definition by the introduction of 'shape-outside' property.
+    </p>
+    
+    <dfn>Content Area</dfn>
+    <p>
+        The area used for layout of the inline flow content of an element. By default the
+        area is equivalent to the [[!CSS21]] content box. This specification modifies this
+        definition by the introduction of 'shape-inside' property.
+    </p>
+
     <h2 id="exclusions">Exclusions</h2>
     <p>
         Exclusions are elements that will be avoided by the user agent when laying out inline
-        flow content outside of them. The exclusion area is computed relative to the outside
-        border box of the element on which the exclusion is specified. The shape properties
-        can be used to change the shape of exclusions. Exclusions establish a wrapping context
+        flow content outside of them. The exclusion area is computed relative to the 'exclusion
+        area' of the element on which the exclusion is specified. The shape properties can
+        be used to change the shape of exclusions. Exclusions establish a wrapping context
         for all inline flow content descendants of their containing block.
     </p>
     <p class="note">
-        Note, 'Outside' is referring to content in DOM that is not a descendant of the element
-        on which the 'wrap-flow' was specified. 'Inside' is referring to the content descendant
+        Note, 'outside' is referring to content in DOM that is not a descendant of the element
+        on which the 'wrap-flow' was specified. 'Inside' is referring to the content descendants
         of an element.
     </p>
 
@@ -117,12 +132,12 @@ <h4 id="wrap-flow-property">The 'wrap-flow' Property</h4>
     <p>
         Setting the 'wrap-flow' property to 'both', 'left', 'right', 'maximum' or 'clear' enables the
         exclusion inline flow content wrapping features, causing outside content to wrap
-        around its border box. The initial value for this property is 'auto', in this case
+        around its exclusion area. The initial value for this property is 'auto', in this case
         the element will not be considered for wrapping inline flow content unless the 'float'
-        property is specified to a value other than 'clear'.
+        property is specified to a value other than 'none'.
     </p>
     <p>
-        The element will be considered an exclusion for all inline flow content descendent
+        The element will be considered as an exclusion for all inline flow content descendants
         of the exclusions' containing block.
     </p>
     <table class="propdef">
@@ -201,13 +216,13 @@ <h4 id="wrap-flow-property">The 'wrap-flow' Property</h4>
             the areas to the left and right of the exclusion empty.
         </dd>
     </dl>
-    <p class="note">
-        Note, Floats are considered exclusions for compatibility and 'wrap-flow' computes
-        to 'auto' when the 'float' property is anything other than 'clear'.
-    </p>
+
+    Note, floats are considered exclusions for compatibility and 'wrap-flow' computes
+    to 'auto' when the 'float' property is anything other than 'clear'.
+
     <div class="example">
         <p>
-            wrap-flow: auto applied to an absolutely positioned element:
+            The 'wrap-flow' property values applied to an absolutely positioned element.
         </p>
 <pre><code class="html">
 &lt;style type="text/css"&gt; 
@@ -255,11 +270,11 @@ <h4 id="wrap-flow-property">The 'wrap-flow' Property</h4>
 
     <h3 id="scope-and-effect-of-exclusions">Scope and Effect of Exclusions</h3>
     <p>
-        Exclusions affect the inline flow content inside of their containing blocks (defined
-        in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">CSS 2.1
-            10.1</a>) and that of all descendent elements of the same containing block.
-        All inline flow content inside the containing block of the exclusions is affected.
-        To stop the effect of exclusions defined outside any element, the 'wrap-through'
+        An exclusion affects the inline flow content descended from the exclusion's containing
+        blocks (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
+        CSS 2.1 10.1</a>) and that of all descendant elements of the same containing
+        block. All inline flow content inside the containing block of the exclusions is
+        affected. To stop the effect of exclusions defined outside any element, the 'wrap-through'
         property can be used (see definition of Propagation of Exclusions below).
     </p>
 
@@ -347,13 +362,6 @@ <h4 id="wrap-padding-property">The 'wrap-padding' Property</h4>
             <td>the absolute length</td>
         </tr>
     </table>
-
-    <dfn>Content Area</dfn>
-    <p>
-        The area used for layout of the inline flow content of an element. By default the
-        area is equivalent to the [[!CSS21]] content box. This specification modifies this
-        definition by the introduction of 'shape-inside' property.
-    </p>
     <!-- End section "wrap-padding property" -->
     <!-- End section "Scope and Efect of Exclusions" -->
 
@@ -362,9 +370,9 @@ <h3 id="propagation-of-exclusions">Propagation of Exclusions</h3>
         Exclusions can be used to wrap all inline flow content within all descendants of
         the containing block of the exclusion. In order to prevent wrapping of inline flow
         content on any element around exclusions, the 'wrap-through' property can be used.
-        Setting the property to 'none' will prevent the wrapping of inline flow content
-        around exclusion elements defined outside. The 'wrap-through' property does not
-        have an effect over exclusions contained inside the element.
+        Setting the 'wrap-through' property to 'none' will prevent the wrapping of inline
+        flow content around exclusion elements defined outside. The 'wrap-through' property
+        does not have an effect over exclusions contained inside the element.
     </p>
 
     <h4 id="wrap-through-property">The 'wrap-through' Property</h4>
@@ -418,7 +426,7 @@ <h4 id="wrap-through-property">The 'wrap-through' Property</h4>
     </dl>
     <div class="example">
         <p>
-            wrap-through - controlling the effect of exclusions
+            Using the 'wrap-through' property to control the effect of exclusions.
         </p>
 <pre><code class="html">
 &lt;style type="text/css"&gt; 
@@ -476,7 +484,7 @@ <h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
         </tr>
     </table>
     <p>
-        The 'wrap' property is a shorthand property for setting the exclusoins properties
+        The 'wrap' property is a shorthand property for setting the exclusions properties
         at the same place in the style sheet.
     </p>
     <!-- End section "wrap shorthand property" -->
@@ -487,12 +495,12 @@ <h3 id="order-of-exclusions">Order of Exclusions</h3>
         The ordering of exclusions follows the visual order. Exclusions are applied in reverse
         to the document order in which they are defined. The last exclusion appears on top
         of all other exclusion, thus it affects the inline flow content of all other preceding
-        exclusions or elements descendent of the same containing block. To change the ordering
+        exclusions or elements descendant of the same containing block. To change the ordering
         of positioned exclusions, z-index can be used.
     </p>
 
     <div class="example">
-        <p>Ordering of exclusions</p>
+        <p>Ordering of exclusions.</p>
 <pre><code class="html">
 &lt;style type="text/css"&gt; 
     .exclusion  {
@@ -535,7 +543,7 @@ <h3 id="processing-model-of-exclusions">Processing Model of Exclusions</h3>
     <p>
         Exclusions can be specified on positioned elements and elements can be positioned
         from their <a href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
-            position</a>. Since, the static position of such elements depends on the inline
+        position</a>. Since, the static position of such elements depends on the inline
         flow content affected by the exclusion itself; there is a circular dependency between
         the two layout tasks. To break this circular dependency a two-pass layout approach
         is recommended. The first layout pass computes the static positions of all auto-positioned
@@ -549,8 +557,8 @@ <h3 id="processing-model-of-exclusions">Processing Model of Exclusions</h3>
     </p>
     <p>
         Similar dependency exists for exclusions whose size or position is specified in
-        percentage and their containing block size is specified as 'auto'. In such cases
-        the size or position of the exclusion is calculated based on the size of the containing
+        percentage and the containing block size is specified as 'auto'. In such cases the
+        size or position of the exclusion is calculated based on the size of the containing
         block calculated in the first layout pass.
     </p>
     <p>
@@ -578,14 +586,14 @@ <h2 id="shapes">Shapes</h2>
         'table-cell' or 'inline-block'.
     </p>
     <p class="note">
-        Note, While the boundaries used for wrapping inline flow content outside and inside
+        Note, while the boundaries used for wrapping inline flow content outside and inside
         an element can be defined using shapes, the actual box model does not change. If
         the element has specified margins, borders or paddings they will be computed and
-        rendered according to the CSS Box Model module.
+        rendered according to the [[CSS3-Box]] module.
     </p>
 
     <div class="example">
-        <p>CSS 'shape' and CSS box model relation</p>
+        <p>CSS 'shape' and CSS box model relation.</p>
 <pre><code class="html">
 &lt;style type="text/css"&gt; 
     .exclusion  {
@@ -632,7 +640,7 @@ <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
               <ul>
                   <li><strong>cx</strong> - The x-axis coordinate of the center of the circle</li>
                   <li><strong>cy</strong> - The y-axis coordinate of the center of the circle</li>
-                  <li><strong>r</strong> - The radius of the circle. Note, Cannot be expressed as a percentage.</li>
+                  <li><strong>r</strong> - The radius of the circle. Note, cannot be expressed as a percentage.</li>
               </ul>
           </dd>
       </dl>
@@ -664,11 +672,9 @@ <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
           </dd>
       </dl>
 
-      <p class="note">
-          Note, in case the polygon is not closed the user-agent will assume an additional
-          vertex at the end.
-      </p>
-      <!-- End section "Shapes from SVG Syntax -->
+      When a 'polygon' is not closed the user-agent will assume an additional vertex
+      at the end.
+    <!-- End section "Shapes from SVG Syntax -->
 
       <h3 id="shapes-from-image">Shapes from Image</h3>
       <p>
@@ -682,7 +688,7 @@ <h3 id="shapes-from-image">Shapes from Image</h3>
           is not specified, the initial value to be considered is 0.5.
       </p>
       <p class="note">
-          Note, Images can also define cavities and inline flow content should wrap inside
+          Note, images can also define cavities and inline flow content should wrap inside
           them. In order to avoid that, another exclusion element can be overlaid.
       </p>
       <!-- End section "Shapes from image" -->
@@ -691,10 +697,10 @@ <h3 id="declaring-shapes">Declaring Shapes</h3>
       <p>
           Shapes can be declared using the 'shape-outside', 'shape-inside' or a combination
           for both properties. Using the 'shape-outside' property changes the geometry of
-          default shape used for exclusions, which is the outter border box of the element.
-          The outside shape has visual effect when the element is exclusion (otherwise this
-          property is ignored). Using the 'shape-inside' property, the content box of an element
-          is redefined and inline flow content wraps into that shape.
+          default shape used for exclusions, which is the 'exclusion area' of the element.
+          The outside shape has visual effect when the element is an exclusion (otherwise
+          the property has no affect). Using the 'shape-inside' property, the content box
+          of an element is redefined and inline flow content wraps into that shape.
       </p>
 
       <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
@@ -765,11 +771,6 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
           The 'shape-inside' modifies the shape of the inner inline flow content from rectangular
           content box to an arbitrary geometry.
       </p>
-      <p>
-          When the property is set to 'auto', the shape is taken from the value of 'shape-outside'.
-          In case both values of 'shape-inside' and 'shape-outside' are specified as 'auto',
-          the content box of the element is used as the shape.
-      </p>
 
       <table class="propdef">
           <tr>
@@ -836,8 +837,8 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
     <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4>
     <p>
         The 'shape-image-threshold' defines the alpha channel threshold used to extract
-        the shape using an image. The initial value of 0.5 means that all the pixels that
-        are more than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold'
+        the shape using an image. A value of 0.5 means that all the pixels that are more
+        than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold'
         applies to both 'shape-outside' and 'shape-inside'.
     </p>
     <p class="note">
@@ -883,9 +884,9 @@ <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4
     <dl>
         <dt><dfn title="'shape-image-threshold'!!'&lt;alphavalue&gt;'">&lt;alphavalue&gt;</dfn></dt>
         <dd>
-            Syntactically a &lt;number&gt;. The shape-image-threshold setting to be used when
-            extracting a shape from an image. Any values outside the range 0.0 (fully transparent)
-            to 1.0 (fully opaque) will be clamped to this range.
+            A &lt;number&gt; value used to set the threshold used for extracting a shape from
+            an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
+            will be clamped to this range.
         </dd>
     </dl>
     <!-- End section "The shape-image-threshold property" -->
@@ -931,7 +932,7 @@ <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
     </p>
 
     <div class="example">
-        <p>Style declaration using the 'shape' shorthand property</p>
+        <p>Style declaration using the 'shape' shorthand property.</p>
 <pre><code class="html">
 &lt;style type="text/css"&gt;
     .shape {