Added issue about simplifying flex-flow syntax. Editorial fixes.

Author: tabatkins

css3-flexbox/Overview.html

@@ -16,12 +16,12 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 3 September 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 September 2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110903/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110903/</a></dd> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110907/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110907/</a></dd> -->
      <a
      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
 
@@ -252,8 +252,8 @@ <h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
    directly and which children are instead wrapped in anonymous boxes which
    are then <a href="#flexbox-item"><i>flexbox items</i></a>)</span>
 
-  <p>The flexbox layout algorithm works is agnostic as to the physical
-   direction the flexbox happens to be laid out in, so we will define several
+  <p>The flexbox layout algorithm is agnostic as to the physical direction
+   the flexbox happens to be laid out in, so we will define several
    direction-agnostic terms here to make the rest of the spec easier to read
    and understand. The <dfn id=main-axis>main axis</dfn> of a flexbox is the
    axis on which <a href="#flexbox-item"><i>flexbox items</i></a> are laid
@@ -490,11 +490,11 @@ <h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
   <p>First, find the element's <dfn id=hypothetical-neighbors>hypothetical
    neighbors</dfn> by assuming that the element is a normal <a
    href="#flexbox-item"><i>flexbox item</i></a> with &lsquo;<code
-   class=css>flex-order:1</code>&rsquo;, and reorder the flexbox's contents
+   class=css>flex-order:0</code>&rsquo;, and reorder the flexbox's contents
    as mandated by &lsquo;<a href="#flex-order0"><code
    class=property>flex-order</code></a>&rsquo;. The <a
    href="#flexbox-item"><i>flexbox items</i></a> immediately preceding and
-   following (in the flexbox's direction) the element (if any) are the
+   following the element in the flexbox's direction (if any) are the
    element's <a href="#hypothetical-neighbors"><i>hypothetical
    neighbors</i></a>.
 
@@ -727,15 +727,16 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
    aligned by the &lsquo;<a href="#flex-line-pack0"><code
    class=property>flex-line-pack</code></a>&rsquo; property.
 
-  <p>If the second keyword is omitted, the flexbox is single-line, the <a
+  <p>If the second keyword is omitted, the flexbox is <a
+   href="#single-line"><i>single-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 writing mode,
    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>.
 
   <p>If the second keyword is provided, the flexbox is <a
-   href="#multiline">multi-line</a>. The <a
+   href="#multi-line"><i>multi-line</i></a>. The <a
    href="#cross-start"><i>cross-start</i></a> and <a
    href="#cross-end"><i>cross-end</i></a> directions are set as follows:
 
@@ -795,6 +796,26 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
       flex-flow:vertical wrap-reverse }    /* cross axis is left-to-right (opposite to block direction) */</pre>
   </div>
 
+  <div class=issue>
+   <p>Are all these values necessary? I suspect we could get away with just:</p>
+
+   <pre>
+  [ row | row-reverse | column | column-reverse ]
+  [ wrap | wrap-reverse ]?
+|
+  to [ top | bottom ]
+  [ wrap-right | wrap-left ]?
+|
+  to [ right | left ]
+  [ wrap-up | wrap-down ]?</pre>
+
+   <p>In other words, just provide a pure-logical or pure-physical variant,
+    rather than mixing physical and logical like with "horizontal wrap".</p>
+  </div>
+
+  <p class=issue>Is there a good, shorter way to refer to the reversed
+   physical directions than the 8-character "-reverse" suffix?
+
   <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
    &lsquo;<a href="#flex-order0"><code
    class=property>flex-order</code></a>&rsquo; property</h3>

css3-flexbox/Overview.src.html

@@ -65,7 +65,7 @@ <h2 id='box-model'>
 
 	<p>An element with ''display:flexbox'' or ''display:inline-flexbox'' is a <dfn>flexbox</dfn>.  Block-level children of a flexbox, and some other types of children, are called <dfn title="flexbox item|flexbox items|flexbox item's" id="flexbox-item">flexbox items</dfn> and are laid out using the flexbox box model. <span class='note'>(See the <a href="#flex-items">Flexbox Items</a> chapter, below, for specifics on which children are <i>flexbox items</i> directly and which children are instead wrapped in anonymous boxes which are then <i>flexbox items</i>)</span></p>
 
-	<p>The flexbox layout algorithm works is agnostic as to the physical direction the flexbox happens to be laid out in, so we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand.  The <dfn>main axis</dfn> of a flexbox is the axis on which <i>flexbox items</i> are laid out along.  The <i>flexbox items</i> are ordered such that they start on the <dfn>main-start</dfn> side of the flexbox, and go toward the <dfn>main-end</dfn> side.  A <i>flexbox item's</i> width or height, whichever is in the <i>main axis</i>, is the item's <dfn>main size</dfn>.  The <i>flexbox item's</i> 'width' or 'height' property, specifically, that is in the <i>main axis</i> is the item's <dfn>main size property</dfn>.  These terms are mapped to physical directions based on the first keyword in the 'flex-flow' property.</p>
+	<p>The flexbox layout algorithm is agnostic as to the physical direction the flexbox happens to be laid out in, so we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand.  The <dfn>main axis</dfn> of a flexbox is the axis on which <i>flexbox items</i> are laid out along.  The <i>flexbox items</i> are ordered such that they start on the <dfn>main-start</dfn> side of the flexbox, and go toward the <dfn>main-end</dfn> side.  A <i>flexbox item's</i> width or height, whichever is in the <i>main axis</i>, is the item's <dfn>main size</dfn>.  The <i>flexbox item's</i> 'width' or 'height' property, specifically, that is in the <i>main axis</i> is the item's <dfn>main size property</dfn>.  These terms are mapped to physical directions based on the first keyword in the 'flex-flow' property.</p>
 
 	<p>The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>, and similarly has <dfn>cross-start</dfn> and <dfn>cross-end</dfn> directions and sides defined.  The width or height of a <i>flexbox item</i>, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size</dfn>, and similarly the actual 'width' or 'height' property, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size property</dfn>.  These terms are mapped to physical directions based on the orientation of the <i>main axis</i> and the second keyword in the 'flex-flow' property.</p>
 
@@ -189,7 +189,7 @@ <h3 id='flex-items'>
 
 	<p>Absolutely positioned children of a flexbox are not <i>flexbox items</i>, but their "static position" (their position when the 'top'/'right'/'bottom'/'left' properties are ''auto'') responds somewhat to the flexbox's various properties.  The element's static position in the flexbox's <i>cross axis</i> is on the <i>cross-start</i> edge of the flexbox's content box.  The static position in the flexbox's <i>main axis</i> is slightly more complex to compute:</p>
 
-	<p>First, find the element's <dfn>hypothetical neighbors</dfn> by assuming that the element is a normal <i>flexbox item</i> with ''flex-order:1'', and reorder the flexbox's contents as mandated by 'flex-order'.  The <i>flexbox items</i> immediately preceding and following (in the flexbox's direction) the element (if any) are the element's <i>hypothetical neighbors</i>.</p>
+	<p>First, find the element's <dfn>hypothetical neighbors</dfn> by assuming that the element is a normal <i>flexbox item</i> with ''flex-order:0'', and reorder the flexbox's contents as mandated by 'flex-order'.  The <i>flexbox items</i> immediately preceding and following the element in the flexbox's direction (if any) are the element's <i>hypothetical neighbors</i>.</p>
 
 	<p>If the element has two neighbors, its static position in the <i>main axis</i> is exactly in the center of the packing space between them when the flexbox is actually laid out.  If the element has only a preceding neighbor, its static position in the <i>main axis</i> is flush with the <i>main-end</i> edge of the margin box of the neighbor.  If the element has only a following neighbor, its static position in the <i>main axis</i> is flush with the <i>main-start</i> edge of the margin box of the neighbor.  Finally, if the element has no neighbors (the flexbox has no in-flow children at all), the static position in the <i>main axis</i> is based on the value of 'flex-pack': if the value is ''start'' or ''distribute'', it's flush with the <i>main-start</i> edge of the flexbox's content box; if the value is ''end'', it's flush with the <i>main-end</i> edge of the flexbox's content box; if the value is ''center'', it's centered within the flexbox's content box.</p>
 
@@ -295,9 +295,9 @@ <h3 id='flex-flow'>
 
 	<p>The <i>cross axis</i> is always perpendicular to the <i>main axis</i>.  The second keyword, or the lack of it, sets the cross directions (<i>cross-start</i> and <i>cross-end</i>), and dictates whether the flexbox is single-line or multi-line.  The cross directions affect how individual <i>flexbox items</i> respond to the 'flex-align' property, and the direction in which multiple lines are stacked and aligned by the 'flex-line-pack' property.</p>
 
-	<p>If the second keyword is omitted, the flexbox is single-line, the <i>cross-start</i> direction is equivalent to either the "start" or "before" direction of the current writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</p>
+	<p>If the second keyword is omitted, 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 writing mode, whichever is in the <i>cross-axis</i>, and the <i>cross-end</i> direction is the opposite direction of <i>cross-start</i>.</p>
 
-	<p>If the second keyword is provided, the flexbox is <a href="#multiline">multi-line</a>.  The <i>cross-start</i> and <i>cross-end</i> directions are set as follows:</p>
+	<p>If the second keyword is provided, the flexbox is <i>multi-line</i>.  The <i>cross-start</i> and <i>cross-end</i> directions are set as follows:</p>
 
 	<dl>
 		<dt><dfn id='flex-flow-wrap'>wrap</dfn></dt>
@@ -333,6 +333,24 @@ <h3 id='flex-flow'>
       flex-flow:vertical wrap-reverse }    /* cross axis is left-to-right (opposite to block direction) */</pre>
 	</div>
 
+	<div class='issue'>
+		<p>Are all these values necessary?  I suspect we could get away with just:</p>
+
+		<pre>
+  [ row | row-reverse | column | column-reverse ]
+  [ wrap | wrap-reverse ]?
+|
+  to [ top | bottom ]
+  [ wrap-right | wrap-left ]?
+|
+  to [ right | left ]
+  [ wrap-up | wrap-down ]?</pre>
+
+		<p>In other words, just provide a pure-logical or pure-physical variant, rather than mixing physical and logical like with "horizontal wrap".</p>
+	</div>
+
+	<p class='issue'>Is there a good, shorter way to refer to the reversed physical directions than the 8-character "-reverse" suffix?</p>
+
 
 <h3 id='flex-order'>
 Display Order: the 'flex-order' property</h3>