Skip to content

Commit 14979a6

Browse files
howcomhowcom
committed
x
1 parent 813de94 commit 14979a6

1 file changed

Lines changed: 73 additions & 69 deletions

File tree

‎css3-multicol/Overview.html‎

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727

2828
<h1>CSS Multi-column Layout Module</h1>
2929

30-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 2 November 2009</h2>
30+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 9 December 2009</h2>
3131

3232
<dl>
3333
<dt>This version:
3434

3535
<dd>
36-
<!--<a href="http://www.w3.org/TR/2009/WD-css3-multicol-20091102/">http://www.w3.org/TR/2009/ED-css3-multicol-20091102</a>-->
36+
<!--<a href="http://www.w3.org/TR/2009/WD-css3-multicol-20091209/">http://www.w3.org/TR/2009/ED-css3-multicol-20091209</a>-->
3737
<a
3838
href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>
3939

@@ -76,9 +76,10 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 2 November 2009</h2>
7676

7777
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
7878

79-
<p>This module describes multi-column layout in CSS. It builds on the CSS3
80-
Box model module and adds functionality to flow the content of an element
81-
into multiple columns.
79+
<p>This specification describes multi-column layouts in CSS, a style sheet
80+
language for the web. Using functionality described in the specification,
81+
content can be flowed into multiple columns with a gap and a rule between
82+
them.
8283

8384
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
8485
document</h2>
@@ -91,10 +92,12 @@ <h2 class="no-num no-toc" id=status-of-this-document>Status of this
9192

9293
<p>The (<a
9394
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
94-
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
95-
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
96-
for discussion of this specification. When sending e-mail, please put the
97-
text &#8220;css3-multicol&#8221; in the subject, preferably like this:
95+
mailing list <a
96+
href="mailto:www-style@w3.org?Subject=%5Bcss3-multicol%5D%20PUT%20SUBJECT%20HERE">
97+
www-style@w3.org</a> (see <a
98+
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
99+
discussion of this specification. When sending e-mail, please put the text
100+
&#8220;css3-multicol&#8221; in the subject, preferably like this:
98101
&#8220;[<!---->css3-multicol<!---->] <em>&hellip;summary of
99102
comment&hellip;</em>&#8221;
100103

@@ -129,72 +132,73 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
129132
<!--begin-toc-->
130133

131134
<ul class=toc>
132-
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
135+
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
133136

134-
<li><a href="#the-multi-column-model"><span class=secno>2 </span>The
137+
<li><a href="#the-multi-column-model"><span class=secno>2. </span>The
135138
multi-column model</a>
136139

137-
<li><a href="#the-number-and-width-of-columns"><span class=secno>3
140+
<li><a href="#the-number-and-width-of-columns"><span class=secno>3.
138141
</span>The number and width of columns</a>
139142
<ul class=toc>
140-
<li><a href="#cw"><span class=secno>3.1 </span>&lsquo;<code
143+
<li><a href="#cw"><span class=secno>3.1. </span>&lsquo;<code
141144
class=property>column-width</code>&rsquo;</a>
142145

143-
<li><a href="#cc"><span class=secno>3.2 </span>&lsquo;<code
146+
<li><a href="#cc"><span class=secno>3.2. </span>&lsquo;<code
144147
class=property>column-count</code>&rsquo;</a>
145148

146-
<li><a href="#columns"><span class=secno>3.3 </span>&lsquo;<code
149+
<li><a href="#columns"><span class=secno>3.3. </span>&lsquo;<code
147150
class=property>columns</code>&rsquo;</a>
148151

149-
<li><a href="#pseudo-algorithm"><span class=secno>3.4
152+
<li><a href="#pseudo-algorithm"><span class=secno>3.4.
150153
</span>Pseudo-algorithm</a>
151154

152-
<li><a href="#stacking-context"><span class=secno>3.5 </span>Stacking
155+
<li><a href="#stacking-context"><span class=secno>3.5. </span>Stacking
153156
context</a>
154157
</ul>
155158

156-
<li><a href="#column-gaps-and-rules"><span class=secno>4 </span>Column
159+
<li><a href="#column-gaps-and-rules"><span class=secno>4. </span>Column
157160
gaps and rules</a>
158161
<ul class=toc>
159-
<li><a href="#column-gap"><span class=secno>4.1 </span>&lsquo;<code
162+
<li><a href="#column-gap"><span class=secno>4.1. </span>&lsquo;<code
160163
class=property>column-gap</code>&rsquo;</a>
161164

162-
<li><a href="#crc"><span class=secno>4.2 </span>&lsquo;<code
165+
<li><a href="#crc"><span class=secno>4.2. </span>&lsquo;<code
163166
class=property>column-rule-color</code>&rsquo;</a>
164167

165-
<li><a href="#crs"><span class=secno>4.3 </span>&lsquo;<code
168+
<li><a href="#crs"><span class=secno>4.3. </span>&lsquo;<code
166169
class=property>column-rule-style</code>&rsquo;</a>
167170

168-
<li><a href="#crw"><span class=secno>4.4 </span>&lsquo;<code
171+
<li><a href="#crw"><span class=secno>4.4. </span>&lsquo;<code
169172
class=property>column-rule-width</code>&rsquo;</a>
170173

171-
<li><a href="#column-rule"><span class=secno>4.5 </span>&lsquo;<code
174+
<li><a href="#column-rule"><span class=secno>4.5. </span>&lsquo;<code
172175
class=property>column-rule</code>&rsquo;</a>
173176
</ul>
174177

175-
<li><a href="#column-breaks"><span class=secno>5 </span>Column breaks</a>
178+
<li><a href="#column-breaks"><span class=secno>5. </span>Column breaks</a>
179+
176180

177-
<li><a href="#spanning-columns"><span class=secno>6 </span>Spanning
181+
<li><a href="#spanning-columns"><span class=secno>6. </span>Spanning
178182
columns</a>
179183
<ul class=toc>
180-
<li><a href="#column-span"><span class=secno>6.1 </span>&lsquo;<code
184+
<li><a href="#column-span"><span class=secno>6.1. </span>&lsquo;<code
181185
class=property>column-span</code>&rsquo;</a>
182186
</ul>
183187

184-
<li><a href="#filling-columns"><span class=secno>7 </span>Filling
188+
<li><a href="#filling-columns"><span class=secno>7. </span>Filling
185189
columns</a>
186190

187-
<li><a href="#overflow-and-multicol-elements"><span class=secno>8
191+
<li><a href="#overflow-and-multicol-elements"><span class=secno>8.
188192
</span>Overflow and multicol elements</a>
189193
<ul class=toc>
190-
<li><a href="#overflow-inside-multicol-elements"><span class=secno>8.1
194+
<li><a href="#overflow-inside-multicol-elements"><span class=secno>8.1.
191195
</span>Overflow inside multicol elements</a>
192196

193-
<li><a href="#overflow-outside-multicol-elements"><span class=secno>8.2
197+
<li><a href="#overflow-outside-multicol-elements"><span class=secno>8.2.
194198
</span>Overflow outside multicol elements</a>
195199
</ul>
196200

197-
<li><a href="#conformance"><span class=secno>9 </span>Conformance</a>
201+
<li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
198202

199203
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
200204

@@ -212,7 +216,7 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
212216
</ul>
213217
<!--end-toc-->
214218

215-
<h2 id=introduction><span class=secno>1 </span>Introduction</h2>
219+
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
216220

217221
<p>(This section is not normative.)
218222

@@ -346,7 +350,7 @@ <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
346350
<p>If all column properties have their initial value, the layout of an
347351
element will be identical to a multi-column layout with only one column.
348352

349-
<h2 id=the-multi-column-model><span class=secno>2 </span>The multi-column
353+
<h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
350354
model</h2>
351355

352356
<p>A <dfn id=multi-column-element>multi-column element</dfn> (or
@@ -617,7 +621,7 @@ <h2 id=the-multi-column-model><span class=secno>2 </span>The multi-column
617621
<p>Nested multi-column elements are allowed, but there may be
618622
implementation-specific limits.
619623

620-
<h2 id=the-number-and-width-of-columns><span class=secno>3 </span>The
624+
<h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The
621625
number and width of columns</h2>
622626

623627
<p>Finding the number and width of columns is fundamental when laying out
@@ -639,7 +643,7 @@ <h2 id=the-number-and-width-of-columns><span class=secno>3 </span>The
639643
href="#column-width">column-width</a></code>&rsquo; and &lsquo;<code
640644
class=property><a href="#column-count">column-count</a></code>&rsquo;.
641645

642-
<h3 id=cw><span class=secno>3.1 </span>&lsquo;<code class=property><a
646+
<h3 id=cw><span class=secno>3.1. </span>&lsquo;<code class=property><a
643647
href="#column-width">column-width</a></code>&rsquo;</h3>
644648

645649
<table class=propdef>
@@ -754,7 +758,7 @@ <h3 id=cw><span class=secno>3.1 </span>&lsquo;<code class=property><a
754758
href="#column-rule-width">column-rule-width</a></code>&rsquo;) must be
755759
specified.
756760

757-
<h3 id=cc><span class=secno>3.2 </span>&lsquo;<code class=property><a
761+
<h3 id=cc><span class=secno>3.2. </span>&lsquo;<code class=property><a
758762
href="#column-count">column-count</a></code>&rsquo;</h3>
759763

760764
<table class=propdef>
@@ -828,7 +832,7 @@ <h3 id=cc><span class=secno>3.2 </span>&lsquo;<code class=property><a
828832
<pre>body { column-count: 3 }</pre>
829833
</div>
830834

831-
<h3 id=columns><span class=secno>3.3 </span>&lsquo;<code class=property><a
835+
<h3 id=columns><span class=secno>3.3. </span>&lsquo;<code class=property><a
832836
href="#columns0">columns</a></code>&rsquo;</h3>
833837

834838
<table class=propdef>
@@ -897,7 +901,7 @@ <h3 id=columns><span class=secno>3.3 </span>&lsquo;<code class=property><a
897901
</pre>
898902
</div>
899903

900-
<h3 id=pseudo-algorithm><span class=secno>3.4 </span>Pseudo-algorithm</h3>
904+
<h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>
901905

902906
<p>The pseudo-algorithm below determines the used values for &lsquo;<code
903907
class=property><a href="#column-count">column-count</a></code>&rsquo; (N)
@@ -994,13 +998,13 @@ <h3 id=pseudo-algorithm><span class=secno>3.4 </span>Pseudo-algorithm</h3>
994998
affect the layout is for element where the width of the element has not
995999
been determined. This can, e.g., be the case for table cells and floats.
9961000

997-
<h3 id=stacking-context><span class=secno>3.5 </span>Stacking context</h3>
1001+
<h3 id=stacking-context><span class=secno>3.5. </span>Stacking context</h3>
9981002

9991003
<p>All column boxes in a multi-column element are in the same stacking
10001004
context and the drawing order of their contents is as specified in CSS
10011005
2.1.
10021006

1003-
<h2 id=column-gaps-and-rules><span class=secno>4 </span>Column gaps and
1007+
<h2 id=column-gaps-and-rules><span class=secno>4. </span>Column gaps and
10041008
rules</h2>
10051009

10061010
<p>Column gaps and rules are placed between columns in the same multicol
@@ -1019,7 +1023,7 @@ <h2 id=column-gaps-and-rules><span class=secno>4 </span>Column gaps and
10191023
class=property>z-index</code>&rsquo; values to be on top of column rules.
10201024
Column rules are only drawn between two columns that both have content.
10211025

1022-
<h3 id=column-gap><span class=secno>4.1 </span>&lsquo;<code
1026+
<h3 id=column-gap><span class=secno>4.1. </span>&lsquo;<code
10231027
class=property><a href="#column-gap0">column-gap</a></code>&rsquo;</h3>
10241028

10251029
<table class=propdef>
@@ -1075,7 +1079,7 @@ <h3 id=column-gap><span class=secno>4.1 </span>&lsquo;<code
10751079

10761080
<p>Column gaps cannot be negative.
10771081

1078-
<h3 id=crc><span class=secno>4.2 </span>&lsquo;<code class=property><a
1082+
<h3 id=crc><span class=secno>4.2. </span>&lsquo;<code class=property><a
10791083
href="#column-rule-color">column-rule-color</a></code>&rsquo;</h3>
10801084

10811085
<table class=propdef>
@@ -1128,7 +1132,7 @@ <h3 id=crc><span class=secno>4.2 </span>&lsquo;<code class=property><a
11281132
values are defined in <a href="#CSS21"
11291133
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
11301134

1131-
<h3 id=crs><span class=secno>4.3 </span>&lsquo;<code class=property><a
1135+
<h3 id=crs><span class=secno>4.3. </span>&lsquo;<code class=property><a
11321136
href="#column-rule-style">column-rule-style</a></code>&rsquo;</h3>
11331137

11341138
<table class=propdef>
@@ -1192,7 +1196,7 @@ <h3 id=crs><span class=secno>4.3 </span>&lsquo;<code class=property><a
11921196
href="#column-rule-width">column-rule-width</a></code>&rsquo;</span> to be
11931197
&lsquo;<code class=css>0</code>&rsquo;.
11941198

1195-
<h3 id=crw><span class=secno>4.4 </span>&lsquo;<code class=property><a
1199+
<h3 id=crw><span class=secno>4.4. </span>&lsquo;<code class=property><a
11961200
href="#column-rule-width">column-rule-width</a></code>&rsquo;</h3>
11971201

11981202
<table class=propdef>
@@ -1245,7 +1249,7 @@ <h3 id=crw><span class=secno>4.4 </span>&lsquo;<code class=property><a
12451249
<p>This property sets the width of the rule between columns. Negative
12461250
values are not allowed.
12471251

1248-
<h3 id=column-rule><span class=secno>4.5 </span>&lsquo;<code
1252+
<h3 id=column-rule><span class=secno>4.5. </span>&lsquo;<code
12491253
class=property><a href="#column-rule0">column-rule</a></code>&rsquo;</h3>
12501254

12511255
<table class=propdef>
@@ -1322,7 +1326,7 @@ <h3 id=column-rule><span class=secno>4.5 </span>&lsquo;<code
13221326
should be drawn.
13231327
</div>
13241328

1325-
<h2 id=column-breaks><span class=secno>5 </span>Column breaks</h2>
1329+
<h2 id=column-breaks><span class=secno>5. </span>Column breaks</h2>
13261330

13271331
<p>When content is laid out in multiple columns, the user agent must
13281332
determine where column breaks are placed. The problem of breaking content
@@ -1552,13 +1556,13 @@ <h2 id=column-breaks><span class=secno>5 </span>Column breaks</h2>
15521556
</pre>
15531557
</div>
15541558

1555-
<h2 id=spanning-columns><span class=secno>6 </span>Spanning columns</h2>
1559+
<h2 id=spanning-columns><span class=secno>6. </span>Spanning columns</h2>
15561560

15571561
<p>The &lsquo;<code class=property><a
15581562
href="#column-span0">column-span</a></code>&rsquo; property makes it
15591563
possible for an element to span across several columns.
15601564

1561-
<h3 id=column-span><span class=secno>6.1 </span>&lsquo;<code
1565+
<h3 id=column-span><span class=secno>6.1. </span>&lsquo;<code
15621566
class=property><a href="#column-span0">column-span</a></code>&rsquo;</h3>
15631567

15641568
<table class=propdef>
@@ -1683,7 +1687,7 @@ <h3 id=column-span><span class=secno>6.1 </span>&lsquo;<code
16831687
</div>
16841688
</div>
16851689

1686-
<h2 id=filling-columns><span class=secno>7 </span>Filling columns</h2>
1690+
<h2 id=filling-columns><span class=secno>7. </span>Filling columns</h2>
16871691

16881692
<p>There are two strategies for filling columns: columns can either be
16891693
balanced, or not. If columns are balanced, UAs should minimize the
@@ -1752,10 +1756,10 @@ <h2 id=filling-columns><span class=secno>7 </span>Filling columns</h2>
17521756
of columns has been constrained. Otherwise, columns will automatically be
17531757
balanced.
17541758

1755-
<h2 id=overflow-and-multicol-elements><span class=secno>8 </span>Overflow
1759+
<h2 id=overflow-and-multicol-elements><span class=secno>8. </span>Overflow
17561760
and multicol elements</h2>
17571761

1758-
<h3 id=overflow-inside-multicol-elements><span class=secno>8.1
1762+
<h3 id=overflow-inside-multicol-elements><span class=secno>8.1.
17591763
</span>Overflow inside multicol elements</h3>
17601764

17611765
<p>Content in the normal flow that extends into column gaps (e.g., long
@@ -1811,7 +1815,7 @@ <h3 id=overflow-inside-multicol-elements><span class=secno>8.1
18111815
</div>
18121816
</div>
18131817

1814-
<h3 id=overflow-outside-multicol-elements><span class=secno>8.2
1818+
<h3 id=overflow-outside-multicol-elements><span class=secno>8.2.
18151819
</span>Overflow outside multicol elements</h3>
18161820

18171821
<p>Content that extend outside column boxes at the edges of the
@@ -1988,7 +1992,7 @@ <h3 id=overflow-outside-multicol-elements><span class=secno>8.2
19881992
</div>
19891993
</div>
19901994

1991-
<h2 id=conformance><span class=secno>9 </span>Conformance</h2>
1995+
<h2 id=conformance><span class=secno>9. </span>Conformance</h2>
19921996

19931997
<p>Conforming UAs must flow the content of an element into several columns
19941998
according to this specification.
@@ -2080,51 +2084,51 @@ <h2 class=no-num id=index>Index</h2>
20802084

20812085
<ul class=indexlist>
20822086
<li>break-after, <a href="#break-after"
2083-
title=break-after><strong>5</strong></a>
2087+
title=break-after><strong>5.</strong></a>
20842088

20852089
<li>break-before, <a href="#break-before"
2086-
title=break-before><strong>5</strong></a>
2090+
title=break-before><strong>5.</strong></a>
20872091

20882092
<li>break-inside, <a href="#break-inside"
2089-
title=break-inside><strong>5</strong></a>
2093+
title=break-inside><strong>5.</strong></a>
20902094

20912095
<li>column box, <a href="#column-box" title="column
2092-
box"><strong>2</strong></a>
2096+
box"><strong>2.</strong></a>
20932097

20942098
<li>column-count, <a href="#column-count"
2095-
title=column-count><strong>3.2</strong></a>
2099+
title=column-count><strong>3.2.</strong></a>
20962100

20972101
<li>column-fill, <a href="#column-fill"
2098-
title=column-fill><strong>7</strong></a>
2102+
title=column-fill><strong>7.</strong></a>
20992103

21002104
<li>column-gap, <a href="#column-gap0"
2101-
title=column-gap><strong>4.1</strong></a>
2105+
title=column-gap><strong>4.1.</strong></a>
21022106

21032107
<li>column-rule, <a href="#column-rule0"
2104-
title=column-rule><strong>4.5</strong></a>
2108+
title=column-rule><strong>4.5.</strong></a>
21052109

21062110
<li>column-rule-color, <a href="#column-rule-color"
2107-
title=column-rule-color><strong>4.2</strong></a>
2111+
title=column-rule-color><strong>4.2.</strong></a>
21082112

21092113
<li>column-rule-style, <a href="#column-rule-style"
2110-
title=column-rule-style><strong>4.3</strong></a>
2114+
title=column-rule-style><strong>4.3.</strong></a>
21112115

21122116
<li>column-rule-width, <a href="#column-rule-width"
2113-
title=column-rule-width><strong>4.4</strong></a>
2117+
title=column-rule-width><strong>4.4.</strong></a>
21142118

2115-
<li>columns, <a href="#columns0" title=columns><strong>3.3</strong></a>
2119+
<li>columns, <a href="#columns0" title=columns><strong>3.3.</strong></a>
21162120

21172121
<li>column-span, <a href="#column-span0"
2118-
title=column-span><strong>6.1</strong></a>
2122+
title=column-span><strong>6.1.</strong></a>
21192123

21202124
<li>column-width, <a href="#column-width"
2121-
title=column-width><strong>3.1</strong></a>
2125+
title=column-width><strong>3.1.</strong></a>
21222126

21232127
<li>multi-column element, <a href="#multi-column-element"
2124-
title="multi-column element"><strong>2</strong></a>
2128+
title="multi-column element"><strong>2.</strong></a>
21252129

21262130
<li>spanning element, <a href="#spanning-element" title="spanning
2127-
element"><strong>6.1</strong></a>
2131+
element"><strong>6.1.</strong></a>
21282132
</ul>
21292133
<!--end-index-->
21302134

0 commit comments

Comments
 (0)