revising examples

Author: howcome

css-multicol/Overview.src.html

@@ -551,10 +551,13 @@ <h2>The multi-column model</h2>
 
 <h2>The number and width of columns</h2>
 
-<p>Finding the number and width of columns is fundamental when
-laying out multi-column content. When the block direction
+<p>Finding the number and width of columns is fundamental when laying
+out multi-column content. These properties are used to set the number
+and width of columns:
+
+<!--When the block direction
 is unconstrained and no column breaks are added through style sheets,
-these two properties determine the outcome:
+these two properties determine the outcome:-->
 
 <ul>
 <li>'column-count'
@@ -564,6 +567,9 @@ <h2>The number and width of columns</h2>
 <p>A third property, 'columns', is a shorthand property which sets both
 'column-width' and 'column-count'.
 
+<p>Other factors, such as the explicit column breaks and height
+constraints, may influence the actual numer and width of columns.
+
 
 <h3 id='cw'>'column-width'</h3>
 
@@ -772,14 +778,20 @@ <h3>Pseudo-algorithm</h3>
 in the pseudo-algorithm: U is the used width of the multi-column
 element.
 
+
+
 <p class=note>The used width U of the multi-column element can depend on the element's contents, in which case it also depends on the computed values of the 'column-count' and 'column-width' properties. This specification does not define how U is calculated. Another module (probably the Basic Box Model [[CSS3BOX]] or the Intrinsic & Extrinsic Sizing Module [[CSS3-SIZING]]) is expected to define this.
 
+<!--
 <p>Two assumptions are being made by the pseudo-algorithm:
 
 <ul>
 <li>that the block direction is unconstrained
 <li>that no column breaks are added through style sheets
 </ul>
+-->
+
+
 
 <p>The <code>floor(X)</code> function returns the largest integer Y &le; X.
 
@@ -804,6 +816,43 @@ <h3>Pseudo-algorithm</h3>
 <p>In paged media, user agents may perform this calculation on a
 per-page basis.
 
+<p>The used value for for 'column-count' is calculated without
+regard for explicit column breaks or constrained column lengths,
+while the actual value takes these into consideration.
+
+<div class=example>
+<p>In this example, the actual column-count is higher than the used column-count due to explicit column breaks:
+
+<pre>
+div { width: 40em; columns: 20em }
+p { break-after: column }
+
+&lt;div style="width: 40em; columns: 20em">
+&lt;p>one
+&lt;p>two
+&lt;p>three
+&lt;/div>
+</pre>
+
+<p>The used column-count is 2 and the actual column-count is 3.
+
+</div>
+
+
+<div class=example>
+<p>The actual column-count may be lower than the used column-count. Consider this example:
+
+<pre>
+&lt;div style="width: 80em; height: 10em; columns: 20em; column-gap: 0; column-fill: auto;">
+foo
+&lt;/div>
+</pre>
+
+<p>The computed column-count is auto, the used column-count is 4, and the actual column-count is 1.
+</div>
+
+
+
 
 
 <h3>Stacking context</h3>