[css-flexbox] Fix timeless's nits, part I <https://lists.w3.org/Archives/Public/www-style/2015Jun/0075.html>

Author: fantasai

css-flexbox/Overview.bs

@@ -551,7 +551,7 @@ Flex Items</h2>
 	However, an anonymous flex item that contains only
 	<a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a>
 	(i.e. characters that can be affected by the 'white-space' property)
-	is not rendered, as if it were ''display:none''.
+	is not rendered (just as if it were ''display:none'').
 
 	<div class="example">
 		<p>Examples of flex items:
@@ -576,6 +576,33 @@ Flex Items</h2>
 		    &lt;/span>
 		&lt;/div>
 		</pre>
+
+		<figure>
+			<figcaption>Flex items determined from above code block</figcaption>
+			<a href="examples/flex-item-determination.html">
+				<object type="image/png" data="images/flex-item-determination.png">
+					<ol>
+						<li>Flex item containing <samp>block</samp>.
+						<li>Flex item containing <samp>float</samp>.
+						<li>(Anonymous, unstyleable) flex item containing <samp>anonymous item 3</samp>.
+						<li>Flex item containing three blocks in succession:
+							<ul>
+								<li>Anonymous block containing <samp>item 4</samp>.
+								<li><code>&lt;q></code> element block containing <samp>item 4</samp>.
+								<li>Anonymous block containing <samp>item 4</samp>.
+							</ul>
+					</ol>
+				</object>
+			</a>
+		</figure>
+
+		Note that the inter-element white space disappears:
+		it does not become its own flex item,
+		even though the inter-element text <em>does</em> get wrapped in an anonymous flex item.
+
+		Note also that the anonymous item's box is unstyleable,
+		since there is no element to assign style rules to.
+		Its contents will however inherit styles (such as font settings) from the flex container.
 	</div>
 
 	A <a>flex item</a> establishes a new formatting context for its contents.
@@ -976,7 +1003,7 @@ Flex Flow Direction: the 'flex-direction' property</h3>
 
 	The 'flex-direction' property specifies how <a>flex items</a> are placed in the flex container,
 	by setting the direction of the flex container's <a>main axis</a>.
-	This determines the direction that flex items are laid out in.
+	This determines the direction in which flex items are laid out.
 
 	<dl dfn-type=value dfn-for=flex-direction>
 		<dt><dfn>row</dfn>
@@ -1351,7 +1378,7 @@ Flex Lines</h2>
 	In a <a>multi-line</a> <a>flex container</a> (even one with only a single line),
 	the <a>cross size</a> of each line
 	is the minimum size necessary to contain the <a>flex items</a> on the line
-	(after aligment due to 'align-self'),
+	(after alignment due to 'align-self'),
 	and the lines are aligned within the flex container with the 'align-content' property.
 	In a <a>single-line</a> <a>flex container</a>,
 	the <a>cross size</a> of the line is the <a>cross size</a> of the flex container,
@@ -2783,14 +2810,14 @@ Fragmenting Flex Layout</h2>
 			the entire fragment is moved to the next page.
 
 		<li>
-			When a <a>multi-line</a> colum flex container breaks,
+			When a <a>multi-line</a> column flex container breaks,
 			each fragment has its own "stack" of flex lines,
 			just like each fragment of a multi-column element
 			has its own row of column boxes.
 
 		<li>
 			Aside from the rearrangement of items imposed by the previous point,
-			UAs should attempt to minimize distortation of the flex container
+			UAs should attempt to minimize distortion of the flex container
 			with respect to unfragmented flow.
 	</ul>
 

css-flexbox/Overview.html

@@ -303,7 +303,7 @@
   <div class="head">
    <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a></p>
    <h1 class="p-name no-ref" id="title">CSS Flexible Box Layout Module Level 1</h1>
-   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-08-31">31 August 2015</time></span></h2>
+   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-09-01">1 September 2015</time></span></h2>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
@@ -749,9 +749,9 @@ <h2 class="heading settled" data-level="4" id="flex-items"><span class="secno">4
    <p>Each in-flow child of a <a data-link-type="dfn" href="#flex-container">flex container</a> becomes a <a data-link-type="dfn" href="#flex-item">flex item</a>,
 	and each contiguous run of text that is directly contained inside a <a data-link-type="dfn" href="#flex-container">flex container</a> is wrapped in an anonymous <a data-link-type="dfn" href="#flex-item">flex item</a>.
 	However, an anonymous flex item that contains only <a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a> (i.e. characters that can be affected by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">white-space</a> property)
-	is not rendered, as if it were <span class="css">display:none</span>.</p>
-   <div class="example" id="example-25a54dcc">
-    <a class="self-link" href="#example-25a54dcc"></a>
+	is not rendered (just as if it were <span class="css">display:none</span>).</p>
+   <div class="example" id="example-08a64279">
+    <a class="self-link" href="#example-08a64279"></a>
     <p>Examples of flex items: </p>
 <pre class="lang-markup">&lt;div style="display:flex">
 
@@ -773,6 +773,16 @@ <h2 class="heading settled" data-level="4" id="flex-items"><span class="secno">4
     &lt;/span>
 &lt;/div>
 </pre>
+    <figure>
+     <figcaption>Flex items determined from above code block</figcaption>
+     <a href="examples/flex-item-determination.html"> <object data="images/flex-item-determination.png" type="image/png"> <ol> <li>Flex item containing <samp>block</samp>. </li><li>Flex item containing <samp>float</samp>. </li><li>(Anonymous, unstyleable) flex item containing <samp>anonymous item 3</samp>. </li><li>Flex item containing three blocks in succession: <ul> <li>Anonymous block containing <samp>item 4</samp>. </li><li><code>&lt;q></code> element block containing <samp>item 4</samp>. </li><li>Anonymous block containing <samp>item 4</samp>. </li></ul> </li></ol> </object> </a>
+    </figure>
+    <p>Note that the inter-element white space disappears:
+		it does not become its own flex item,
+		even though the inter-element text <em>does</em> get wrapped in an anonymous flex item.</p>
+    <p>Note also that the anonymous item’s box is unstyleable,
+		since there is no element to assign style rules to.
+		Its contents will however inherit styles (such as font settings) from the flex container.</p>
    </div>
    <p>A <a data-link-type="dfn" href="#flex-item">flex item</a> establishes a new formatting context for its contents.
 	The type of this formatting context is determined by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a> value, as usual.
@@ -1394,7 +1404,7 @@ <h2 class="heading settled" data-level="6" id="flex-lines"><span class="secno">6
    <p>In a <a data-link-type="dfn" href="#multi-line">multi-line</a><a data-link-type="dfn" href="#flex-container">flex container</a> (even one with only a single line),
 	the <a data-link-type="dfn" href="#cross-size">cross size</a> of each line
 	is the minimum size necessary to contain the <a data-link-type="dfn" href="#flex-item">flex items</a> on the line
-	(after aligment due to <a class="property" data-link-type="propdesc" href="#propdef-align-self">align-self</a>),
+	(after alignment due to <a class="property" data-link-type="propdesc" href="#propdef-align-self">align-self</a>),
 	and the lines are aligned within the flex container with the <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a> property.
 	In a <a data-link-type="dfn" href="#single-line">single-line</a><a data-link-type="dfn" href="#flex-container">flex container</a>,
 	the <a data-link-type="dfn" href="#cross-size">cross size</a> of the line is the <a data-link-type="dfn" href="#cross-size">cross size</a> of the flex container,
@@ -2478,12 +2488,12 @@ <h2 class="heading settled" data-level="10" id="pagination"><span class="secno">
     <li> If the first fragment of the flex container is not at the top of the page,
 			and some of its flex items don’t fit in the remaining space on the page,
 			the entire fragment is moved to the next page. 
-    <li> When a <a data-link-type="dfn" href="#multi-line">multi-line</a> colum flex container breaks,
+    <li> When a <a data-link-type="dfn" href="#multi-line">multi-line</a> column flex container breaks,
 			each fragment has its own "stack" of flex lines,
 			just like each fragment of a multi-column element
 			has its own row of column boxes. 
     <li> Aside from the rearrangement of items imposed by the previous point,
-			UAs should attempt to minimize distortation of the flex container
+			UAs should attempt to minimize distortion of the flex container
 			with respect to unfragmented flow. 
    </ul>
    <h3 class="heading settled" data-level="10.1" id="pagination-algo"><span class="secno">10.1. </span><span class="content"> Sample Flex Fragmentation Algorithm</span><a class="self-link" href="#pagination-algo"></a></h3>

css-flexbox/examples/flex-item-determination.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<style>
+/* Flex it */
+.container { display: flex; }
+
+/* Make it pretty */
+div, span {
+  margin: 0.125em;
+  padding: 0.125em;
+  border-radius: 0.25em;
+  list-style: none;
+  color: white;
+  text-align: center;
+}
+.container { background: #444; float: left; }
+.container > * { background: #888; }
+</style>
+
+
+<div class="container">
+
+    <!-- flex item: block child -->
+    <div id="item1">block</div>
+
+    <!-- flex item: floated element; floating is ignored -->
+    <div id="item2" style="float: left;">float</div>
+
+    <!-- flex item: anonymous block box around inline content -->
+    anonymous item 3
+    <!-- note that since it has no wrapper element this item can't be styled! -->
+
+    <!-- flex item: inline child -->
+    <span>
+        item 4
+        <!-- flex items do not split around blocks -->
+        <q style="display: block" id=not-an-item>item 4</q>
+        item 4
+    </span>
+</div>

css-flexbox/images/flex-item-determination.png

@@ -14,8 +14,8 @@ Issue 2.
 Summary:  Should min/max-content sizes of flex containers include flex-basis?
 From:     fantasai
 Comment:  http://www.w3.org/mid/55D6D14A.3010202@inkedblade.net
-Response: 
-Open:     Retracted, needs editing.
+Response: None needed
+Closed:   Retracted
 Resolved: [Paris F2F]
 ----
 Issue 3.
@@ -43,7 +43,7 @@ Issue 6.
 Summary:  Do flex item determination before anonymous box fixup.
 From:     fantasai
 Comment:  http://www.w3.org/mid/55A95E05.8040208@inkedblade.net
-Open:     Needs editing
+Closed:   Accepted
 Resolved: [Paris F2F]
 ----
 Issue 7.