W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-flexbox Overview.html,1.153,1.154 Overview.src.html,1.151,1.152

From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 14 Feb 2012 10:27:57 +0000
To: public-css-commits@w3.org
Message-Id: <E1RxFc5-0004yb-NS@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv19106

Modified Files:
	Overview.html Overview.src.html 
Log Message:
added page breaking algorithm
changed algorightm for flexible lengths resolutin

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.153
retrieving revision 1.154
diff -u -d -r1.153 -r1.154
--- Overview.html	7 Feb 2012 10:52:50 -0000	1.153
+++ Overview.html	14 Feb 2012 10:27:55 -0000	1.154
@@ -29,11 +29,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 February 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 14 February 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120207/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120207/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120214/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120214/</a>-->
      
 
     <dd><a
@@ -77,7 +77,7 @@
 
     <dd><a
      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
-     with subject line "<code>[css3-flexbox] …message topic…</code>"
+     with subject line "<code>[css3-flexbox] �message topic�</code>"
 
     <dt>Editors:
 
@@ -237,7 +237,7 @@
    <li><a href="#layout-algorithm"><span class=secno>7. </span> Flexbox
     Layout Algorithm</a>
 
-   <li><a href="#pagination"><span class=secno>8. </span> Page breaks in
+   <li><a href="#pagination"><span class=secno>8. </span>Page breaks in
     flexbox</a>
 
    <li><a href="#conformance"><span class=secno>9. </span> Conformance</a>
@@ -351,12 +351,12 @@
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
-   this specification are defined in CSS Level 2 Revision 1 <a
-   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
-   modules may expand the definitions of these value types: for example <a
-   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
-   when combined with this module, expands the definition of the
-   &lt;color&gt; value type as used in this specification.
+   this specification are defined in CSS Level 2 Revision 1 <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
+   the definitions of these value types: for example <a href="#CSS3COLOR"
+   rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
+   this module, expands the definition of the &lt;color&gt; value type as
+   used in this specification.
 
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
@@ -1952,181 +1952,325 @@
   <p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
    lengths</dfn> of the items within a flexbox line:
 
-  <div class=issue>
-   <p>Alex suggests that the following should work more simply:</p>
+  <ol>
+   <li>Determine sign of flexibility
+    <ol>
+     <li>Add sizes of all items, <i>adjusted for min/max</i>.
+
+     <li>If sum of preferred sizes is less than available space, use positive
+      flexibility, otherwise use negative flexibility
+    </ol>
+
+    <p>for the rest of the algorithm use flexibility with the sign determined
+     in this step
+
+   <li>Reset all flexible sizes to their preferred size
+
+   <li>Find free space by subtracting sum of item sizes from available space.
+    
+
+   <li>Distribute free space proportional to flex
+    <ol>
+     <li>If the free space is positive, but step 1 chose negative
+      flexibility, do nothing
+
+     <li>If the free space is negative, but step 1 chose positive
+      flexibility, do nothing
+
+     <li>Add a portion of free space to each flexible item, proportinal to
+      item's flexibility
+    </ol>
+
+   <li>Fix min/max violations
+    <ol>
+     <li>Adjust each flexible item for min/max.
+
+     <li>If the size has changed, it is a violation.
+
+     <li>The violation may be positive (min violation) or negative (max
+      violation). Accumulate the difference.
+    </ol>
+
+   <li>If the sum of all violations is
+    <ol>
+     <li>Zero: done
+
+     <li>Positive:
+      <ol>
+       <li>Freeze items with max violations.
+
+       <li>Go to step 2
+      </ol>
+
+     <li>Negative
+      <ol>
+       <li>Freeze items with min violations
+
+       <li>Go to step 2
+      </ol>
+    </ol>
+  </ol>
+
+  <div class=note>
+   <p>Previous algorithm - compare with above and chose one:</p>
 
    <ol>
-    <li>distribute space
+    <li>If this is the first time this step is reached in the current
+     invocation of this algorithm, <a
+     href="#distribute-the-free-space"><i>distribute the free space</i></a>
+     in the flexbox line, then <a
+     href="#fix-size-constraint-violations"><i>fix max size
+     violations</i></a>, then <a
+     href="#fix-size-constraint-violations"><i>fix min size
+     violations</i></a>.
 
-    <li>fix max violations
+    <li>If the current set of items violating a min size constraint is
+     different from the set in the previous iteration, remove the marks
+     denoting any element as being in violation of a max size constraint, <a
+     href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+     then <a href="#fix-size-constraint-violations"><i>fix max size
+     violations</i></a>.
 
-    <li>distribute space
+    <li>If the current set of items violating a max size constraint is
+     different from the set in the previous iteration, remove the marks
+     denoting any element as being in violation of a min size constraint, <a
+     href="#distribute-the-free-space"><i>distribute the free space</i></a>,
+     then <a href="#fix-size-constraint-violations"><i>fix min size
+     violations</i></a>.
 
-    <li>fix min violations. items with violation lose flexibility.
+    <li>If either of the previous two steps changed the set of items
+     violating their constraints, restart this algorithm.
 
-    <li>repeat until there are no more violations
+    <li>Otherwise, the used value of the main size property of every flexible
+     item is the item's preferred size.
    </ol>
 
-   <p>I need to think on this and ensure it won't give suboptimal results in
-    some cases.</p>
-  </div>
+   <p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
+    a flexbox line:</p>
 
-  <ol>
-   <li>If this is the first time this step is reached in the current
-    invocation of this algorithm, <a
-    href="#distribute-the-free-space"><i>distribute the free space</i></a> in
-    the flexbox line, then <a href="#fix-size-constraint-violations"><i>fix
-    max size violations</i></a>, then <a
-    href="#fix-size-constraint-violations"><i>fix min size
-    violations</i></a>.
+   <ol>
+    <li>If the preferred size of a flexible length was changed from a
+     previous invocation of this algorithm, reset it to its specified value.
 
-   <li>If the current set of items violating a min size constraint is
-    different from the set in the previous iteration, remove the marks
-    denoting any element as being in violation of a max size constraint, <a
-    href="#distribute-the-free-space"><i>distribute the free space</i></a>,
-    then <a href="#fix-size-constraint-violations"><i>fix max size
-    violations</i></a>.
+    <li>Find the available free space. Sum the main sizes of the margin boxes
+     of every flexbox item in the line, treating flexible lengths as their
+     preferred size, and then subtract that from the main size of the
+     flexbox's content box. This value is the available free space. It may be
+     zero, positive, or negative.
 
-   <li>If the current set of items violating a max size constraint is
-    different from the set in the previous iteration, remove the marks
-    denoting any element as being in violation of a min size constraint, <a
-    href="#distribute-the-free-space"><i>distribute the free space</i></a>,
-    then <a href="#fix-size-constraint-violations"><i>fix min size
-    violations</i></a>.
+    <li>
+     <dl>
+      <dt>If the available free space is zero:
 
-   <li>If either of the previous two steps changed the set of items violating
-    their constraints, restart this algorithm.
+      <dd>Do nothing.
 
-   <li>Otherwise, the used value of the main size property of every flexible
-    item is the item's preferred size.
-  </ol>
+      <dt>If the available free space is positive:
 
-  <p class=issue>I'm pretty sure the previous algorithm is guaranteed to
-   terminate. I'm not absolutely certain, though. Help? (It's clear that in
-   practice, it will almost always terminate in one or two iterations.)
+      <dd>Calculate the total flexibility by summing the positive flexibility
+       of every flexible length in the line. For each flexible length,
+       increment its preferred size by a fraction of the available free space
+       equal to its positive flexibility divided by the total flexibility.
 
-  <p>To <dfn id=distribute-the-free-space>distribute the free space</dfn> in
-   a flexbox line:
+      <dt>If the available free space is negative:
 
-  <ol>
-   <li>If the preferred size of a flexible length was changed from a previous
-    invocation of this algorithm, reset it to its specified value.
+      <dd>Calculate the total flexibility by summing the negative flexibility
+       of every flexible length in the line. For each flexible length,
+       increment its preferred size by a fraction of the available free space
+       equal to its negative flexibility divided by the total flexibility.
+       <span class=note>Note: due to the signs involved, incrementing will
+       decrease the preferred size.)</span>
+     </dl>
+   </ol>
 
-   <li>Find the available free space. Sum the main sizes of the margin boxes
-    of every flexbox item in the line, treating flexible lengths as their
-    preferred size, and then subtract that from the main size of the
-    flexbox's content box. This value is the available free space. It may be
-    zero, positive, or negative.
+   <p>To <dfn id=fix-size-constraint-violations
+    title="fix max size violations|fix min size violations">fix size
+    constraint violations</dfn> in a flexbox line:</p>
 
-   <li>
-    <dl>
-     <dt>If the available free space is zero:
+   <ol>
+    <li>If none of the items on the line violate their min or max size
+     constraints (as appropriate), exit this algorithm.
 
-     <dd>Do nothing.
+    <li>Otherwise, for every item in violation of a min or max size
+     constraint (as appropriate), mark them as being in violation of that
+     constraint. While an item is so marked, treat it as if it were
+     inflexible, with its main size property set to its min or max size
+     constraint, as appropriate.
 
-     <dt>If the available free space is positive:
+    <li><a href="#distribute-the-free-space"><i>Distribute the free
+     space</i></a>, then restart this algorithm.
+   </ol>
+  </div>
 
-     <dd>Calculate the total flexibility by summing the positive flexibility
-      of every flexible length in the line. For each flexible length,
-      increment its preferred size by a fraction of the available free space
-      equal to its positive flexibility divided by the total flexibility.
+  <h2 id=pagination><span class=secno>8. </span>Page breaks in flexbox</h2>
 
-     <dt>If the available free space is negative:
+  <p>Flexboxes can break across pages between items, between lines of items
+   (in multi-line mode) and inside items, as long as &lsquo;<code
+   class=property>break-</code>&rsquo; property allow that. All &lsquo;<code
+   class=property>break-</code>&rsquo; properties are supported on flexbox,
+   on flexbox items and inside flexbox items.
 
-     <dd>Calculate the total flexibility by summing the negative flexibility
-      of every flexible length in the line. For each flexible length,
-      increment its preferred size by a fraction of the available free space
-      equal to its negative flexibility divided by the total flexibility.
-      <span class=note>Note: due to the signs involved, incrementing will
-      decrease the preferred size.)</span>
-    </dl>
-  </ol>
+  <p>The following breaking rules refer to fragmentation container as �page�.
+   The same rules apply to any other fragmenters. Change �page� to the
+   appropriate fragmenter type as needed.
 
-  <p>To <dfn id=fix-size-constraint-violations
-   title="fix max size violations|fix min size violations">fix size
-   constraint violations</dfn> in a flexbox line:
+  <p>Breaks in and around flexbox are determined as follows:
 
   <ol>
-   <li>If none of the items on the line violate their min or max size
-    constraints (as appropriate), exit this algorithm.
+   <li> Break-before, break-after, break-inside properties on flexbox itself
+    have effect as normal. If breaks inside flexbox are allowed, break points
+    are determined using following rules.
 
-   <li>Otherwise, for every item in violation of a min or max size constraint
-    (as appropriate), mark them as being in violation of that constraint.
-    While an item is so marked, treat it as if it were inflexible, with its
-    main size property set to its min or max size constraint, as appropriate.
+   <li>When flexbox is continued after a break, flexbox�s available space in
+    block direction is reduced by space consumed in previous pages. Consumed
+    space before page break is
+  </ol>
 
-   <li><a href="#distribute-the-free-space"><i>Distribute the free
-    space</i></a>, then restart this algorithm.
+  <ol>
+   <li style="list-style:lower-latin">If flexbox starts on that page: the
+    distance between start of content box of the flexbox and the end of
+    available space
+
+   <li style="list-style:lower-latin">If flexbox continues from previous
+    page: the size of available space.
   </ol>
 
-  <h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
+  <p>If as a result of this adjustment block-direction size of flexbox
+   becomes negative, it is set to zero.
 
-  <p class=issue>TODO: define how flexbox should break on pages, columns,
-   etc. This may or may not be normative until there is more than one
-   implementation.
+  <ul>
+   <li>When a possible break point needs to be found within an item,
+    <ol>
+     <li style="list-style:lower-latin">If the item has �break-inside:avoid�,
+      it is pushed to the next page
 
-  <p>Very roughly:
+     <li style="list-style:lower-latin">Otherwise, it may be broken,
+      according to breaking rules and algorithms applicable to its display
+      type. Forced breaks in content are handled normally.
+    </ol>
+  </ul>
+
+  <p>This is referred as �break inside the item is considered� in the
+   following steps
 
   <ul>
-   <li>Flexboxes can beak across pages between items, between rows of items
-    (in multi-line mode) and inside items, as long as &lsquo;<code
-    class=property>break-</code>&rsquo; property allow that. All &lsquo;<code
-    class=property>break-</code>&rsquo; properties are supported on flexbox,
-    on flexbox items and inside flexbox items.
+   <li>Column-direction flexbox: single-line
+    <ol>
+     <li style="list-style:lower-latin">Set of items that will fit on current
+      page is determined by adding min/max adjusted preferred sizes of items
+      while there is positive remaining space
 
-   <li>Breaking behavior of a single-line vertical flexbox should be
-    identical to a block in normal flow where children have same sizes and
-    positions (e.g. explicitly set to match computed values in flexbox), same
-    content and same breaking properties. <span class=issue>This is good goal
-    or guidance, but not necessarily good normative definition. Get
-    specific.</span>
+     <li style="list-style:lower-latin">Forced breaks between items are
+      honored and if applied, terminate the set of items that fit on the
+      page.
 
-   <li>Breaking behavior of a horizontal single-line flexbox should be
-    similar (not necessarily identical) to that of a single-row table with
-    same sizing.
+     <li style="list-style:lower-latin">If border box of an item doesn�t fit
+      in current page, a break inside the item is considered
 
-   <li>In horizontal flexbox, a forced break within an items causes
-    subsequent content of that item to go to next container, but it doesn't
-    affect sibling items or their content.
+     <li style="list-style:lower-latin">Items that fit on a page completely
+      or partially are aligned according to �flex-pack� property,
+      independently from the rest of flexbox content.
+    </ol>
 
-   <li>In horizontal multi-line flexbox, values of &lsquo;<code
-    class=property>break-before</code>&rsquo; and &lsquo;<code
-    class=property>break-after</code>&rsquo; for each line are computed from
-    combinatoin of properties on children that fit in that line (or would
-    have fit, given available width and infinite height)
-  </ul>
+   <li>Column-direction flexbox: multi-line
+    <ol>
+     <li style="list-style:lower-latin">Items are collected in lines and laid
+      out as usual, but in available space on current page.
 
-  <p class=issue>TODO: define breaking of vertical multi-line flexbox
+     <li style="list-style:lower-latin">If border box of an item doesn�t fit
+      on main-axis,
+      <ol>
+       <li style="list-style:lower-roman">If it is the last item of the last
+        line, a break inside the item is considered
 
-  <p class=issue>TODO: add more detail: how breaking affect sizing (for
-   broken boxes and boxes after the break) and alignment
+       <li style="list-style:lower-roman">Otherwise the item produces
+        overflow. If visible, it is paginated using same rules as visible
+        overflow of blocks in normal flow
+      </ol>
+    </ol>
+
+    <p class=issue>How to paginate overflow from vertical lines?</p>
+
+   <li>Row-direction flexbox
+    <ol>
+     <li style="list-style:lower-latin">Single-line flexbox is equivalent to
+      one line of multiline flexbox
+
+     <li style="list-style:lower-latin">Main-axis space distribution in each
+      line is done based on complete content of the line, including any
+      content that is already laid out on preceding pages. The hypothetical
+      size of items is calculated without space constraints on cross axis and
+      without considering any break properties.
+
+     <li style="list-style:lower-latin">Main-axis space distribution is
+      repeated for every page. Results of the distribution may be different
+      on pages of different size.
+
+     <li style="list-style:lower-latin">Lines of items are added one at a
+      time while there is positive available space.
+
+     <li style="list-style:lower-latin">Within each line, items are sized and
+      positioned as usual.
+
+     <li style="list-style:lower-latin">Any items with baseline alignment
+      must be aligned before considering breaks inside items.
+
+     <li style="list-style:lower-latin">If border box of an item doesn�t fit
+      in current page, a break inside the item is considered
+
+     <li style="list-style:lower-latin">Break-before and break-after
+      properties have no effect on flexbox items in row-direction flexbox.
+      <p class=issue>Need a better way to handle forced breaks on items,
+       consistent for row and column directions</p>
+
+     <li style="list-style:lower-latin">Items that have fit completely on a
+      previous page and items that are pushed to next page don�t have any
+      rendering, leaving empty space as needed.
+
+     <li style="list-style:lower-latin">Items that fit completely or
+      partially on current page are aligned on cross-axis
+      <ol>
+       <li style="list-style:lower-roman">For the purposes of cross-axis
+        alignment, minimum of remaining available space in flexbox and
+        available space at current page is used.
+
+       <li style="list-style:lower-roman">If an item is broken in the
+        previous step and its alignment is not baseline, its cross-axis size
+        is set to available space. If item alignment is baseline, its
+        cross-axis size is adjusted so that it extends to exactly the end of
+        available space.
+      </ol>
+    </ol>
+
+   <li>Items may overflow flexbox for various reasons, including change of
+    spacing due to breaks. If overflow is visible, all of the above breaking
+    rules apply to the overflow content with no change
+  </ul>
 
   <h2 id=conformance><span class=secno>9. </span> Conformance</h2>
 
   <h3 id=conventions><span class=secno>9.1. </span> Document conventions</h3>
 
   <p>Conformance requirements are expressed with a combination of descriptive
-   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
-   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
-   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
-   normative parts of this document are to be interpreted as described in RFC
-   2119. However, for readability, these words do not appear in all uppercase
-   letters in this specification.
+   assertions and RFC 2119 terminology. The key words �MUST�, �MUST NOT�,
+   �REQUIRED�, �SHALL�, �SHALL NOT�, �SHOULD�, �SHOULD NOT�, �RECOMMENDED�,
+   �MAY�, and �OPTIONAL� in the normative parts of this document are to be
+   interpreted as described in RFC 2119. However, for readability, these
+   words do not appear in all uppercase letters in this specification.
 
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a
    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
 
-  <p>Examples in this specification are introduced with the words “for
-   example” or are set apart from the normative text with
+  <p>Examples in this specification are introduced with the words �for
+   example� or are set apart from the normative text with
    <code>class="example"</code>, like this:
 
   <div class=example>
    <p>This is an example of an informative example.</p>
   </div>
 
-  <p>Informative notes begin with the word “Note” and are set apart from
-   the normative text with <code>class="note"</code>, like this:
+  <p>Informative notes begin with the word �Note� and are set apart from the
+   normative text with <code>class="note"</code>, like this:
 
   <p class=note>Note, this is an informative note.
 
@@ -2265,7 +2409,7 @@
 
      <li>is available to the general public. The implementation may be a
       shipping product or other publicly available version (i.e., beta
-      version, preview release, or “nightly build”). Non-shipping product
+      version, preview release, or �nightly build�). Non-shipping product
       releases must have implemented the feature(s) for a period of at least
       one month in order to demonstrate stability.
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.151
retrieving revision 1.152
diff -u -d -r1.151 -r1.152
--- Overview.src.html	7 Feb 2012 10:52:50 -0000	1.151
+++ Overview.src.html	14 Feb 2012 10:27:55 -0000	1.152
@@ -951,17 +951,47 @@
 
 	<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
 
-	<div class='issue'>
-		<p>Alex suggests that the following should work more simply:</p>
+	<ol>
+	<li>Determine sign of flexibility
 		<ol>
-			<li>distribute space
-			<li>fix max violations
-			<li>distribute space
-			<li>fix min violations. items with violation lose flexibility.
-			<li>repeat until there are no more violations
+		<li>Add sizes of all items, <i>adjusted for min/max</i>.
+		<li>If sum of preferred sizes is less than available space, use positive flexibility, otherwise use negative flexibility
 		</ol>
-		<p>I need to think on this and ensure it won't give suboptimal results in some cases.</p>
-	</div>
+		<p>for the rest of the algorithm use flexibility with the sign determined in this step
+	</li>
+
+	<li>Reset all flexible sizes to their preferred size
+	<li>Find free space by subtracting sum of item sizes from available space.
+	<li>Distribute free space proportional to flex
+		<ol>
+		<li>If the free space is positive, but step 1 chose negative flexibility, do nothing
+		<li>If the free space is negative, but step 1 chose positive flexibility, do nothing
+		<li>Add a portion of free space to each flexible item, proportinal to item's flexibility
+		</ol>
+	<li>Fix min/max violations
+		<ol>
+		<li>Adjust each flexible item for min/max. 
+		<li>If the size has changed, it is a violation. 
+		<li>The violation may be positive (min violation) or negative (max violation). Accumulate the difference.
+		</ol>
+	<li>If the sum of all violations is
+		<ol>
+		<li>Zero: done
+		<li>Positive: 
+			<ol>
+			<li>Freeze items with max violations.
+			<li>Go to step 2
+			</ol>
+		<li>Negative
+			<ol>
+			<li>Freeze items with min violations
+			<li>Go to step 2
+			</ol>
+		</ol>
+	</ol>
+	
+	<div class='note'>
+		<p>Previous algorithm - compare with above and chose one:</p>
 
 	<ol>
 		<li>If this is the first time this step is reached in the current invocation of this algorithm, <i>distribute the free space</i> in the flexbox line, then <i>fix max size violations</i>, then <i>fix min size violations</i>.</li>
@@ -975,7 +1005,6 @@
 		<li>Otherwise, the used value of the main size property of every flexible item is the item's preferred size.</li>
 	</ol>
 
-	<p class='issue'>I'm pretty sure the previous algorithm is guaranteed to terminate.  I'm not absolutely certain, though.  Help?  (It's clear that in practice, it will almost always terminate in one or two iterations.)</p>
 
 	<p>To <dfn>distribute the free space</dfn> in a flexbox line:</p>
 
@@ -1005,31 +1034,164 @@
 
 		<li><i>Distribute the free space</i>, then restart this algorithm.</li>
 	</ol>
+</div>
 
+<h2 id="pagination">Page breaks in flexbox</h2>
 
-<h2 id="pagination">
-Page breaks in flexbox</h2>
+<p>Flexboxes can break
+across pages between items, between lines of items (in multi-line mode) and
+inside items, as long as 'break-' property allow that. All 'break-' properties
+are supported on flexbox, on flexbox items and inside flexbox items.</p>
 
-	<p class="issue">TODO: define how flexbox should break on pages, columns, etc. This may or may not be normative until there is more than one implementation.</p>
+<p>The following breaking rules refer to fragmentation
+container as “page”. The same rules apply to any other fragmenters. Change
+“page” to the appropriate fragmenter type as needed.</p>
 
-	<p>Very roughly:</p>
+<p>Breaks in and around
+flexbox are determined as follows:</p>
 
-	<ul>
-		<li>Flexboxes can beak across pages between items, between rows of items (in multi-line mode) and inside items, as long as 'break-' property allow that. All 'break-' properties are supported on flexbox, on flexbox items and inside flexbox items.</li>
+<ol>
+<li>
+Break-before, break-after,
+break-inside properties on flexbox itself have effect as normal. If breaks
+inside flexbox are allowed, break points are determined using following rules.</li>
 
-		<li>Breaking behavior of a single-line vertical flexbox should be identical to a block in normal flow where children have same sizes and positions (e.g. explicitly set to match computed values in flexbox), same content and same breaking properties. <span class="issue">This is good goal or guidance, but not necessarily good normative definition. Get specific.</span> </li>
+<li>When flexbox is continued
+after a break, flexbox’s available space in block direction is reduced by space
+consumed in previous pages. Consumed space before page break is</li>
 
-		<li>Breaking behavior of a horizontal single-line flexbox should be similar (not necessarily identical) to that of a single-row table with same sizing.</li>
+<ol>
+<li style="list-style:lower-latin">If flexbox starts on that
+page: the distance between start of content box of the flexbox and the end of
+available space</li>
 
-		<li>In horizontal flexbox, a forced break within an items causes subsequent content of that item to go to next container, but it doesn't affect sibling items or their content.</li>
+<li style="list-style:lower-latin">If flexbox continues from
+previous page: the size of available space.</li>
+</ol>
 
-		<li>In horizontal multi-line flexbox, values of 'break-before' and 'break-after' for each line are computed from combinatoin of properties on children that fit in that line (or would have fit, given available width and infinite height)</li>
-	</ul>
+<p>If as a result of this adjustment block-direction size of flexbox
+becomes negative, it is set to zero.</p>
 
-	<p class="issue">TODO: define breaking of vertical multi-line flexbox</p>
+<li>When a possible break
+point needs to be found within an item,
 
-	<p class="issue">TODO: add more detail: how breaking affect sizing (for broken boxes and boxes after the break) and alignment</p>
+<ol>
+<li style="list-style:lower-latin">If the item has
+“break-inside:avoid”, it is pushed to the next page</li>
+
+<li style="list-style:lower-latin">Otherwise, it may be
+broken, according to breaking rules and algorithms applicable to its display
+type. Forced breaks in content are handled normally.</li>
+</ol>
+</li>
+
+<p>This is
+referred as “break inside the item is considered” in the following steps</p>
 
+<li>Column-direction flexbox:
+single-line
+
+<ol>
+<li style="list-style:lower-latin">Set of items that will fit
+on current page is determined by adding min/max adjusted preferred sizes of
+items while there is positive remaining space</li>
+
+<li style="list-style:lower-latin">Forced breaks between
+items are honored and if applied, terminate the set of items that fit on the
+page.</li>
+
+<li style="list-style:lower-latin">If border box of an item
+doesn’t fit in current page, a break inside the item is considered</li>
+
+<li style="list-style:lower-latin">Items that fit on a page
+completely or partially are aligned according to ‘flex-pack’ property,
+independently from the rest of flexbox content.</li>
+</ol>
+</li>
+
+<li>Column-direction flexbox: multi-line
+
+<ol>
+<li style="list-style:lower-latin">Items are collected in lines and
+laid out as usual, but in available space on current page.</li>
+
+<li style="list-style:lower-latin">If border box of an item
+doesn’t fit on main-axis, 
+
+<ol>
+<li style="list-style:lower-roman">If it is the last item of
+the last line, a break inside the item is considered</li>
+
+<li style="list-style:lower-roman">Otherwise the item
+produces overflow. If visible, it is paginated using same rules as visible
+overflow of blocks in normal flow</li>
+</ol>
+</li>
+
+<p class=issue>How to paginate overflow from vertical lines?</p>
+</ol>
+</li>
+
+<li>Row-direction flexbox
+
+<ol>
+<li style="list-style:lower-latin">Single-line flexbox is
+equivalent to one line of multiline flexbox</li>
+
+<li style="list-style:lower-latin">Main-axis space
+distribution in each line is done based on complete content of the line,
+including any content that is already laid out on preceding pages. The
+hypothetical size of items is calculated without space constraints on cross
+axis and without considering any break properties.</li>
+
+<li style="list-style:lower-latin">Main-axis space
+distribution is repeated for every page. Results of the distribution may be
+different on pages of different size.</li>
+
+<li style="list-style:lower-latin">Lines of items are added
+one at a time while there is positive available space.</li>
+
+<li style="list-style:lower-latin">Within each line, items
+are sized and positioned as usual.</li>
+
+<li style="list-style:lower-latin">Any items with baseline
+alignment must be aligned before considering breaks inside items.</li>
+
+<li style="list-style:lower-latin">If border box of an item
+doesn’t fit in current page, a break inside the item is considered</li>
+
+<li style="list-style:lower-latin">Break-before and
+break-after properties have no effect on flexbox items in row-direction
+flexbox. 
+<p class=issue>Need a better way to handle forced breaks on items, consistent for row and column directions</p>
+</li>
+
+<li style="list-style:lower-latin">Items that have fit
+completely on a previous page and items that are pushed to next page don’t have
+any rendering, leaving empty space as needed.</li>
+
+<li style="list-style:lower-latin">Items that fit completely or
+partially on current page are aligned on cross-axis
+
+<ol>
+<li style="list-style:lower-roman">For the purposes of
+cross-axis alignment, minimum of remaining available space in flexbox and
+available space at current page is used.</li>
+
+<li style="list-style:lower-roman">If an item is broken in
+the previous step and its alignment is not baseline, its cross-axis size is set
+to available space. If item alignment is baseline, its cross-axis size is
+adjusted so that it extends to exactly the end of available space.</li>
+</ol>
+</li>
+</ol>
+</li>
+
+<li>Items may overflow flexbox
+for various reasons, including change of spacing due to breaks. If overflow is
+visible, all of the above breaking rules apply to the overflow content with no change</li>
+
+</ol>
 
 <h2 id="conformance">
 Conformance</h2>
Received on Tuesday, 14 February 2012 10:28:00 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC