Expand japanese-flow note with an example.

--HG--
extra : rebase_source : 9a98acf4c5ae9d031761ea73a3bbabb9f4f6398c

Author: tabatkins

css3-flexbox/Overview.html

@@ -1408,7 +1408,8 @@ <h3 id=flex-flow-property><span class=secno>5.3. </span> Flex Direction and
    which together define the flex container's main and cross axes.
 
   <div class=example>
-   <p>Some examples of valid flows:
+   <p>Some examples of valid flows in an English (left-to-right, horizontal
+    writing mode) document:
 
    <table
     style="margin: 0 auto; vertical-align: middle; border-spacing: 2em 1em;">
@@ -1426,10 +1427,8 @@ <h3 id=flex-flow-property><span class=secno>5.3. </span> Flex Direction and
       <td>
        <pre>
 div { flex-flow: column wrap; }
-/* Main-axis is block-direction and lines
-   wrap in the inline direction.  For an 
-   English page, the main-axis is top-to-bottom
-   and lines wrap to the right. */</pre>
+/* Main-axis is block-direction (top to bottom) 
+   and lines wrap in the inline direction (rightwards). */</pre>
 
       <td><img alt height=160 src="images/flex-flow2.svg" width=89>
 
@@ -1444,11 +1443,34 @@ <h3 id=flex-flow-property><span class=secno>5.3. </span> Flex Direction and
    </table>
   </div>
 
-  <p class=note> Note that the ‘<a href="#flex-flow"><code
-   class=property>flex-flow</code></a>’ directions are <i>writing-mode</i>
-   sensitive. In vertical Japanese, for example, a ‘<a
-   href="#flex-flow-row"><code class=css>row</code></a>’ flexbox lays out
-   its contents from top to bottom.
+  <div class=note>
+   <p> Note that the ‘<a href="#flex-flow"><code
+    class=property>flex-flow</code></a>’ directions are <i>writing-mode</i>
+    sensitive. In vertical Japanese, for example, a ‘<a
+    href="#flex-flow-row"><code class=css>row</code></a>’ flexbox lays out
+    its contents from top to bottom, as seen in this example:
+
+   <table style="margin: 1em auto; text-align: center;">
+    <thead>
+     <tr>
+      <th>English
+
+      <th>Japanese
+
+    <tbody>
+     <tr>
+      <td>
+       <pre>flex-flow: row wrap;<br>writing-mode: horizontal-tb;</pre>
+
+      <td>
+       <pre>flex-flow: row wrap;<br>writing-mode: vertical-rl;</pre>
+
+     <tr>
+      <td><img alt src="images/flex-flow-english.svg">
+
+      <td><img alt src="images/flex-flow-japanese.svg">
+   </table>
+  </div>
 
   <h3 id=order-property><span class=secno>5.4. </span> Display Order: the
    ‘<a href="#order"><code class=property>order</code></a>’ property</h3>

css3-flexbox/Overview.src.html

@@ -992,7 +992,7 @@ <h3 id='flex-flow-property'>
 	which together define the flex container's main and cross axes.
 
 	<div class="example">
-		<p>Some examples of valid flows:
+		<p>Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
 
 		<table style="margin: 0 auto; vertical-align: middle; border-spacing: 2em 1em;">
 			<tr>
@@ -1004,10 +1004,8 @@ <h3 id='flex-flow-property'>
 			<tr>
 				<td><pre>
 div { flex-flow: column wrap; }
-/* Main-axis is block-direction and lines
-   wrap in the inline direction.  For an 
-   English page, the main-axis is top-to-bottom
-   and lines wrap to the right. */</pre>
+/* Main-axis is block-direction (top to bottom) 
+   and lines wrap in the inline direction (rightwards). */</pre>
 				<td><img src='images/flex-flow2.svg' width=89 height=160 alt>
 			<tr>
 				<td><pre>
@@ -1018,10 +1016,28 @@ <h3 id='flex-flow-property'>
 		</table>
 	</div>
 
-	<p class='note'>
-		Note that the 'flex-flow' directions are <i>writing-mode</i> sensitive.
-		In vertical Japanese, for example,
-		a ''row'' flexbox lays out its contents from top to bottom.
+	<div class='note'>
+		<p>
+			Note that the 'flex-flow' directions are <i>writing-mode</i> sensitive.
+			In vertical Japanese, for example,
+			a ''row'' flexbox lays out its contents from top to bottom, 
+			as seen in this example:
+		
+		<table style="margin: 1em auto; text-align: center;">
+			<thead>
+				<tr>
+					<th>English
+					<th>Japanese
+			<tbody>
+				<tr>
+					<td><pre>flex-flow: row wrap;<br>writing-mode: horizontal-tb;</pre>
+					<td><pre>flex-flow: row wrap;<br>writing-mode: vertical-rl;</pre>
+				<tr>
+					<td><img src='images/flex-flow-english.svg' alt>
+					<td><img src='images/flex-flow-japanese.svg' alt>
+		</table>
+	</div>
+
 
 
 <h3 id='order-property'>