Minor editorial fixes to overview.

Author: fantasai

css3-flexbox/Overview.html

@@ -576,10 +576,10 @@ <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
    <li> can be laid out in any <a href="#flex-direction-property">flow
     direction</a> (leftwards, rightwards, downwards, or even upwards!)
 
-   <li> can have their visual order <a
+   <li> can have their display order <a
     href="#flex-flow-row-reverse">reversed</a> or <a
-    href="#order-property">rearranged</a> at the style layer (i.e., display
-    order can be independent of source order)
+    href="#order-property">rearranged</a> at the style layer (i.e., visual
+    order can be independent of source and speech order)
 
    <li> can be laid out linearly along a single (<a href="#main-axis"><i
     title="main axis">main</i></a>) axis or <a
@@ -602,26 +602,28 @@ <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
    <p> Here's an example of a catalog where each item has a title, an photo,
     a description, and a purchase button. The designer's intention is that
     each entry has the same overall size, that the photo be above the text,
-    and the purchase buttons aligned at the bottom, regardless of the length
-    of the item's description. Flex layout makes many aspects of this design
-    easy:
+    and that the purchase buttons aligned at the bottom, regardless of the
+    length of the item's description. Flex layout makes many aspects of this
+    design easy:
 
    <ul>
-    <li> The catalog uses flex layout to lay out a row of items horizontally,
-     and to ensure they're all equal-height. Each entry is then itself a
-     column flex container, laying out its contents vertically.
-
-    <li> Within each entry, content is ordered logically with the title
-     first, followed by the description and the photo. This provides a
-     sensible ordering for speech rendering and in non-CSS browsers. For a
-     more compelling visual presentation, however, ‘<a href="#order"><code
-     class=property>order</code></a>’ is used to pull the image up from
-     later in the content to the top, and ‘<a href="#align-self"><code
-     class=property>align-self</code></a>’ to center it horizontally.
+    <li> The catalog uses flex layout to lay out rows of items horizontally,
+     and to ensure that items within a row are all equal-height. Each entry
+     is then itself a column flex container, laying out its contents
+     vertically.
+
+    <li> Within each entry, the source document content is ordered logically
+     with the title first, followed by the description and the photo. This
+     provides a sensible ordering for speech rendering and in non-CSS
+     browsers. For a more compelling visual presentation, however, ‘<a
+     href="#order"><code class=property>order</code></a>’ is used to pull
+     the image up from later in the content to the top, and ‘<a
+     href="#align-self"><code class=property>align-self</code></a>’ is used
+     to center it horizontally.
 
     <li> An <a href="#auto-margins">‘<code class=css>auto</code>’
-     margin</a> above the purchase button forces it to the bottom of the
-     entry box, regardless of the height of the description.
+     margin</a> above the purchase button forces it to the bottom within each
+     entry box, regardless of the height of that item's description.
    </ul>
 
    <pre>

css3-flexbox/Overview.src.html

@@ -305,9 +305,9 @@ <h3 id="overview">
 			can be laid out in any <a href="#flex-direction-property">flow direction</a>
 			(leftwards, rightwards, downwards, or even upwards!)
 		<li>
-			can have their visual order <a href="#flex-flow-row-reverse">reversed</a> or
+			can have their display order <a href="#flex-flow-row-reverse">reversed</a> or
 			<a href="#order-property">rearranged</a> at the style layer
-			(i.e., display order can be independent of source order)
+			(i.e., visual order can be independent of source and speech order)
 		<li>
 			can be laid out linearly along a single (<i title="main axis">main</i>) axis or
 			<a href="#flex-wrap-property">wrapped</a> into multiple lines along a secondary (<i title="cross axis">cross</i>) axis
@@ -326,28 +326,28 @@ <h3 id="overview">
 			Here's an example of a catalog where each item has a title, an photo, a description, and a purchase button.
 			The designer's intention is that each entry has the same overall size,
 			that the photo be above the text,
-			and the purchase buttons aligned at the bottom, regardless of the length of the item's description.
+			and that the purchase buttons aligned at the bottom, regardless of the length of the item's description.
 			Flex layout makes many aspects of this design easy:
 
 		<ul>
 			<li>
-				The catalog uses flex layout to lay out a row of items horizontally,
-				and to ensure they're all equal-height.
+				The catalog uses flex layout to lay out rows of items horizontally,
+				and to ensure that items within a row are all equal-height.
 				Each entry is then itself a column flex container,
 				laying out its contents vertically.
 
 			<li>
-				Within each entry, content is ordered logically with the title first,
-				followed by the description and the photo.
+				Within each entry, the source document content is ordered logically
+				with the title first, followed by the description and the photo.
 				This provides a sensible ordering for speech rendering and in non-CSS browsers.
 				For a more compelling visual presentation, however,
 				'order' is used to pull the image up from later in the content to the top,
-				and  'align-self' to center it horizontally.
+				and 'align-self' is used to center it horizontally.
 
 			<li>
 				An <a href="#auto-margins">''auto'' margin</a> above the purchase button
-				forces it to the bottom of the entry box,
-				regardless of the height of the description.
+				forces it to the bottom within each entry box,
+				regardless of the height of that item's description.
 		</ul>
 
 		<pre>