- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 09 Jan 2012 18:35:45 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-multicol
In directory hutz:/tmp/cvs-serv10768
Modified Files:
Overview.src.html
Log Message:
revising text based on Anton Prowse's message, adding examples
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-multicol/Overview.src.html,v
retrieving revision 1.139
retrieving revision 1.140
diff -u -d -r1.139 -r1.140
--- Overview.src.html 15 May 2011 19:37:57 -0000 1.139
+++ Overview.src.html 9 Jan 2012 18:35:43 -0000 1.140
@@ -881,12 +881,11 @@
endpoints at opposing content edges of the multicol element. Column
rules do not take up space. That is, the presence or thickness of a
column rule will not alter the placement of anything else. If a column
-rule is wider than its gap, the column rule will overlap adjacent
-column boxes, and possibly extend outside the box of the multicol
+rule is wider than its gap, the adjacent column boxes will overlap the
+rule, and the rule may possibly extend outside the box of the multicol
element. Column rules are painted just above the background of the
-multicol element. This allows child elements with 'z-index' values to
-be on top of column rules. Column rules are only drawn between two
-columns that both have content.
+multicol element. Column rules are only drawn between two columns that
+both have content.
<h3>'column-gap'</h3>
@@ -1090,7 +1089,7 @@
<p>When content is laid out in multiple columns, the user agent must
determine where column breaks are placed. The problem of breaking
-content into columns is similar to breaking content into pages.
+content into columns is similar to breaking content into pages, which is described in [[!CSS21]]. <!--add specific reference to 13.3.3 -->
<p>Three new properties are introduced to allow column breaks to be
described in the same properties as page breaks: 'break-before',
@@ -1269,10 +1268,7 @@
<td>none
<tr>
<td><em>Applies to:</em>
-<!--
- <td>static, non-floating elements,
--->
- <td>block-level elements, except floating and absolutely positioned elements
+ <td>in-flow block-level elements
<tr>
<td><em>Inherited:</em>
<td>no
@@ -1284,7 +1280,7 @@
<td>visual
<tr>
<td><em>Computed value:</em>
- <td>as specified
+ <td>specified value
</table>
<p>This property describes how many columns an element spans across. Values are:
@@ -1297,15 +1293,17 @@
<dt>all
-<dd>The element spans across all columns. Content in the normal flow
-that appears before the element is automatically balanced across all
-columns before the element appears. The element establishes a new
-block formatting context.
+<dd>The element spans across all columns of the nearest multicol
+ancestor in the same block formatting context. The element spans
+across all columns. Content in the normal flow that appears before the
+element is automatically balanced across all columns before the
+element appears. The element establishes a new block formatting
+context.
</dl>
<p>An element that spans more than one column is called a
-<dfn>spanning element</dfn>.
+<dfn>spanning element</dfn> and the box it creates is called a <dfn>spanner</dfn>.
<!--
<p>This property has no effect on elements that do not fit entirely
@@ -1316,8 +1314,7 @@
<div class="example">
<p>In this example, an <code>h2</code> element has been added to the
-sample document after the first sentence in the fourth sentence (i.e.,
-after the word "jkl."). This styling applies:
+sample document after the sixth sentence (i.e., after the word "jkl."). This styling applies:
<pre class="css">
h2 { column-span: all; background: silver }
@@ -1386,7 +1383,7 @@
<div class="example">
-<p>This is a variation of the previous example. In this example, the
+<p>In this example, the
H2 element appears later in the content, and the height of the
multicol element is constrained. Therefore, the H2 element appears in
the overflow and there is not room to make the element spanning.
@@ -1446,15 +1443,151 @@
+<div class="example">
+
+<p>This example is similar to the previous example, except that the H2 element appears naturally in the last column. Still, there is not enough room to make the element spanning.
+
+<div class=cols style="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 nopqrs
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+tuv wxy z. Abc de fg<br>
+hi jklmno.
+<div class=rep style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2 element</div>
+</div>
+
+<div class="col" style="left: 525px">
+<p>A bc def g hij klm<br>
+nop w rstu vw xyz.
+</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 paged media spanning elements are honored on all pages. In this example, the first three paragraphs have column breaks after them. An spanning <code>H2</code> element appears after the fourth paragraph. This would appear on the first page:
+
+<div class=cols style="height: 80px; border-bottom: none">
+
+<div class="col" style="">
+
+<p>
+Ab cde fgh i jkl. Mno<br>
+pqr stu vw xyz.
+</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.
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+Ab cde fgh i jkl mno.<br>
+Pq rstu vwxyz.
+</div>
+
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+</div>
+
+<p>This would appear on the second page:
+
+<div class=cols style="height: 200px; border-top: none">
+
+
+<p>Ab cde fgh i jkl. Mno<br>
+pqr stu vw xyz. A bc<br>
+
+<br><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 nopqrs<br>
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+
+
+
+<div class="col" style="left: 175px">
+<p>def g hij klm nopqrs<br>
+tuv wxy z. Abc de fg<br>
+<br><br>
+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 nopqrs<br>
+tuv wxy z. Abc de fg<br>
+
+
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+hi jklmno. Pqrstu vw<br>
+x yz. Abc def ghi jkl.<br>
+<br><br>
+hi jklmno. Pqrstu vw<br>
+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.
+
+</div>
+
+
+<div class=rep style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+</div>
+</div>
+
+
+
<h2>Filling columns</h2>
<p>There are two strategies for filling columns: columns can either be
-balanced, or not. If columns are balanced, UAs should minimize the
-variation in column length. Otherwise, columns are filled sequentially
-and some columns may end up partially filled, or with no content at
-all. In any case, the user agent should try to honor the 'widows' and
-'orphans' properties.
+balanced, or not. If columns are balanced, user agents should try to
+fill all columns in a row so that the columns appear to have the same
+amount of content, 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.
<h3 id='cf'>'column-fill'</h3>
@@ -1482,7 +1615,7 @@
<td>see below
<tr>
<td><em>Computed value:</em>
- <td>as specified
+ <td>specified value
</table>
<p>The values are:
@@ -1494,16 +1627,19 @@
<dd>Fills columns sequentially.
</dl>
+<!--
<p>In continuous media, this property will only be consulted if the
length of columns has been constrained. Otherwise, columns will
automatically be balanced.
+-->
-<p>In continous media, this property does not have any effect in
+<p>In continuous media, this property does not have any effect in
overflow columns (see below).
+<!--
<p>In paged media, this property will only have
effect on the last page the multicol element appears on.
-
+-->
<h2>Overflow</h2>
@@ -1562,13 +1698,13 @@
moved to the next page(s).
<li>explicit column breaks. In this case, additional column boxes are
- created in the inline direction for continous media, and
+ created in the inline direction for continuous media, and
additional column boxes are moved to the next page(s) for paged
- media.
+ media.
</ul>
-<p>Columns that appear outside the multicol element in continous media
+<p>Columns that appear outside the multicol element in continuous media
are called <dfn>overflow columns</dfn>.
<div class="example">
@@ -1632,6 +1768,75 @@
</div>
+<div class="example">
+
+<p>In paged media, the overflow content goes into column on subsequent pages. Given the same content as in the previous example and a page box that only has room for five lines of formatted text, this would appear on the first page:
+
+<div class=cols style="height: 100px; border-bottom: none">
+
+<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 nopqrs
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+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>
+Ab cde fgh i jkl. Mno<br>
+</div>
+
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+</div>
+
+<p>Assuming column balancing, this would appear on the second page:
+
+<div class=cols style="height: 45px; border-top: none">
+
+<div class="col" style="">
+
+<p>
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br>
+</div>
+
+<div class="col" style="left: 175px">
+<p>
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+</div>
+
+<div class="col" style="left: 350px">
+<p>
+x yz. Abc def ghi jkl.<br>
+</div>
+
+
+<div class=gap style="left: 150px"></div>
+<div class=gap style="left: 325px"></div>
+</div>
+
+
+</div>
+
<div class="example">
@@ -1660,7 +1865,8 @@
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
-tuv wxy z.
+tuv wxyz. Abc defghi<br>
+jklmno pqrstu vwxyz.
</div>
<div class="col" style="left: 350px">
@@ -1688,18 +1894,9 @@
<div class="example">
<p>In paged media, extra columns are shown on the next page. Given the
-same code as the previous example:
-
-<pre class=css>
-p {
- break-after: column;
-}
-</pre>
-
-<p>As a result, the number of columns is increased and placed on the
-next page. This would appear on the first page:
+same code as the previous example, the last paragraph appears on the second page. This would appear on the first page:
-<div class=cols style="height: 80px; border-bottom: none">
+<div class=cols style="height: 100px; border-bottom: none">
<div class="col" style="">
@@ -1713,12 +1910,13 @@
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
-tuv wxy z.
+tuv wxyz. Abc defghi<br>
+jklmno pqrstu vwxyz.
</div>
<div class="col" style="left: 350px">
<p>
-Ab cde fgh i jkl.<br>
+Ab cde fgh i jkl mno.<br>
</div>
@@ -1728,16 +1926,23 @@
<p>This would appear on the second page:
-<div class=cols style="height: 100px; border-top: none">
+<div class=cols style="height: 45px; border-top: none">
<div class="col" style="">
<p>
-Ab cde fgh i jkl. Mno<br>
-pqr stu vw xyz. A bc<br>
+Pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
+</div>
+
+<div class="col" style="left: 175px">
+<p>
tuv wxy z. Abc de fg<br>
-hi jklmno.<br>
+hi jklmno pqr stu v<br>
+</div>
+<div class="col" style="left: 350px">
+<p>
+wx yz.
</div>
@@ -1745,10 +1950,16 @@
<div class=gap style="left: 325px"></div>
</div>
+Due to column balancing, the last paragraph is split across three columns.
+
</div>
+
+
+
+
<h2>Conformance</h2>
<p>Conforming UAs must flow the content of an element into several
Received on Monday, 9 January 2012 18:35:48 UTC