Editorial work on collapsed items section; align terminology with CSS2.1, add some better explanations.

Author: fantasai

css3-flexbox/Overview.html

@@ -731,40 +731,41 @@ <h3 id=abspos-flex-items><span class=secno>4.2. </span> Out-of-flow Items</h3>
 
   <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3>
 
-  <p> Using ‘<code class=css>visibility:collapse</code>’ on a flex item
-   produces an effect similar to ‘<code
-   class=css>visibility:collapse</code>’ on a table-row or table-column;
-   the collapsed element is removed from rendering entirely (like it was
-   ‘<code class=css>display:none</code>’), but it leaves behind a "strut"
-   that helps keep the flex container's layout stable. If a flex container
-   has only one line (whether it's <a
-   href="#single-line"><i>single-line</i></a> or <a
-   href="#multi-line"><i>multi-line</i></a>), dynamically collapsing or
-   uncollapsing items is guaranteed to have no effect on the flex container's
-   <a href="#cross-size"><i>cross size</i></a>, so it won't cause the rest of
-   your page's layout to "wobble". (A flex container with multiple lines may
-   or may not benefit from this effect, depending on exactly how it is laid
-   out.)
-
-  <p> Though collapsed flex items aren't rendered, they still generate a box.
-   (Only ‘<code class=css>display:none</code>’ actually prevents an
-   element from generating a box.) As such, some effects that depend on an
-   element having a box (like incrementing counters or running animations and
-   transitions) still work on collapsed items, unlike ‘<code
-   class=css>display:none</code>’ items.
+  <p> Specifying ‘<code class=css>visibility:collapse</code>’ on a flex
+   item causes it to become a <dfn id=collapsed-flex-item
+   title="collapsed flex item|collapsed">collapsed flex item</dfn>, producing
+   an effect similar to ‘<code class=css>visibility:collapse</code>’ on a
+   table-row or table-column: the collapsed element is removed from rendering
+   entirely, but leaves behind a "strut" that keeps the flex line's
+   cross-size stable. Thus, if a flex container has only one flex line,
+   dynamically collapsing or uncollapsing items is guaranteed to have no
+   effect on the flex container's <a href="#cross-size"><i>cross size</i></a>
+   and won't cause the rest of the page's layout to "wobble". Flex line
+   wrapping <em>is</em> re-done after collapsing, however, so the cross-size
+   of a flex container with multiple lines might or might not change.
+
+  <p> Though collapsed flex items aren't rendered, they do appear in the <a
+   href="http://www.w3.org/TR/CSS21/intro.html#formatting-structure">formatting
+   struture</a>. Therefore, unlike on ‘<code
+   class=css>display:none</code>’ items <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, effects that depend on an
+   element appearing in the formatting structure (like incrementing counters
+   or running animations and transitions) still operate on collapsed items.
+
+  <p> To compute the size of the strut, flex layout is first performed with
+   all items uncollapsed, and then re-run with each collapsed item replaced
+   by a strut that maintains the original cross-size of the item's original
+   line. See the <a href="#layout-algorithm">Flex Layout Algorithm</a> for
+   the normative definition of how ‘<code
+   class=css>visibility:collapse</code>’ interacts with flex layout.
 
   <p class=note> Note that using ‘<code
    class=css>visibility:collapse</code>’ on any flex items will cause the
    flex layout algorithm to repeat partway through, re-running the most
    expensive steps. It's recommended that authors continue to use ‘<code
-   class=css>display:none</code>’ to hide items if the special effects of
-   ‘<code class=css>visibility:collapse</code>’ aren't explicitly
-   required, as that is more efficient for the layout engine.
-
-  <p> The normative definition of how ‘<code
-   class=css>visibility:collapse</code>’ interacts with the flex layout
-   algorithm is defined <a href="#layout-algorithm">later in this
-   specification</a>.
+   class=css>display:none</code>’ to hide items if the items will not be
+   dynamically collapsed and uncollapsed, as that is more efficient for the
+   layout engine.
 
   <h3 id=min-size-auto><span class=secno>4.4. </span> Implied Minimum Size of
    Flex Items</h3>
@@ -3519,6 +3520,12 @@ <h2 class=no-num id=index>Index</h2>
     title="''center''"><strong>8.4.</strong></a>, <a href="#flex-pack-center"
     title="''center''"><strong>8.2.</strong></a>
 
+   <li>collapsed, <a href="#collapsed-flex-item"
+    title=collapsed><strong>4.3.</strong></a>
+
+   <li>collapsed flex item, <a href="#collapsed-flex-item"
+    title="collapsed flex item"><strong>4.3.</strong></a>
+
    <li>‘<a href="#flex-flow-column"><code class=css>column</code></a>’,
     <a href="#flex-flow-column" title="''column''"><strong>5.1.</strong></a>
 

css3-flexbox/Overview.src.html

@@ -415,43 +415,42 @@ <h3 id='visibility-collapse'>
 Collapsed Items</h3>
 
 	<p>
-		Using ''visibility:collapse'' on a flex item
-		produces an effect similar to ''visibility:collapse'' on a table-row or table-column;
-		the collapsed element is removed from rendering entirely
-		(like it was ''display:none''),
-		but it leaves behind a "strut" that helps keep the flex container's layout stable.
-		If a flex container has only one line
-		(whether it's <i>single-line</i> or <i>multi-line</i>),
+		Specifying ''visibility:collapse'' on a flex item
+		causes it to become a <dfn title="collapsed flex item|collapsed">collapsed flex item</dfn>,
+		producing an effect similar to ''visibility:collapse'' on a table-row or table-column:
+		the collapsed element is removed from rendering entirely,
+		but leaves behind a "strut" that keeps the flex line's cross-size stable.
+		Thus, if a flex container has only one flex line,
 		dynamically collapsing or uncollapsing items
-		is guaranteed to have no effect on the flex container's <i>cross size</i>,
-		so it won't cause the rest of your page's layout to "wobble".
-		(A flex container with multiple lines may or may not benefit from this effect,
-		depending on exactly how it is laid out.)
+		is guaranteed to have no effect on the flex container's <i>cross size</i>
+		and won't cause the rest of the page's layout to "wobble".
+		Flex line wrapping <em>is</em> re-done after collapsing, however,
+		so the cross-size of a flex container with multiple lines might or might not change.
 
 	<p>
 		Though collapsed flex items aren't rendered,
-		they still generate a box.
-		(Only ''display:none'' actually prevents an element from generating a box.)
-		As such,
-		some effects that depend on an element having a box
+		they do appear in the <a href="http://www.w3.org/TR/CSS21/intro.html#formatting-structure">formatting struture</a>.
+		Therefore, unlike on ''display:none'' items [[!CSS21]],
+		effects that depend on an element appearing in the formatting structure
 		(like incrementing counters or running animations and transitions)
-		still work on collapsed items,
-		unlike ''display:none'' items.
+		still operate on collapsed items.
+
+	<p>
+		To compute the size of the strut, flex layout is first performed with all items uncollapsed,
+		and then re-run with each collapsed item replaced by a strut that maintains
+		the original cross-size of the item's original line.
+		See the <a href="#layout-algorithm">Flex Layout Algorithm</a>
+		for the normative definition of how ''visibility:collapse''
+		interacts with flex layout.
 
 	<p class='note'>
 		Note that using ''visibility:collapse'' on any flex items
 		will cause the flex layout algorithm to repeat partway through,
 		re-running the most expensive steps.
 		It's recommended that authors continue to use ''display:none'' to hide items
-		if the special effects of ''visibility:collapse'' aren't explicitly required,
+		if the items will not be dynamically collapsed and uncollapsed,
 		as that is more efficient for the layout engine.
 
-	<p>
-		The normative definition of how ''visibility:collapse''
-		interacts with the flex layout algorithm
-		is defined <a href="#layout-algorithm">later in this specification</a>.
-
-
 <h3 id='min-size-auto'>
 Implied Minimum Size of Flex Items</h3>