- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 07 Sep 2011 00:54:01 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv7730
Modified Files:
Overview.html Overview.src.html
Log Message:
Added issue about simplifying flex-flow syntax. Editorial fixes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.58
retrieving revision 1.59
diff -u -d -r1.58 -r1.59
--- Overview.html 6 Sep 2011 19:38:34 -0000 1.58
+++ Overview.html 7 Sep 2011 00:53:59 -0000 1.59
@@ -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 @@
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 @@
<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 ‘<code
- class=css>flex-order:1</code>’, and reorder the flexbox's contents
+ class=css>flex-order:0</code>’, and reorder the flexbox's contents
as mandated by ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’. 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,7 +727,8 @@
aligned by the ‘<a href="#flex-line-pack0"><code
class=property>flex-line-pack</code></a>’ 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
@@ -735,7 +736,7 @@
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 @@
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
‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’ property</h3>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.57
retrieving revision 1.58
diff -u -d -r1.57 -r1.58
--- Overview.src.html 6 Sep 2011 19:38:34 -0000 1.57
+++ Overview.src.html 7 Sep 2011 00:53:59 -0000 1.58
@@ -65,7 +65,7 @@
<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 @@
<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 @@
<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 @@
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>
Received on Wednesday, 7 September 2011 00:54:03 UTC