|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta content="text/html" http-equiv="Content-Type"> |
5 | | - |
6 | 5 | <title>CSS Multi-column Layout Module</title> |
7 | 6 |
|
8 | 7 | <link rel="stylesheet" type="text/css" href="../default.css"> |
@@ -139,16 +138,18 @@ <h2>Introduction</h2> |
139 | 138 |
|
140 | 139 | <div class=example> |
141 | 140 |
|
142 | | -<p>In these examples, the number of columes, the width of columns, and |
143 | | -both the number and widths are set: |
| 141 | +<p>In these examples, the number of columns, the width of columns, and |
| 142 | +both the number and width are set, respectively: |
144 | 143 |
|
145 | 144 | <pre> |
146 | 145 | body { columns: 2 } |
147 | 146 | body { columns: 12em } |
148 | 147 | body { columns: 2 12em } |
149 | 148 | </pre> |
150 | 149 |
|
151 | | -<p>Setting both properties rarely makes sense, as described below. |
| 150 | +<p>However, as described below, setting both the width and number of |
| 151 | +columns rarely makes sense. |
| 152 | + |
152 | 153 | </div> |
153 | 154 |
|
154 | 155 | <p>Another group of properties introduced in this module describe |
@@ -248,9 +249,8 @@ <h2>The multi-column model</h2> |
248 | 249 | ordered in the inline direction of the multicol element. The |
249 | 250 | <em>column width</em> is the length of the column box in the inline |
250 | 251 | direction. The <em>column height</em> is the length of the column box |
251 | | -in the block direction. All column boxes in a multi-column element |
252 | | -have the same column width, and all column boxes in a row have the |
253 | | -same column height. Within each row in the multi-column element, |
| 252 | +in the block direction. All column boxes in a row have the same column width, and all |
| 253 | +column boxes in a row have the same column height. Within each row in the multi-column element, |
254 | 254 | adjacent column boxes are separated by a <em>column gap</em>, which |
255 | 255 | may contain a <em>column rule</em>. All column gaps in the same row |
256 | 256 | are equal. All column rules in the same row are also equal, if they |
@@ -846,9 +846,10 @@ <h2>Column gaps and rules</h2> |
846 | 846 | rules do not take up space. That is, the presence or thickness of a |
847 | 847 | column rule will not alter the placement of anything else. If a column |
848 | 848 | rule is wider than its gap, the column rule will overlap adjacent |
849 | | -column boxes. Column rules are painted just above the background of |
850 | | -the multicol element. This allows child elements with 'z-index' values |
851 | | -to be on top of column rules. Column rules are only drawn between two |
| 849 | +column boxes, and possibly extend outside the box of the multicol |
| 850 | +element. Column rules are painted just above the background of the |
| 851 | +multicol element. This allows child elements with 'z-index' values to |
| 852 | +be on top of column rules. Column rules are only drawn between two |
852 | 853 | columns that both have content. |
853 | 854 |
|
854 | 855 | <h3>'column-gap'</h3> |
@@ -1234,7 +1235,7 @@ <h3>'column-span'</h3> |
1234 | 1235 | <td>1 |
1235 | 1236 | <tr> |
1236 | 1237 | <td><em>Applies to:</em> |
1237 | | - <td>static, non-floating elements |
| 1238 | + <td>static, non-floating elements, |
1238 | 1239 | <tr> |
1239 | 1240 | <td><em>Inherited:</em> |
1240 | 1241 | <td>no |
@@ -1267,6 +1268,11 @@ <h3>'column-span'</h3> |
1267 | 1268 | <p>An element that spans more than one column is called a |
1268 | 1269 | <dfn>spanning element</dfn>. |
1269 | 1270 |
|
| 1271 | +<p>This property has no effect on elements that no not fit entirely |
| 1272 | +within the multicol element. Also, if a setting on this property pushes the |
| 1273 | +element outside a multicol element, this property will have no effect. |
| 1274 | + |
| 1275 | + |
1270 | 1276 |
|
1271 | 1277 | <div class="example"> |
1272 | 1278 |
|
@@ -1341,8 +1347,9 @@ <h2>Filling columns</h2> |
1341 | 1347 | <p>There are two strategies for filling columns: columns can either be |
1342 | 1348 | balanced, or not. If columns are balanced, UAs should minimize the |
1343 | 1349 | variation in column length. Otherwise, columns are filled sequentially |
1344 | | -and will therefore end up having different lengths. In any case, the |
1345 | | -user agent should try to honor the 'widows' and 'orphans' properties. |
| 1350 | +and some columns may end up partially filled, or with no content at |
| 1351 | +all. In any case, the user agent should try to honor the 'widows' and |
| 1352 | +'orphans' properties. |
1346 | 1353 |
|
1347 | 1354 | <h3 id='cf'>'column-fill'</h3> |
1348 | 1355 |
|
@@ -1428,26 +1435,28 @@ <h3>Overflow inside multicol elements</h3> |
1428 | 1435 |
|
1429 | 1436 | <h3>Overflow outside multicol elements</h3> |
1430 | 1437 |
|
1431 | | -<p>Content that extend outside column boxes at |
| 1438 | +<p>Content and column rules that extend outside column boxes at |
1432 | 1439 | the edges of the multi-column element is clipped according to the |
1433 | 1440 | 'overflow' property. |
1434 | 1441 |
|
1435 | 1442 | <p>A multicol element can have more columns than it has room for due to: |
1436 | 1443 |
|
1437 | 1444 | <ul> |
1438 | 1445 |
|
1439 | | -<li>Constrained column height. A declaration that constrains the |
1440 | | -column height (e.g., using 'height') must be honored, if possible. In |
1441 | | -paged media, the column height is constrained by the size of the page. |
| 1446 | +<li>a declaration that constrains the column height (e.g., using |
| 1447 | + 'height' or 'max-height'). In this case, additional column boxes |
| 1448 | + are created in the inline direction |
1442 | 1449 |
|
1443 | | -<li>Explicit column breaks. Explicit column breaks may create more |
1444 | | -columns than there is room for inside the multicol element. |
| 1450 | +<li>the size of the page. In this case, additional column boxes are |
| 1451 | + moved to the next page(s). |
1445 | 1452 |
|
1446 | | -</ul> |
| 1453 | +<li>explicit column breaks. In this case, additional column boxes are |
| 1454 | + created in the inline direction for continous media, and |
| 1455 | + additional column boxes are moved to the next page(s) for paged |
| 1456 | + media. |
1447 | 1457 |
|
| 1458 | +</ul> |
1448 | 1459 |
|
1449 | | -<p>In continuous media, columns that do not fit within |
1450 | | -the multicol element are added in the inline direction. |
1451 | 1460 |
|
1452 | 1461 | <div class="example"> |
1453 | 1462 |
|
@@ -1564,10 +1573,6 @@ <h3>Overflow outside multicol elements</h3> |
1564 | 1573 | </div> |
1565 | 1574 |
|
1566 | 1575 |
|
1567 | | -<p>In paged media, columns that do not fit within the page |
1568 | | -are moved to the next page. |
1569 | | - |
1570 | | - |
1571 | 1576 | <div class="example"> |
1572 | 1577 |
|
1573 | 1578 | <p>In this example, explicit column breaks are generated after paragraphs: |
@@ -1715,7 +1720,7 @@ <h3 id=cr-exit-criteria>CR exit criteria</h3> |
1715 | 1720 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
1716 | 1721 |
|
1717 | 1722 | <p>This document is based on several older proposals and comments on |
1718 | | -older proposals. Contributors include Øyvind Stenhaug, Sylvain Galineau, Giovanni |
| 1723 | +older proposals. Contributors include Øyvind Stenhaug, Sylvain Galineau, Giovanni |
1719 | 1724 | Campagna, David Hyatt, David Singer, David Woolley, Elika Etemad, |
1720 | 1725 | Björn Höhrmann, Joost de Valk, Peter-Paul Koch, Till |
1721 | 1726 | Halbach, Cédric Savarese, Andy Clarke, Robert O'Callahan, |
|
0 commit comments