machine-generated version

Author: howcome

css-multicol/Overview.html

@@ -507,12 +507,12 @@ <h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
 
     <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:
 
-   <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:
-
-   <pre class=html>
+<pre class="html">
 &lt;html>
 &lt;style type="text/css">
 div {
@@ -536,10 +536,11 @@ <h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
 &lt;/html>
 </pre>
 
-   <p>The nonsensical text in the example is the English alphabet which shows
-    how text flows from one column to another. To simplify the visualization,
-    the textual content of the different examples vary slightly.
-  </div>
+<p>The nonsensical text in the example is the English alphabet which
+shows how text flows from one column to another. To simplify the
+visualization, the textual content of the different examples vary
+slightly. 
+--></div>
 
   <p>Column boxes are block container boxes. That is, column boxes behave
    like block-level, table cell, and inline-block boxes as per CSS 2.1,
@@ -1036,7 +1037,7 @@ <h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>
 
   <p>The used value for ‘<a href="#column-count"><code
    class=property>column-count</code></a>’ is calculated without regard for
-   explicit column breaks or constrained column lengths, while the actual
+   explicit column breaks or constrained column heights, while the actual
    value takes these into consideration.
 
   <div class=example>
@@ -1089,9 +1090,8 @@ <h2 id=column-gaps-and-rules><span class=secno>4. </span>Column gaps and
 
   <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, column gaps
-   will push apart content in adjacent columns (within the same multicol
-   element).
+   column height. Column gaps take up space. That is, column gaps will push
+   apart content in adjacent columns (within the same multicol element).
 
   <p>A column rule is drawn in the middle of the column gap with the
    endpoints at opposing content edges of the multicol element. Column rules
@@ -2085,13 +2085,11 @@ <h2 id=filling-columns><span class=secno>7. </span>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 ‘<code class=property>widows</code>’, ‘<code
-   class=property>orphans</code>’ and other properties that may affect
-   column lengths.
+   minimize variations in column height, while honoring forced breaks,
+   ‘<code class=property>widows</code>’ and ‘<code
+   class=property>orphans</code>’, 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><span class=secno>7.1. </span>‘<a href="#column-fill"><code
    class=property>column-fill</code></a>’</h3>
@@ -2149,11 +2147,17 @@ <h3 id=cf><span class=secno>7.1. </span>‘<a href="#column-fill"><code
   <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>
   <!--
 <p>In continuous media, this property will only be consulted if the
@@ -2162,22 +2166,182 @@ <h3 id=cf><span class=secno>7.1. </span>‘<a href="#column-fill"><code
 -->
 
   <p>In continuous media, this property does not have any effect in overflow
-   columns (see below). <!--
+   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 id=overflow><span class=secno>8. </span>Overflow</h2>
 
   <h3 id=overflow-inside-multicol-elements><span class=secno>8.1.
    </span>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 — e.g., long words or images — 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>
@@ -2217,7 +2381,7 @@ <h3 id=overflow-inside-multicol-elements><span class=secno>8.1.
       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>