(merge)

Author: bert-github

css3-flexbox/Overview.html

@@ -206,11 +206,11 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 August 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 8 August 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120807/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120807/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120808/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120808/</a>-->
 
 
     <dd><a
@@ -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>
@@ -1301,6 +1303,19 @@ <h2 id=ordering-and-orientation><span class=secno>5. </span> Ordering and
    class=property>flex-wrap</code></a>’, and ‘<a href="#order"><code
    class=property>order</code></a>’ properties.
 
+  <p class=note> The reordering capabilities of flex layout intentionally
+   affect <em>only the visual rendering</em>, leaving speech order and
+   navigation based on the source order. This allows authors to manipulate
+   the visual presentation while leaving the source order intact for non-CSS
+   UAs and for linear models such as speech and sequential navigation. See <a
+   href="#order-accessibility">Reordering and Accessibility</a> and the <a
+   href="#overview">Flex Layout Overview</a> for examples that use this
+   dichotomy to improve accessibility.
+
+  <p> Authors <em>must not</em> use these techniques as a substitute for
+   correct source ordering, as that can ruin the accessibility of the
+   document.
+
   <h3 id=flex-direction-property><span class=secno>5.1. </span> Flex Flow
    Direction: the ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’ property</h3>
@@ -1723,8 +1738,8 @@ <h4 id=order-accessibility><span class=secno>5.4.1. </span>Reordering and
    Accessibility</h4>
 
   <p> The ‘<a href="#order"><code class=property>order</code></a>’
-   property <em>must not</em> affect ordering in non-visual media (such as <a
-   href="http://www.w3.org/TR/css3-speech/">speech</a>). Similarly, ‘<a
+   property <em>does not</em> affect ordering in non-visual media (such as <a
+   href="http://www.w3.org/TR/css3-speech/">speech</a>). Likewise, ‘<a
    href="#order"><code class=property>order</code></a>’ does not affect the
    default traversal order of sequential navigation modes (such as cycling
    through links, see e.g. ‘<code class=property>nav-index</code>’ <a
@@ -1737,10 +1752,11 @@ <h4 id=order-accessibility><span class=secno>5.4.1. </span>Reordering and
    class=property>order</code></a>’ to perform logical reordering are
    non-conforming.
 
-  <p class=note> This is so non-visual media and non-CSS UAs, which typically
-   present content linearly, can be catered to with a logical source order,
+  <p class=note> This is so that non-visual media and non-CSS UAs, which
+   typically present content linearly, can rely on a logical source order,
    while ‘<a href="#order"><code class=property>order</code></a>’ is used
-   to rearrange the visual order.
+   to tailor the visual order. (Since visual perception is two-dimensional
+   and non-linear, the desired visual order is not always logical.)
 
   <div class=example>
    <p> Many web pages have a similar shape in the markup, with a header on
@@ -4000,7 +4016,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4015,7 +4031,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4030,31 +4046,24 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>‘auto’ computes to parent's ‘align-items’; otherwise as
-      specified
+     <td>
 
      <td>visual
 
     <tr>
      <th><span class=property>display</span>
 
-     <td>flex | inline-flex
-
-    <tr>
-     <th><a class=property href="#flex">flex</a>
-
-     <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
-      &lt;&apos;flex-basis&apos;> ]
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>flex items
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>visual
+     <td>
 
     <tr>
      <th><a class=property href="#flex-basis-propdef">flex-basis</a>
@@ -4067,10 +4076,10 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>as specified, with lengths made absolute
-
      <td>relative to the flex container's inner main size
 
+     <td>visual
+
     <tr>
      <th><a class=property href="#flex-direction">flex-direction</a>
 
@@ -4082,7 +4091,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4097,7 +4106,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>see individual properties
 
-     <td>see individual properties
+     <td>
 
      <td>visual
 
@@ -4112,7 +4121,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4127,7 +4136,23 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
+
+     <td>visual
+
+    <tr>
+     <th><a class=property href="#flex">flex</a>
+
+     <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
+      &lt;&apos;flex-basis&apos;> ]
+
+     <td>see individual properties
+
+     <td>flex items
+
+     <td>see individual properties
+
+     <td>
 
      <td>visual
 
@@ -4142,7 +4167,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4157,19 +4182,25 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
     <tr>
      <th><span class=property>min-width</span>, <span
       class=property>min-height</span>
 
-     <td>auto
+     <td>
 
-     <td>auto
+     <td>
 
-     <td>the percentage as specified or the absolute length or a keyword
+     <td>
+
+     <td>
+
+     <td>
+
+     <td>
 
     <tr>
      <th><a class=property href="#order">order</a>
@@ -4182,7 +4213,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
   </table>

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>
@@ -940,6 +940,21 @@ <h2>
 		such as hacks using the 'float' and 'clear' properties.
 		This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'order' properties.
 
+	<p class="note">
+		The reordering capabilities of flex layout intentionally affect
+		<em>only the visual rendering</em>,
+		leaving speech order and navigation based on the source order.
+		This allows authors to manipulate the visual presentation
+		while leaving the source order intact for non-CSS UAs and for
+		linear models such as speech and sequential navigation.
+		See <a href="#order-accessibility">Reordering and Accessibility</a>
+		and the <a href="#overview">Flex Layout Overview</a> for examples
+		that use this dichotomy to improve accessibility.
+
+	<p>
+		Authors <em>must not</em> use these techniques as a substitute for correct source ordering,
+		as that can ruin the accessibility of the document.
+
 <h3 id='flex-direction-property'>
 Flex Flow Direction: the 'flex-direction' property</h3>
 
@@ -1235,18 +1250,20 @@ <h3 id='order-property'>
 	<h4 id="order-accessibility">Reordering and Accessibility</h4>
 
 	<p>
-		The 'order' property <em>must not</em> affect ordering in non-visual media 
+		The 'order' property <em>does not</em> affect ordering in non-visual media 
 		(such as <a href="http://www.w3.org/TR/css3-speech/">speech</a>).
-		Similarly, 'order' does not affect
+		Likewise, 'order' does not affect
 		the default traversal order of sequential navigation modes
 		(such as cycling through links, see e.g. 'nav-index' [[CSS3UI]] or <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a> [[HTML40]]).
 		Authors <em>must</em> use 'order' only for visual, not logical, reordering of content;
 		style sheets that use 'order' to perform logical reordering are non-conforming.
 	<p class='note'>
-		This is so non-visual media and non-CSS UAs,
+		This is so that non-visual media and non-CSS UAs,
 		which typically present content linearly,
-		can be catered to with a logical source order,
-		while 'order' is used to rearrange the visual order.
+		can rely on a logical source order,
+		while 'order' is used to tailor the visual order.
+		(Since visual perception is two-dimensional and non-linear,
+		the desired visual order is not always logical.)
 
 	<div class='example'>
 		<p>