markup tweak

Author: tabatkins

css3-flexbox/Overview.html

@@ -963,19 +963,21 @@ <h3 id=flex-wrap><span class=secno>6.2. </span> Flexbox Wrapping: the
     href="#cross-start"><i>cross-start</i></a> direction is equivalent to
     either the "start" or "before" direction of the current <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing
-    mode</a>, whichever is in the <i>cross-axis</i>, and the <a
-    href="#cross-end"><i>cross-end</i></a> direction is the opposite
-    direction of <a href="#cross-start"><i>cross-start</i></a>.
+    mode</a>, whichever is in the <a href="#cross-axis"><i>cross
+    axis</i></a>, and the <a href="#cross-end"><i>cross-end</i></a> direction
+    is the opposite direction of <a
+    href="#cross-start"><i>cross-start</i></a>.
 
    <dt><dfn id=flex-flow-wrap>wrap</dfn>
 
    <dd>The flexbox is <a href="#multi-line0"><i>multi-line</i></a>. The <a
     href="#cross-start"><i>cross-start</i></a> direction is equivalent to
     either the "start" or "before" direction of the current <a
     href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing
-    mode</a>, whichever is in the <i>cross-axis</i>, and the <a
-    href="#cross-end"><i>cross-end</i></a> direction is the opposite
-    direction of <a href="#cross-start"><i>cross-start</i></a>.
+    mode</a>, whichever is in the <a href="#cross-axis"><i>cross
+    axis</i></a>, and the <a href="#cross-end"><i>cross-end</i></a> direction
+    is the opposite direction of <a
+    href="#cross-start"><i>cross-start</i></a>.
 
    <dt><dfn id=flex-flow-wrap-reverse>wrap-reverse</dfn>
 
@@ -2037,21 +2039,22 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
   <p> To lay out a flexbox and its contents, follow these steps:
 
   <ol>
-   <li value=0> Generate anonymous flexbox items around runs of contiguous
-    inline content in the flexbox, as described in the <a
+   <li value=0> <strong>Generate anonymous flexbox items</strong> around runs
+    of contiguous inline content in the flexbox, as described in the <a
     href="#flex-items">Flexbox Items</a> section.
 
-   <li> Re-order the flexbox items according to their &lsquo;<a
-    href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;.
-    The items with the lowest (most negative) &lsquo;<a
-    href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
-    values are first in the ordering. If multiple items share a &lsquo;<a
-    href="#flex-order0"><code class=property>flex-order</code></a>&rsquo;
-    value, they're ordered by document order. This affects the order in which
-    the flexbox items generate boxes in the box-tree, and how the rest of
-    this algorithm deals with the items.
-
-   <li> Determine the main size of the flexbox, based on its <a
+   <li> <strong>Re-order the flexbox items according to their &lsquo;<a
+    href="#flex-order0"><code
+    class=property>flex-order</code></a>&rsquo;.</strong> The items with the
+    lowest (most negative) &lsquo;<a href="#flex-order0"><code
+    class=property>flex-order</code></a>&rsquo; values are first in the
+    ordering. If multiple items share a &lsquo;<a href="#flex-order0"><code
+    class=property>flex-order</code></a>&rsquo; value, they're ordered by
+    document order. This affects the order in which the flexbox items
+    generate boxes in the box-tree, and how the rest of this algorithm deals
+    with the items.
+
+   <li> <strong>Determine the main size of the flexbox</strong> using its <a
     href="#main-size-property"><i>main size property</i></a>. In this
     calculation, the <i>min content main size</i> of the flexbox is the
     maximum of the flexbox's items' <i>min-content size contributions</i>,
@@ -2062,7 +2065,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
     the preferred size is used in place of the <a
     href="#main-size-property"><i>main size property</i></a>.
 
-   <li> Determine the hypothetical main size of each item.
+   <li> <strong>Determine the hypothetical main size of each item:</strong>
     <ul>
      <li> If the flexbox's main axis is parallel to the item's inline axis,
       the hypothetical size is the item's preferred size, treating
@@ -2081,7 +2084,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
      size of flexible lengths &mdash; those constraints are handled elsewhere
      in this algorithm, and doing so will produce incorrect results.</em>
 
-   <li> Collect flexbox items into flexbox lines:
+   <li> <strong>Collect flexbox items into flexbox lines:</strong>
     <ul>
      <li> If the flexbox is single-line, collect all the flexbox items into a
       single flexbox line.
@@ -2099,11 +2102,13 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
      Or are they really shrink-wrap, such that we need to adjust the main
      size here, now that we know the length of the longest line?
 
-   <li> <a href="#resolve-flexible-lengths">Resolve the flexible lengths</a>
-    of all the flexbox items to find their used main size. Determine their
-    hypothetical cross size from this main size.
+   <li> <strong><a href="#resolve-flexible-lengths">Resolve the flexible
+    lengths</a></strong> of all the flexbox items to find their used main
+    size, and <strong>determine their hypothetical cross size</strong> from
+    this main size.
 
-   <li> Distribute any remaining free space. For each flexbox line:
+   <li> <strong>Distribute any remaining free space.</strong> For each
+    flexbox line:
     <ol>
      <li> If the remaining free space is positive and at least one main-axis
       margin on this line is &lsquo;<code class=css>auto</code>&rsquo;,
@@ -2114,8 +2119,8 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
       href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;.
     </ol>
 
-   <li> Calculate the cross size of each flexbox line. For each flexbox line:
-    
+   <li> <strong>Calculate the cross size of each flexbox line.</strong> For
+    each flexbox line:
     <ol>
      <li> Collect all the flexbox items whose inline axis is parallel to the
       main axis and whose &lsquo;<a href="#flex-item-align"><code
@@ -2142,36 +2147,35 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
      cross size of each flexbox line by equal amounts such that the sum of
      their cross sizes exactly equals the flexbox's inner cross size.
 
-   <li> Resolve cross axis &lsquo;<code class=css>auto</code>&rsquo; margins.
-    If a flexbox item has &lsquo;<code class=css>auto</code>&rsquo; cross
-    axis margins, and its outer cross size (treating those &lsquo;<code
-    class=css>auto</code>&rsquo; margins as zero) is less than the cross size
-    of its flexbox line, distribute the difference in those sizes equally to
-    the &lsquo;<code class=css>auto</code>&rsquo; margins.
-
-   <li> Determine the used cross size of each flexbox item.
-    <p> If a flexbox item has &lsquo;<code class=css>flex-item-align:
-     stretch</code>&rsquo; and its cross size property is &lsquo;<code
-     class=css>auto</code>&rsquo;, the used outer cross size is the cross
-     size of its flexbox line, clamped by its min and max cross size
-     properties.
-
-    <p> Otherwise, the used cross size is the item's hypothetical cross size.
-     
-
-   <li> Align all flexbox items along the cross axis per &lsquo;<a
-    href="#flex-item-align"><code
+   <li> <strong>Resolve cross axis &lsquo;<code class=css>auto</code>&rsquo;
+    margins.</strong> If a flexbox item has &lsquo;<code
+    class=css>auto</code>&rsquo; cross axis margins, and its outer cross size
+    (treating those &lsquo;<code class=css>auto</code>&rsquo; margins as
+    zero) is less than the cross size of its flexbox line, distribute the
+    difference in those sizes equally to the &lsquo;<code
+    class=css>auto</code>&rsquo; margins.
+
+   <li> <strong>Determine the used cross size of each flexbox item.</strong>
+    If a flexbox item has &lsquo;<code class=css>flex-item-align:
+    stretch</code>&rsquo; and its cross size property is &lsquo;<code
+    class=css>auto</code>&rsquo;, the used outer cross size is the cross size
+    of its flexbox line, clamped by its min and max cross size properties.
+    Otherwise, the used cross size is the item's hypothetical cross size.
+
+   <li> <strong>Align all flexbox items along the cross axis</strong> per
+    &lsquo;<a href="#flex-item-align"><code
     class=property>flex-item-align</code></a>&rsquo;.
 
-   <li> Determine the flexbox's used cross size.
+   <li> <strong>Determine the flexbox's used cross size:</strong>
     <ul>
      <li> If the cross size property is a <a
       href="#definite0"><i>definite</i></a> size, use that.
 
      <li> Otherwise, use the sum of the flexbox lines' cross sizes.
     </ul>
 
-   <li> Align all flexbox lines per &lsquo;<a href="#flex-line-pack0"><code
+   <li> <strong>Align all flexbox lines</strong> per &lsquo;<a
+    href="#flex-line-pack0"><code
     class=property>flex-line-pack</code></a>&rsquo;.
   </ol>
 
@@ -2397,15 +2401,15 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
       needed.
 
      <li>Items that fit completely or partially on current page are aligned
-      on cross-axis:
+      on cross axis:
       <ol>
-       <li>For the purposes of cross-axis alignment, minimum of remaining
+       <li>For the purposes of cross axis alignment, minimum of remaining
         available space in flexbox and available space at current page is
         used.
 
        <li>If an item is broken in the previous step and its alignment is not
-        baseline, its cross-axis margin-box size is set to available space.
-        If item alignment is baseline, its cross-axis size is adjusted so
+        baseline, its cross axis margin-box size is set to available space.
+        If item alignment is baseline, its cross axis size is adjusted so
         that it extends to exactly the end of available space.
       </ol>
     </ol>
@@ -2439,7 +2443,7 @@ <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
 
      <li>Breaks inside items (forced or unforced) are not allowed.
 
-     <li>If the first flexbox line on a page doesn't fit in cross-axis,
+     <li>If the first flexbox line on a page doesn't fit in cross axis,
       <ol>
        <li>If the flexbox is not at the top of the page, it is moved to the
         next page.

css3-flexbox/Overview.src.html

@@ -434,11 +434,11 @@ <h3 id='flex-wrap'>
 
 	<dl>
 		<dt>nowrap</dt>
-		<dd>The flexbox is <i>single-line</i>.  The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current <a href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.
+		<dd>The flexbox is <i>single-line</i>.  The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current <a href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>, whichever is in the <i>cross axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.
 			</dd>
 
 		<dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
-		<dd>The flexbox is <i>multi-line</i>.  The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current <a href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</dd>
+		<dd>The flexbox is <i>multi-line</i>.  The <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current <a href="http://dev.w3.org/csswg/css3-writing-modes/#writing-mode">writing mode</a>, whichever is in the <i>cross axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</dd>
 
 		<dt><dfn id='flex-flow-wrap-reverse'>wrap-reverse</dfn></dt>
 		<dd>Same as <i>wrap</i>, except the <i>cross-start</i> and <i>cross-end</i> directions are swapped.</dd>
@@ -1064,19 +1064,19 @@ <h2 id='layout-algorithm'>
 
 	<ol>
 		<li value=0>
-			Generate anonymous flexbox items around runs of contiguous inline content in the flexbox, 
+			<strong>Generate anonymous flexbox items</strong> around runs of contiguous inline content in the flexbox, 
 			as described in the <a href="#flex-items">Flexbox Items</a> section.
 
 		<li>
-			Re-order the flexbox items according to their 'flex-order'.  
+			<strong>Re-order the flexbox items according to their 'flex-order'.</strong>
 			The items with the lowest (most negative) 'flex-order' values are first in the ordering.  
 			If multiple items share a 'flex-order' value, 
 			they're ordered by document order.  
 			This affects the order in which the flexbox items generate boxes in the box-tree, 
 			and how the rest of this algorithm deals with the items.
 
 		<li>
-			Determine the main size of the flexbox, based on its <i>main size property</i>.
+			<strong>Determine the main size of the flexbox</strong> using its <i>main size property</i>.
 			In this calculation, the <i>min content main size</i> of the flexbox
 			is the maximum of the flexbox's items' <i>min-content size contributions</i>,
 			and the <i>max content main size</i> of the flexbox
@@ -1085,7 +1085,7 @@ <h2 id='layout-algorithm'>
 			and for flexbox items the preferred size is used in place of the <i>main size property</i>.
 
 		<li>
-			Determine the hypothetical main size of each item.
+			<strong>Determine the hypothetical main size of each item:</strong>
 
 			<ul>
 				<li>
@@ -1109,7 +1109,7 @@ <h2 id='layout-algorithm'>
 				those constraints are handled elsewhere in this algorithm, and doing so will produce incorrect results.</em>
 
 		<li>
-			Collect flexbox items into flexbox lines:
+			<strong>Collect flexbox items into flexbox lines:</strong>
 
 			<ul>
 				<li>
@@ -1134,11 +1134,11 @@ <h2 id='layout-algorithm'>
 				Or are they really shrink-wrap, such that we need to adjust the main size here, now that we know the length of the longest line?
 
 		<li>
-			<a href='#resolve-flexible-lengths'>Resolve the flexible lengths</a> of all the flexbox items to find their used main size.
-			Determine their hypothetical cross size from this main size.
+			<strong><a href='#resolve-flexible-lengths'>Resolve the flexible lengths</a></strong> of all the flexbox items to find their used main size,
+			and <strong>determine their hypothetical cross size</strong> from this main size.
 
 		<li>
-			Distribute any remaining free space.
+			<strong>Distribute any remaining free space.</strong>
 			For each flexbox line:
 
 			<ol>
@@ -1153,7 +1153,7 @@ <h2 id='layout-algorithm'>
 			</ol>
 
 		<li>
-			Calculate the cross size of each flexbox line. 
+			<strong>Calculate the cross size of each flexbox line.</strong>
 			For each flexbox line:
 
 			<ol>
@@ -1180,7 +1180,7 @@ <h2 id='layout-algorithm'>
 				such that the sum of their cross sizes exactly equals the flexbox's inner cross size.
 
 		<li>
-			Resolve cross axis ''auto'' margins.
+			<strong>Resolve cross axis ''auto'' margins.</strong>
 			If a flexbox item has ''auto'' cross axis margins,
 			and its outer cross size
 			(treating those ''auto'' margins as zero)
@@ -1189,23 +1189,19 @@ <h2 id='layout-algorithm'>
 			to the ''auto'' margins.
 
 		<li>
-			Determine the used cross size of each flexbox item.
-
-			<p>
-				If a flexbox item has ''flex-item-align: stretch''
-				and its cross size property is ''auto'',
-				the used outer cross size is the cross size of its flexbox line,
-				clamped by its min and max cross size properties.
-
-			<p>
-				Otherwise,
-				the used cross size is the item's hypothetical cross size.
+			<strong>Determine the used cross size of each flexbox item.</strong>
+			If a flexbox item has ''flex-item-align: stretch''
+			and its cross size property is ''auto'',
+			the used outer cross size is the cross size of its flexbox line,
+			clamped by its min and max cross size properties.
+			Otherwise,
+			the used cross size is the item's hypothetical cross size.
 
 		<li>
-			Align all flexbox items along the cross axis per 'flex-item-align'.
+			<strong>Align all flexbox items along the cross axis</strong> per 'flex-item-align'.
 
 		<li>
-			Determine the flexbox's used cross size.
+			<strong>Determine the flexbox's used cross size:</strong>
 
 			<ul>
 				<li>
@@ -1218,7 +1214,7 @@ <h2 id='layout-algorithm'>
 			</ul>
 
 		<li>
-			Align all flexbox lines per 'flex-line-pack'.
+			<strong>Align all flexbox lines</strong> per 'flex-line-pack'.
 	</ol>
 
 <h3 id='resolve-flexible-lengths'>
@@ -1414,13 +1410,13 @@ <h2 id="pagination">
 
 				<li>Items that have fit completely on a previous page and items that are pushed to next page don’t have any rendering, leaving empty space as needed.</li>
 
-				<li>Items that fit completely or partially on current page are aligned on cross-axis:
+				<li>Items that fit completely or partially on current page are aligned on cross axis:
 
 					<ol>
-						<li>For the purposes of cross-axis alignment, minimum of remaining available space in flexbox and available space at current page is used.</li>
+						<li>For the purposes of cross axis alignment, minimum of remaining available space in flexbox and available space at current page is used.</li>
 
-						<li>If an item is broken in the previous step and its alignment is not baseline, its cross-axis 
-						margin-box size is set to available space. If item alignment is baseline, its cross-axis size is adjusted so that it extends to exactly the end of available space.</li>
+						<li>If an item is broken in the previous step and its alignment is not baseline, its cross axis 
+						margin-box size is set to available space. If item alignment is baseline, its cross axis size is adjusted so that it extends to exactly the end of available space.</li>
 					</ol>
 				</li>
 			</ol>
@@ -1447,7 +1443,7 @@ <h2 id="pagination">
 
 				<li>Breaks inside items (forced or unforced) are not allowed.</li>
 				<li>If the first flexbox line on a page doesn't fit in 
-				cross-axis,
+				cross axis,
 				<ol>
 					<li>If the flexbox is not at the top of the page, it is moved to the next page.</li>
 					<li>If the flexbox is already at the top of the page, the item may produce overflow. If 'overflow' property of the flexbox is set to 'visible', it is paginated using same rules as visible overflow of blocks in normal flow.</li>