Changing the wrap-flow property values 'left' and 'right' to 'start' and 'end'.

Author: atanassov

css3-exclusions/Exclusions.src.html

@@ -220,7 +220,7 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
         </tr>
         <tr>
             <th>Value:</th>
-            <td><var>auto</var> | <var>both</var> | <var>left</var> | <var>right</var> | <var>maximum</var> | <var>clear</var></td>
+            <td><var>auto</var> | <var>both</var> | <var>start</var> | <var>end</var> | <var>maximum</var> | <var>clear</var></td>
         </tr>
         <tr>
             <th>Initial:</th>
@@ -258,31 +258,31 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
         <dd>
             Inline flow content can flow on all sides of the exclusion.
         </dd>
-        <dt><dfn title="'wrap-flow'!!'left'">left</dfn></dt>
+        <dt><dfn title="'wrap-flow'!!'start'">start</dfn></dt>
         <dd>
-            Inline flow content can wrap on the left side of the exclusion but must leave
-            the area to the right of the exclusion empty.
+            Inline flow content can wrap on the start edge of the exclusion area but must leave
+            the area to end edge of the exclusion area empty.
         </dd>
-        <dt><dfn title="'wrap-flow'!!'right'">right</dfn></dt>
+        <dt><dfn title="'wrap-flow'!!'end'">end</dfn></dt>
         <dd>
-            Inline flow content can wrap on the right side of the exclusion but must leave
-            the area to the left of the exclusion empty.
+            Inline flow content can wrap on the end side of the exclusion area but must leave
+            the area to the start edge of the exclusion area empty.
         </dd>
         <dt><dfn title="'wrap-flow'!!'maximum'">maximum</dfn></dt>
         <dd>
             Inline flow content can wrap on the side of the exclusion with the largest 
             available space for the given line, and must leave the other side of the exclusion
-            empty..
+            empty.
         </dd>
         <dt><dfn title="'wrap-flow'!!'clear'">clear</dfn></dt>
         <dd>
             Inline flow content can only wrap on top and bottom of the exclusion and must leave
-            the areas to the left and right of the exclusion empty.
+            the areas to the start and end edges of the exclusion box empty.
         </dd>
     </dl>
 
     <p>
-        Setting the 'wrap-flow' property to 'both', 'left', 'right', 'maximum' or 'clear' on an 
+        Setting the 'wrap-flow' property to 'both', 'start', 'end', 'maximum' or 'clear' on an 
         element makes that element an <span>exclusion element</a>. It's <span>exclusion shape</span>
         is contributed to its containing block's wrapping context, causing the containing block's descendants 
         to wrap around its exclusion area.
@@ -311,10 +311,10 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
         <p>The above figure illustrates how exclusions combine. The red box represents an element's 
         content box. The A, B, C and D darker gray boxes represent exclusions in the element's
         wrapping context. A, B, C and D have their respective 
-        'wrap-flow' set to 'both', 'left', 'right' and 'clear' respectively. The lighter gray
+        'wrap-flow' set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray
         areas show the additional areas that are excluded for inline layout as a result of the 
         'wrap-flow' value. For example, the area to the right of 'B' cannot be used for inline
-        layout because the 'wrap-flow' for 'B' is 'left'.</p>
+        layout because the 'wrap-flow' for 'B' is 'start'.</p>
 
         <p>The background 'blue' area shows what areas are available for inline content layout.
             All areas represented with a light or dark shade of gray are not available for inline
@@ -349,12 +349,12 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
                 <td><img src="images/exclusion_wrap_side_both.png" alt="Example rendering for wrap-side: both" /></td>
             </tr>
             <tr>
-                <td><code class="html">#exclusion{ wrap-flow: left; }</code></td>
-                <td><code class="html">#exclusion{ wrap-flow: right; }</code></td>
+                <td><code class="html">#exclusion{ wrap-flow: start; }</code></td>
+                <td><code class="html">#exclusion{ wrap-flow: end; }</code></td>
             </tr>
             <tr>
-                <td><img src="images/exclusion_wrap_side_left.png" alt="Example rendering for wrap-side: left" /></td>
-                <td><img src="images/exclusion_wrap_side_right.png" alt="Example rendering for wrap-side: right" /></td>
+                <td><img src="images/exclusion_wrap_side_left.png" alt="Example rendering for wrap-side: start" /></td>
+                <td><img src="images/exclusion_wrap_side_right.png" alt="Example rendering for wrap-side: end" /></td>
             </tr>
             <tr>
                 <td><code class="html">#exclusion{ wrap-flow: maximum; }</code></td>
@@ -938,7 +938,7 @@ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
           <p>The above figure shows how 'shape-outside' shapes impact the exclusion areas.
               The red box represents an element's content box and 'A', 'B', 'C' and 'C'
               represent exclusions with a complex shape and their 'wrap-flow' property set
-              to 'both', 'left', 'right' and 'clear', respectively.</p>
+              to 'both', 'start', 'end' and 'clear', respectively.</p>
 
           <p>As illustrated in the picture, when an exclusion allows wrapping on all sides, 
               text can flow inside 'holes' in the exclusion (as for exclusion 'A'). Otherwise,

css3-exclusions/Overview.html

@@ -87,14 +87,14 @@
 
    <h1 id=css-exclusions-module>CSS exclusions and shapes</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 November
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-exclusions-20111031/">http://www.w3.org/csswg/css3-exclusions/</a>
+     href="http://www.w3.org/TR/2011/ED-css3-exclusions-20111115/">http://www.w3.org/csswg/css3-exclusions/</a>
 
     <dt>Latest version:
 
@@ -447,8 +447,8 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
     <tr>
      <th>Value:
 
-     <td><var>auto</var> | <var>both</var> | <var>left</var> |
-      <var>right</var> | <var>maximum</var> | <var>clear</var>
+     <td><var>auto</var> | <var>both</var> | <var>start</var> |
+      <var>end</var> | <var>maximum</var> | <var>clear</var>
 
     <tr>
      <th>Initial:
@@ -495,33 +495,34 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
 
    <dd> Inline flow content can flow on all sides of the exclusion.
 
-   <dt><dfn id=left title="'wrap-flow'!!'left'">left</dfn>
+   <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>
 
-   <dd> Inline flow content can wrap on the left side of the exclusion but
-    must leave the area to the right of the exclusion empty.
+   <dd> Inline flow content can wrap on the start edge of the exclusion box
+    but must leave the area to end edge of the exclusion box empty.
 
-   <dt><dfn id=right title="'wrap-flow'!!'right'">right</dfn>
+   <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>
 
-   <dd> Inline flow content can wrap on the right side of the exclusion but
-    must leave the area to the left of the exclusion empty.
+   <dd> Inline flow content can wrap on the end side of the exclusion box but
+    must leave the area to the start edge of the exclusion box empty.
 
    <dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>
 
    <dd> Inline flow content can wrap on the side of the exclusion with the
     largest available space for the given line, and must leave the other side
-    of the exclusion empty..
+    of the exclusion empty.
 
    <dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>
 
    <dd> Inline flow content can only wrap on top and bottom of the exclusion
-    and must leave the areas to the left and right of the exclusion empty.
+    and must leave the areas to the start and end edges of the exclusion box
+    empty.
   </dl>
 
-  <p id=setting-the-wrap-flow-property-to-both-l> Setting the &lsquo;<a
+  <p id=setting-the-wrap-flow-property-to-both-s> Setting the &lsquo;<a
    href="#wrap-flow"><code class=property>wrap-flow</code></a>&rsquo;
    property to &lsquo;<code class=property>both</code>&rsquo;, &lsquo;<code
-   class=property>left</code>&rsquo;, &lsquo;<code
-   class=property>right</code>&rsquo;, &lsquo;<code
+   class=property>start</code>&rsquo;, &lsquo;<code
+   class=property>end</code>&rsquo;, &lsquo;<code
    class=property>maximum</code>&rsquo; or &lsquo;<code
    class=property>clear</code>&rsquo; on an element makes that element an
    <span>exclusion element. It's <span>exclusion shape</span> is contributed
@@ -559,8 +560,8 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
     &lsquo;<a href="#wrap-flow"><code
     class=property>wrap-flow</code></a>&rsquo; set to &lsquo;<code
     class=property>both</code>&rsquo;, &lsquo;<code
-    class=property>left</code>&rsquo;, &lsquo;<code
-    class=property>right</code>&rsquo; and &lsquo;<code
+    class=property>start</code>&rsquo;, &lsquo;<code
+    class=property>end</code>&rsquo; and &lsquo;<code
     class=property>clear</code>&rsquo; respectively. The lighter gray areas
     show the additional areas that are excluded for inline layout as a result
     of the &lsquo;<a href="#wrap-flow"><code
@@ -569,7 +570,7 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
     used for inline layout because the &lsquo;<a href="#wrap-flow"><code
     class=property>wrap-flow</code></a>&rsquo; for &lsquo;<code
     class=property>B</code>&rsquo; is &lsquo;<code
-    class=property>left</code>&rsquo;.</p>
+    class=property>start</code>&rsquo;.</p>
 
    <p id=the-background-blue-area-shows-what-area>The background &lsquo;<code
     class=property>blue</code>&rsquo; area shows what areas are available for
@@ -612,15 +613,15 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
        src="images/exclusion_wrap_side_both.png">
 
      <tr>
-      <td><code class=html>#exclusion{ wrap-flow: left; }</code>
+      <td><code class=html>#exclusion{ wrap-flow: start; }</code>
 
-      <td><code class=html>#exclusion{ wrap-flow: right; }</code>
+      <td><code class=html>#exclusion{ wrap-flow: end; }</code>
 
      <tr>
-      <td><img alt="Example rendering for wrap-side: left"
+      <td><img alt="Example rendering for wrap-side: start"
        src="images/exclusion_wrap_side_left.png">
 
-      <td><img alt="Example rendering for wrap-side: right"
+      <td><img alt="Example rendering for wrap-side: end"
        src="images/exclusion_wrap_side_right.png">
 
      <tr>
@@ -1374,8 +1375,8 @@ <h4 id=shape-outside-property><span class=secno>4.3.1. </span>The &lsquo;<a
     and their &lsquo;<a href="#wrap-flow"><code
     class=property>wrap-flow</code></a>&rsquo; property set to &lsquo;<code
     class=property>both</code>&rsquo;, &lsquo;<code
-    class=property>left</code>&rsquo;, &lsquo;<code
-    class=property>right</code>&rsquo; and &lsquo;<code
+    class=property>start</code>&rsquo;, &lsquo;<code
+    class=property>end</code>&rsquo; and &lsquo;<code
     class=property>clear</code>&rsquo;, respectively.</p>
 
    <p id=as-illustrated-in-the-picture-when-an-ex>As illustrated in the
@@ -1950,15 +1951,15 @@ <h2 class=no-num id=index>Index</h2>
      <li>&lsquo;<code class=property>clear</code>&rsquo;, <a href="#clear"
       title="'wrap-flow', 'clear'"><strong>3.1.1.</strong></a>
 
-     <li>&lsquo;<code class=property>left</code>&rsquo;, <a href="#left"
-      title="'wrap-flow', 'left'"><strong>3.1.1.</strong></a>
+     <li>&lsquo;<code class=property>end</code>&rsquo;, <a href="#end"
+      title="'wrap-flow', 'end'"><strong>3.1.1.</strong></a>
 
      <li>&lsquo;<code class=property>maximum</code>&rsquo;, <a
       href="#maximum"
       title="'wrap-flow', 'maximum'"><strong>3.1.1.</strong></a>
 
-     <li>&lsquo;<code class=property>right</code>&rsquo;, <a href="#right"
-      title="'wrap-flow', 'right'"><strong>3.1.1.</strong></a>
+     <li>&lsquo;<code class=property>start</code>&rsquo;, <a href="#start"
+      title="'wrap-flow', 'start'"><strong>3.1.1.</strong></a>
     </ul>
 
    <li>&lsquo;<a href="#wrap-margin"><code
@@ -2071,7 +2072,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr>
      <th><a class=property href="#wrap-flow">wrap-flow</a>
 
-     <td>auto | both | left | right | maximum | clear
+     <td>auto | both | start | end | maximum | clear
 
      <td>auto