- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 09 Jan 2012 18:49:54 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-multicol
In directory hutz:/tmp/cvs-serv11830
Modified Files:
Overview.html
Log Message:
machine-generated
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-multicol/Overview.html,v
retrieving revision 1.136
retrieving revision 1.137
diff -u -d -r1.136 -r1.137
--- Overview.html 15 May 2011 19:38:04 -0000 1.136
+++ Overview.html 9 Jan 2012 18:49:51 -0000 1.137
@@ -28,13 +28,13 @@
<h1>CSS Multi-column Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 15 May 2011</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 9 January 2012</h2>
<dl>
<dt>This version:
<dd>
- <!--<a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110515">http://www.w3.org/TR/2011/ED-css3-multicol-20110515/</a>-->
+ <!--<a href="http://www.w3.org/TR/2012/CR-css3-multicol-20120109">http://www.w3.org/TR/2012/ED-css3-multicol-20120109/</a>-->
<a
href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>
@@ -57,14 +57,14 @@
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2011 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
- title="European Research Consortium for Informatics and
- Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
+ rel=license>Copyright</a> © 2012 <a
+ href="http://www.w3.org/"><acronym
+ title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
+ href="http://www.csail.mit.edu/"><acronym
+ title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
+ href="http://www.ercim.eu/"><acronym
+ title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+ <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -1066,12 +1066,10 @@
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 element. Column rules are
- painted just above the background of the multicol element. This allows
- child elements with ‘<code class=property>z-index</code>’
- values to be on top of column rules. Column rules are only drawn between
- two columns that both have content.
+ 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.
+ Column rules are only drawn between two columns that both have content.
<h3 id=column-gap><span class=secno>4.1. </span>‘<a
href="#column-gap0"><code class=property>column-gap</code></a>’</h3>
@@ -1386,7 +1384,9 @@
<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.
+ into columns is similar to breaking content into pages, which is described
+ in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+ <!--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: ‘<a
@@ -1646,13 +1646,9 @@
<td>none
<tr>
- <td><em>Applies to:</em> <!--
- <td>static, non-floating elements,
--->
-
+ <td><em>Applies to:</em>
- <td>block-level elements, except floating and absolutely positioned
- elements
+ <td>in-flow block-level elements
<tr>
<td><em>Inherited:</em>
@@ -1672,7 +1668,7 @@
<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
@@ -1685,14 +1681,16 @@
<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
- id=spanning-element>spanning element</dfn>. <!--
+ id=spanning-element>spanning element</dfn> and the box it creates is
+ called a <dfn id=spanner>spanner</dfn>. <!--
<p>This property has no effect on elements that do not fit entirely
within the multicol element. Also, if a setting on this property pushes the
element outside a multicol element, this property will have no effect.
@@ -1701,8 +1699,8 @@
<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 }
@@ -1751,8 +1749,9 @@
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=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>
@@ -1767,12 +1766,11 @@
this property.
<div class=example>
- <p>This is a variation of the previous example. 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. As a result, the
- element appears as if ‘<code class=css>column-span:
- none</code>’ was specified.
+ <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. As a result, the element appears as if ‘<code
+ class=css>column-span: none</code>’ was specified.
<div class=cols style="height: 100px">
<div class=col style="">
@@ -1802,9 +1800,9 @@
<div class=col style="left: 525px">
<p>pqr stu vw xyz.
- <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 class=rep
+ style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An
+ H2 element</div>
A bc def g hij klm</div>
<div class=col style="left: 700px"> nopqrs tuv wxy z.</div>
@@ -1819,15 +1817,140 @@
</div>
</div>
+ <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 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, 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 ‘<code
- class=property>widows</code>’ and ‘<code
- class=property>orphans</code>’ 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 ‘<code
+ class=property>widows</code>’, ‘<code
+ class=property>orphans</code>’ and other properties that may affect
+ column lengths.
<h3 id=cf><span class=secno>7.1. </span>‘<a href="#column-fill"><code
class=property>column-fill</code></a>’</h3>
@@ -1872,7 +1995,7 @@
<tr>
<td><em>Computed value:</em>
- <td>as specified
+ <td>specified value
</table>
<p>The values are:
@@ -1886,16 +2009,18 @@
<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 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 overflow
- columns (see below).
-
- <p>In paged media, this property will only have effect on the last page the
- multicol element appears on.
+ <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 id=overflow><span class=secno>8. </span>Overflow</h2>
@@ -1974,11 +2099,11 @@
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 additional
+ created in the inline direction for continuous media, and additional
column boxes are moved to the next page(s) for paged media.
</ul>
- <p>Columns that appear outside the multicol element in continous media are
+ <p>Columns that appear outside the multicol element in continuous media are
called <dfn id=overflow-columns>overflow columns</dfn>.
<div class=example>
@@ -2037,6 +2162,65 @@
</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>
<p>In this example, explicit column breaks are generated after paragraphs:
@@ -2059,7 +2243,8 @@
<p> 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">
@@ -2084,18 +2269,10 @@
<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="">
<p> Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz.
@@ -2105,11 +2282,12 @@
<p> 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>
+ <p> Ab cde fgh i jkl mno.<br>
</div>
<div class=gap style="left: 150px"></div>
@@ -2119,20 +2297,27 @@
<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>
+ <p> Pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
- tuv wxy z. Abc de fg<br>
- hi jklmno.<br>
+ </div>
+
+ <div class=col style="left: 175px">
+ <p> tuv wxy z. Abc de fg<br>
+ hi jklmno pqr stu v<br>
+ </div>
+
+ <div class=col style="left: 350px">
+ <p> wx yz.
</div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
- </div>
+ Due to column balancing, the last paragraph is split across three columns.
+ </div>
<h2 id=conformance><span class=secno>9. </span>Conformance</h2>
@@ -2236,10 +2421,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
- April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423">http://www.w3.org/TR/2009/CR-CSS2-20090423</a>
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
+ 2011. W3C Recommendation. URL: <a
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
</dd>
<!---->
@@ -2277,8 +2462,8 @@
<li>break-inside, <a href="#break-inside"
title=break-inside><strong>5.1.</strong></a>
- <li>column box, <a href="#column-box" title="column
- box"><strong>2.</strong></a>
+ <li>column box, <a href="#column-box"
+ title="column box"><strong>2.</strong></a>
<li>column-count, <a href="#column-count"
title=column-count><strong>3.2.</strong></a>
@@ -2312,11 +2497,13 @@
<li>multi-column element, <a href="#multi-column-element"
title="multi-column element"><strong>2.</strong></a>
- <li>overflow columns, <a href="#overflow-columns" title="overflow
- columns"><strong>8.2.</strong></a>
+ <li>overflow columns, <a href="#overflow-columns"
+ title="overflow columns"><strong>8.2.</strong></a>
- <li>spanning element, <a href="#spanning-element" title="spanning
- element"><strong>6.1.</strong></a>
+ <li>spanner, <a href="#spanner" title=spanner><strong>6.1.</strong></a>
+
+ <li>spanning element, <a href="#spanning-element"
+ title="spanning element"><strong>6.1.</strong></a>
</ul>
<!--end-index-->
@@ -2341,8 +2528,8 @@
<th>Media
<tbody>
- <tr valign=baseline>
- <td><a class=property href="#break-after">break-after</a>
+ <tr>
+ <th><a class=property href="#break-after">break-after</a>
<td>auto | always | avoid | left | right | page | column | avoid-page |
avoid-column
@@ -2357,8 +2544,8 @@
<td>paged
- <tr valign=baseline>
- <td><a class=property href="#break-before">break-before</a>
+ <tr>
+ <th><a class=property href="#break-before">break-before</a>
<td>auto | always | avoid | left | right | page | column | avoid-page |
avoid-column
@@ -2373,8 +2560,8 @@
<td>paged
- <tr valign=baseline>
- <td><a class=property href="#break-inside">break-inside</a>
+ <tr>
+ <th><a class=property href="#break-inside">break-inside</a>
<td>auto | avoid | avoid-page | avoid-column
@@ -2388,8 +2575,8 @@
<td>paged
- <tr valign=baseline>
- <td><a class=property href="#column-count">column-count</a>
+ <tr>
+ <th><a class=property href="#column-count">column-count</a>
<td><integer> | auto
@@ -2404,8 +2591,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-fill">column-fill</a>
+ <tr>
+ <th><a class=property href="#column-fill">column-fill</a>
<td>auto | balance
@@ -2419,8 +2606,8 @@
<td>see below
- <tr valign=baseline>
- <td><a class=property href="#column-gap0">column-gap</a>
+ <tr>
+ <th><a class=property href="#column-gap0">column-gap</a>
<td><length> | normal
@@ -2434,8 +2621,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-rule0">column-rule</a>
+ <tr>
+ <th><a class=property href="#column-rule0">column-rule</a>
<td><‘column-rule-width’> ||
<‘column-rule-style’> || [
@@ -2451,8 +2638,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-rule-color">column-rule-color</a>
+ <tr>
+ <th><a class=property href="#column-rule-color">column-rule-color</a>
<td><color>
@@ -2466,8 +2653,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-rule-style">column-rule-style</a>
+ <tr>
+ <th><a class=property href="#column-rule-style">column-rule-style</a>
<td><border-style>
@@ -2481,8 +2668,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-rule-width">column-rule-width</a>
+ <tr>
+ <th><a class=property href="#column-rule-width">column-rule-width</a>
<td><border-width>
@@ -2496,8 +2683,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#columns0">columns</a>
+ <tr>
+ <th><a class=property href="#columns0">columns</a>
<td><‘column-width’> || <‘column-count’>
@@ -2512,15 +2699,14 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-span0">column-span</a>
+ <tr>
+ <th><a class=property href="#column-span0">column-span</a>
<td>none | all
<td>none
- <td>block-level elements, except floating and absolutely positioned
- elements
+ <td>in-flow block-level elements
<td>no
@@ -2528,8 +2714,8 @@
<td>visual
- <tr valign=baseline>
- <td><a class=property href="#column-width">column-width</a>
+ <tr>
+ <th><a class=property href="#column-width">column-width</a>
<td><length> | auto
Received on Monday, 9 January 2012 18:51:59 UTC