[css3-writing-modes] Markup tweaks, expand example for orthogonal flows.

Author: tabatkins

css3-writing-modes/Overview.html

@@ -2699,26 +2699,46 @@ <h3 id=orthogonal-flows><span class=secno>7.3. </span> Orthogonal Flows</h3>
     and ‘<a href="#vertical-rl"><code class=css>vertical-rl</code></a>’).
   </ul>
 
-  <p>To handle the second case, CSS layout calculations are divided into two
-   phases: sizing a box, and positioning the box within its flow. In the
-   sizing phase—calculating the width and height of the box—the
-   dimensions of the box and the containing block are mapped to the measure
-   and extent and calculations performed accordingly using the writing mode
-   of the element. In the positioning phase—calculating the positioning
-   offsets, margins, borders, and padding—the dimensions of the box and its
-   containing block are mapped to the measure and extent and calculations
-   performed according to the writing mode of the containing block.
-
-  <p>For example, if a vertical block is placed inside a horizontal block,
-   then when calculating the physical height (which is the measure) of the
-   child block the physical height of the parent block is used as the child's
-   containing block measure, even though the physical height is the extent,
-   not the measure, of the parent block.
-
-  <p>Since auto margins are resolved consistent with the containing block's
-   writing mode, a box establishing an orthogonal flow, can, once sized, be
-   aligned or centered within its containing block just like other
-   block-level elements by using auto margins.
+  <p> When an element has a writing mode that is perpendicular to its
+   containing block it is said to be in, or establish, an <dfn
+   id=orthogonal-flow>orthogonal flow</dfn>.
+
+  <p> To handle this case, CSS layout calculations are divided into two
+   phases: sizing a box, and positioning the box within its flow.
+
+  <ul>
+   <li> In the sizing phase—calculating the width and height of the
+    box—the dimensions of the box and the containing block are mapped to
+    the measure and extent and calculations are performed accordingly using
+    the writing mode of the <em>element</em>.
+
+   <li> In the positioning phase—calculating the positioning offsets,
+    margins, borders, and padding—the dimensions of the box and its
+    containing block are mapped to the measure and extent and calculations
+    are performed according to the writing mode of the <em>containing
+    block</em>.
+  </ul>
+
+  <p>Since ‘<code class=css>auto</code>’ margins are resolved consistent
+   with the containing block's writing mode, a box establishing an orthogonal
+   flow can, once sized, be aligned or centered within its containing block
+   just like other block-level elements by using auto margins.
+
+  <div class=example>
+   <p> For example, if a vertical block is placed inside a horizontal block,
+    then when calculating the physical height (which is the measure) of the
+    child block the physical height of the parent block is used as the
+    child's containing block measure, even though the physical height is the
+    extent, not the measure, of the parent block.
+
+   <p> On the other hand, because the containing block is in a horizontal
+    writing mode, the vertical margins on the child participate in
+    margin-collapsing, even though they are in the inline-axis of the child,
+    and horizontal auto margins will expand to fill the containing block,
+    even though they are in the block-axis of the child.
+
+   <p class=issue> Add a picture.
+  </div>
 
   <p>It is common in CSS for a containing block to have a defined measure,
    but not a defined extent. This typically happens in CSS2.1 when a

css3-writing-modes/Overview.src.html

@@ -1925,37 +1925,62 @@ <h3 id="orthogonal-flows">
 
   <p>When an element has a different 'writing-mode' from its
     containing block two cases are possible:
+
   <ul>
     <li>The two writing modes are parallel to each other. (For example,
       ''vertical-rl'' and ''vertical-lr'').</li>
     <li>The two writing modes are perpendicular to each other. (For
       example, ''horizontal-tb'' and ''vertical-rl'').</li>
   </ul>
 
-  <p>To handle the second case, CSS layout calculations are divided into
+  <p>
+    When an element has a writing mode that is perpendicular to its containing block
+    it is said to be in, or establish, an <dfn>orthogonal flow</dfn>.
+
+  <p>
+    To handle this case, CSS layout calculations are divided into
     two phases: sizing a box, and positioning the box within its flow.
-    In the sizing phase&#8212;calculating the width and height of the
-    box&#8212;the dimensions of the box and the containing block
-    are mapped to the measure and extent and calculations performed
-    accordingly using the writing mode of the element.
-    In the positioning phase&#8212;calculating the positioning offsets,
-    margins, borders, and padding&#8212;the dimensions of the box and
-    its containing block are mapped to the measure and extent and
-    calculations performed according to the writing mode of the
-    containing block.
 
-  <p>For example, if a vertical block is placed inside a horizontal
-    block, then when calculating the physical height (which is the
-    measure) of the child block the physical height of the parent
-    block is used as the child's containing block measure, even
-    though the physical height is the extent, not the measure, of
-    the parent block.</p>
+  <ul>
+    <li>
+      In the sizing phase—calculating the width and height of the
+      box—the dimensions of the box and the containing block
+      are mapped to the measure and extent and calculations are performed
+      accordingly using the writing mode of the <em>element</em>.
+    <li>
+      In the positioning phase—calculating the positioning offsets,
+      margins, borders, and padding—the dimensions of the box and
+      its containing block are mapped to the measure and extent and
+      calculations are performed according to the writing mode of the
+      <em>containing block</em>.
+  </ul>
 
-  <p>Since auto margins are resolved consistent with the containing
-    block's writing mode, a box establishing an orthogonal flow, can,
+  <p>Since ''auto'' margins are resolved consistent with the containing
+    block's writing mode, a box establishing an orthogonal flow can,
     once sized, be aligned or centered within its containing block just
     like other block-level elements by using auto margins.
 
+  <div class='example'>
+    <p>
+      For example, if a vertical block is placed inside a horizontal
+      block, then when calculating the physical height (which is the
+      measure) of the child block the physical height of the parent
+      block is used as the child's containing block measure, even
+      though the physical height is the extent, not the measure, of
+      the parent block.
+
+    <p>
+      On the other hand,
+      because the containing block is in a horizontal writing mode,
+      the vertical margins on the child participate in margin-collapsing,
+      even though they are in the inline-axis of the child,
+      and horizontal auto margins will expand to fill the containing block,
+      even though they are in the block-axis of the child.
+
+    <p class='issue'>
+      Add a picture.
+  </div>
+
   <p>It is common in CSS for a containing block to have a defined
     measure, but not a defined extent. This typically happens in
     CSS2.1 when a containing block has an ''auto'' height, for
@@ -2818,7 +2843,7 @@ <h2 id="character-properties" class="no-num">Appendix A.
   <p>Unicode defines properties for characters, but for 'text-orientation',
     it is necessary to determine the properties of a grapheme cluster.
     For the purposes of CSS Writing Modes, the properties of a grapheme
-    cluster are given by its base character&#8212;except in two cases:
+    cluster are given by its base character—except in two cases:
   <ul>
     <li>Grapheme clusters formed with an Enclosing Mark (Me) of the Common
     script are considered to be Other Symbols (So) in the Common script.