[css-exclusions] define shape-inside to work like an exclusion

Author: astearns

css-exclusions/Exclusions.src.html

@@ -133,11 +133,13 @@ <h2 id="definitions">Definitions</h2>
     <p>
         The area used for excluding inline flow content around an exclusion box. The
         <span>exclusion area</span> is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">
-        border box</a>.
+        border box</a> for an exclusion box.
         This specification's
         'shape-outside' property 
         can be used to define arbitrary, 
-        non-rectangular <span>exclusion areas</span>.
+        non-rectangular <span>exclusion areas</span>. 
+        The 'shape-inside' property also defines an <span>exclusion area</span>, 
+        but in this case it is the area outside the shape that inline content avoids.
     </p>
 
     <dfn>Float area</dfn>
@@ -168,8 +170,8 @@ <h2 id="definitions">Definitions</h2>
 
     <p>
         The <span>wrapping context</span> of a box is a collection of <span>exclusion areas</span> 
-        contributed by its associated <span>exclusion boxes</span>. During layout,
-        a box wraps its inline flow content in the area that corresponds to the subtraction of
+        contributed by its associated <span>exclusion boxes</span> and elements with 'shape-inside'. During layout,
+        a box wraps its inline flow content in the <code>wrapping area</code> that corresponds to the subtraction of
         its <span>wrapping context</span> from its own <span>content area</span>.
     </p>
 
@@ -182,9 +184,13 @@ <h2 id="definitions">Definitions</h2>
 
     <dfn>Content area</dfn>
     <p>
-        The area used for layout of the inline flow content of a box. By default the
-        area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>. 
-        This specification's 'shape-inside' property can define arbitrary, non-rectangular content areas.
+        The <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content area</a> 
+        is normally used for layout of the inline flow content of a box.
+    </p>
+
+    <dfn>Wrapping area</dfn>
+    <p>
+        The area used for layout of inline flow content of a box affected by a <span>wrapping context</span>, defined by subtracting the <span>wrapping context</span> from its <span>content area</span>
     </p>
 
     <div class="issue-marker" data-bug_id="15089" data-bug_status="NEW">
@@ -1447,9 +1453,13 @@ <h3 id="declaring-shapes">Declaring Shapes</h3>
           has no effect.
       </p>
       <p>
-          The shape defined by the 'shape-inside' and 'shape-padding' properties defines an element's <span>content area</span> and 
-          the element's inline flow content wraps into that shape. The 'shape-inside' property
-          applies to all block-level elements.
+          The shape defined by the 'shape-inside' 
+          and 'shape-padding' properties 
+          defines an <span>exclusion area</span> 
+          that contributes 
+          to the element's <span>wrapping context</span>. 
+          The 'shape-inside' property applies 
+          to all block-level elements.
       </p>
 
       <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
@@ -1547,8 +1557,15 @@ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
 
       <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
       <p>
-          The 'shape-inside' modifies the shape of the inner inline flow content from rectangular
-          content box to an arbitrary geometry.
+          The 'shape-inside' property adds 
+          an exclusion area 
+          to the element's wrapping context. 
+          This modifies the normal rectangular shape 
+          of the content area 
+          to a possibly non-rectangular wrapping area. 
+          The exclusion area added 
+          is defined by subtracting the shape 
+          from the element's content area.
       </p>
 
       <table class="propdef">
@@ -1644,33 +1661,33 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
     </div>
 
     <p>Overflow content can overlap 
-        the after edge of a shape, 
+        the after edge of a wrapping area, 
         and overflow content can be displayed 
-        below the content area defined by shape. 
+        below that edge. 
         When content overflows in the block direction, 
-        the last line in the content area determines its width(s) 
+        the last line in the wrapping area determines its width(s) 
         by finding the minimum shape width(s) 
-        in the remaining area 
+        in the remaining wrapping area 
         between the line's before edge 
-        and the shape's after edge. 
+        and the after edge of the wrapping area. 
         This can result 
-        in the line intersecting the shape's after edge, 
+        in the line intersecting the wrapping area's after edge, 
         or a zero-width line 
-        if (for instance) the shape's after edge 
+        if (for instance) the wrapping area's after edge 
         is a continuous curve. 
         In degenerate cases, 
         there may be no content 
-        that fits inside the content area 
-        defined by the shape. 
+        that fits inside the wrapping area. 
         Further overflow is laid out 
         below the after edge 
-        of the shape's bounding box 
-        as if 'shape-inside' computes to 'auto'.</p>
+        of the wrapping area 
+        as if the wrapping context 
+        did not apply.</p>
 
     <div class='figure'>
             <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
             <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
-        <p class="caption">Overflow interacting with the after edge of shapes defined by 'shape-inside' and 'shape-padding'.</p>
+        <p class="caption">Overflow interacting with the after edge of wrapping contexts defined by 'shape-inside' and 'shape-padding'.</p>
     </div>
 
     <!-- End section "The shape-inside property" -->