adding column-fill examples, revising text on clipping

Author: howcome

css-multicol/Overview.src.html

@@ -372,6 +372,7 @@ <h2>The multi-column model</h2>
 <div class=gap style="left: 325px"></div>
 </div>
 
+<!--
 <p>To illustrate the effects of the various properties described in
 this specification, variations on a sample document will be used. Here
 is the source code of the sample document:
@@ -404,6 +405,8 @@ <h2>The multi-column model</h2>
 shows how text flows from one column to another. To simplify the
 visualization, the textual content of the different examples vary
 slightly. 
+-->
+
 </div>
 
 
@@ -846,7 +849,7 @@ <h3>Pseudo-algorithm</h3>
 per-page basis.
 
 <p>The used value for 'column-count' is calculated without
-regard for explicit column breaks or constrained column lengths,
+regard for explicit column breaks or constrained column heights,
 while the actual value takes these into consideration.
 
 <div class=example>
@@ -901,7 +904,7 @@ <h2>Column gaps and rules</h2>
 
 <p>Column gaps and rules are placed between columns in the same
 multicol element. The length of the column gaps and column rules
-is equal to the length of the columns. Column gaps take up space. That
+is equal to the column height. Column gaps take up space. That
 is, column gaps will push apart content in adjacent columns (within
 the same multicol element). 
 
@@ -1699,12 +1702,11 @@ <h2>Filling columns</h2>
 
 <p>There are two strategies for filling columns: columns can either be
 balanced, or not. If columns are balanced, user agents should try to
-minimize the variation in content between columns, while also trying to
-minimize the overflow content. If columns are not balanced, they are
-filled sequentially; some columns may end up partially filled, or with
-no content at all. In any case, user agents must honor forced page
-breaks and should try to honor 'widows', 'orphans' and other
-properties that may affect column lengths.
+minimize variations in column height, while honoring forced breaks,
+'widows' and 'orphans', and other properties that may affect column
+heights. If columns are not balanced, they are filled sequentially;
+some columns may end up partially filled, or with no content at all.
+
 
 <h3 id='cf'>'column-fill'</h3>
 
@@ -1742,9 +1744,11 @@ <h3 id='cf'>'column-fill'</h3>
 
 <dl>
 <dt>balance
-<dd>Balance content equally between columns, if possible.
+<dd>Balance content equally between columns, as far as possible. In paged media, only the last page is balanced.
+<dt>balance-all
+<dd>Balance content equally between columns, as far as possible. In paged media, all pages are balanced. 
 <dt>auto
-<dd>Fills columns sequentially.
+<dd>fill columns sequentially
 </dl>
 
 <!--
@@ -1754,24 +1758,208 @@ <h3 id='cf'>'column-fill'</h3>
 -->
 
 <p>In continuous media, this property does not have any effect in
-overflow columns (see below).
+overflow columns.
 
 <!--
 <p>In paged media, this property will only have
 effect on the last page the multicol element appears on.
 -->
 
+
+<div class=example>
+
+<p>In this example, an article only has one short paragraph which fits
+on three lines. The three lines are displayed in three different
+columns due to column balancing.
+
+<pre>
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+</pre>
+
+<div class=cols style="width: 675px; height: 25px">
+
+<div class="col" style="">
+
+<p>
+Ab cde fgh i jkl. Mno<br> 
+</div>
+
+<div class="col" style="left: 175px">
+<p>pqr stu vw xyz. A bc
+</div>
+
+<div class="col" style="left: 350px">
+<p>def g hij klm.
+</div>
+
+<div class="col" style="left: 525px">
+</div>
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+<div class=gap style="left: 500px"></div>
+</div>
+
+</div>
+
+<div class=example>
+
+<p>In this example, column balancing is turned off:
+
+<pre>
+article { width: 60em; height: auto; columns: 4; column-fill: auto }
+</pre>
+
+<p>As a result, the first column is filled with all content:
+
+<div class=cols style="width: 675px; height: 60px">
+
+<div class="col" style="">
+
+<p>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm.
+</div>
+
+<div class="col" style="left: 175px">
+</div>
+
+<div class="col" style="left: 350px">
+</div>
+
+<div class="col" style="left: 525px">
+</div>
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+<div class=gap style="left: 500px"></div>
+</div>
+
+</div>
+
+
+
+
+
+
+<div class=example>
+
+<p>In this example, an article has two paragraphs: first a long one, then a shorter one. This code is applied:
+
+<pre>
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+p { break-after: column }
+</pre>
+
+<p>The shortest column height possible contains five lines of text. After the column height has been established, columns are filled sequentially. As a result, the third column is as high as the first two columns, while the last column ends up being significantly shorter. 
+
+<div class=cols style="width: 675px; height: 100px">
+
+<div class="col" style="">
+
+<p>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br> 
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+</div>
+
+<div class="col" style="left: 175px">
+<p>
+x yz. Abc def ghi jkl.<br>
+M nop qrst uv wx yz.<br>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm.
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br> 
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+</div>
+
+<div class="col" style="left: 525px">
+<p>
+x yz. Abc def ghi jkl.<br>
+M nop qrst uv wx yz.
+</div>
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+<div class=gap style="left: 500px"></div>
+</div>
+
+</div>
+
+
+<div class=example>
+
+<pre>
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+</pre>
+
+<p>In this example, an article starts with an unbreakable figure which sets the column height. Subsequent content is filled sequentially into the remaining columns:
+
+
+<div class=cols style="width: 675px; height: 140px">
+
+<div class="col" style="">
+
+<p>
+</div>
+
+<div class="col" style="left: 175px">
+<p>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br> 
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+x yz. Abc def ghi jkl.<br>
+M nop qrst uv wx yz.<br>
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br> 
+tuv wxy z. Abc de fg<br>
+hi jklmno.
+</div>
+
+<div class="col" style="left: 525px">
+</div>
+<div class=rep style="top: 0; width: 150px; height: 140px"></div>
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+<div class=gap style="left: 500px"></div>
+</div>
+
+</div>
+
+
+
 <h2>Overflow</h2>
 
 <h3>Overflow inside multicol elements</h3>
 
-<p>Floated or in-flow content that extends into column gaps (e.g.,
-long words or images) is clipped in the middle of the column gap.
+<!--<p>Floated or in-flow content that extends into column gaps (e.g.,
+long words or images) is clipped in the middle of the column gap.-->
+
+<p>Floated or in-flow content that extends into column gaps or neighboring columns &mdash; e.g.,
+long words or images &mdash; is not clipped and may therefore cause overflow. 
+
 
 <div class=example>
 
-<p>In this example, the black image is wider than the column, and is
-therefore clipped. 
+<p>In this example, the black image is wider than the column:
 
 <div class=cols>
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.
@@ -1792,7 +1980,7 @@ <h3>Overflow inside multicol elements</h3>
 luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
 penatibus et magni.</div>
 
-<div class=rep style="width: 163px"></div>
+<div class=rep style="width: 183px"></div>
 <div class=gap style="left: 150px"></div>
 <div class=gap style="left: 325px"></div>
 </div>