Skip to content

Commit fcf193d

Browse files
committed
http://lists.w3.org/Archives/Public/www-style/2010Oct/0514.html
1 parent d6dbefd commit fcf193d

1 file changed

Lines changed: 32 additions & 27 deletions

File tree

css3-multicol/Overview.src.html

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta content="text/html" http-equiv="Content-Type">
5-
65
<title>CSS Multi-column Layout Module</title>
76

87
<link rel="stylesheet" type="text/css" href="../default.css">
@@ -139,16 +138,18 @@ <h2>Introduction</h2>
139138

140139
<div class=example>
141140

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:
144143

145144
<pre>
146145
body { columns: 2 }
147146
body { columns: 12em }
148147
body { columns: 2 12em }
149148
</pre>
150149

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+
152153
</div>
153154

154155
<p>Another group of properties introduced in this module describe
@@ -248,9 +249,8 @@ <h2>The multi-column model</h2>
248249
ordered in the inline direction of the multicol element. The
249250
<em>column width</em> is the length of the column box in the inline
250251
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,
254254
adjacent column boxes are separated by a <em>column gap</em>, which
255255
may contain a <em>column rule</em>. All column gaps in the same row
256256
are equal. All column rules in the same row are also equal, if they
@@ -846,9 +846,10 @@ <h2>Column gaps and rules</h2>
846846
rules do not take up space. That is, the presence or thickness of a
847847
column rule will not alter the placement of anything else. If a column
848848
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
852853
columns that both have content.
853854

854855
<h3>'column-gap'</h3>
@@ -1234,7 +1235,7 @@ <h3>'column-span'</h3>
12341235
<td>1
12351236
<tr>
12361237
<td><em>Applies to:</em>
1237-
<td>static, non-floating elements
1238+
<td>static, non-floating elements,
12381239
<tr>
12391240
<td><em>Inherited:</em>
12401241
<td>no
@@ -1267,6 +1268,11 @@ <h3>'column-span'</h3>
12671268
<p>An element that spans more than one column is called a
12681269
<dfn>spanning element</dfn>.
12691270

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+
12701276

12711277
<div class="example">
12721278

@@ -1341,8 +1347,9 @@ <h2>Filling columns</h2>
13411347
<p>There are two strategies for filling columns: columns can either be
13421348
balanced, or not. If columns are balanced, UAs should minimize the
13431349
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.
13461353

13471354
<h3 id='cf'>'column-fill'</h3>
13481355

@@ -1428,26 +1435,28 @@ <h3>Overflow inside multicol elements</h3>
14281435

14291436
<h3>Overflow outside multicol elements</h3>
14301437

1431-
<p>Content that extend outside column boxes at
1438+
<p>Content and column rules that extend outside column boxes at
14321439
the edges of the multi-column element is clipped according to the
14331440
'overflow' property.
14341441

14351442
<p>A multicol element can have more columns than it has room for due to:
14361443

14371444
<ul>
14381445

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
14421449

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).
14451452

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.
14471457

1458+
</ul>
14481459

1449-
<p>In continuous media, columns that do not fit within
1450-
the multicol element are added in the inline direction.
14511460

14521461
<div class="example">
14531462

@@ -1564,10 +1573,6 @@ <h3>Overflow outside multicol elements</h3>
15641573
</div>
15651574

15661575

1567-
<p>In paged media, columns that do not fit within the page
1568-
are moved to the next page.
1569-
1570-
15711576
<div class="example">
15721577

15731578
<p>In this example, explicit column breaks are generated after paragraphs:
@@ -1715,7 +1720,7 @@ <h3 id=cr-exit-criteria>CR exit criteria</h3>
17151720
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
17161721

17171722
<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
17191724
Campagna, David Hyatt, David Singer, David Woolley, Elika Etemad,
17201725
Bj&ouml;rn H&ouml;hrmann, Joost de Valk, Peter-Paul Koch, Till
17211726
Halbach, C&eacute;dric Savarese, Andy Clarke, Robert O'Callahan,

0 commit comments

Comments
 (0)