csswg-drafts/css-multicol-2/Overview.bs at 2ce79a6c2516fd3d5fc63ff79dd8cd50b56b48a0 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<pre class="metadata">
Title: CSS Multi-column Layout Module Level 2
Group: CSSWG
Shortname: css-multicol
Level: 2
Status: ED
Work Status: Exploring
ED: https://drafts.csswg.org/css-multicol-2/
Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241
Abstract: This specification describes multi-column layouts in CSS, a style sheet language for the web. Using functionality described in the specification, content can be flowed into multiple columns with a gap and a rule between them.
Abstract:
Abstract: This is a delta specification over CSS Multi-column Level 1.
          Once the level 1 specification is final,
          its content will be integrated into this specification,
          which will then replace it.
          Until then, CSS Multi-column Level 2 only contains additions and extensions to level 1
Ignored Terms: column-width, column-count, columns, column-gap, column-rule-color, column-rule-style, column-rule-width, column-rule, column-fill, multi-column container
               <!-- remove line above once this is no longer a delta spec -->
Ignored Vars: column-gap, column-width
</pre>

<style type="text/css">
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 5px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
.cols p { padding: 3px; margin: 0 }
.col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
.gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0;  }
.rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px;  color: white; z-index: 4 }

table.breaks { border-collapse: collapse; margin: 1em 0 }
table.breaks td, table.breaks th { border: thin solid black; padding: 0.1em 0.2em }

div.example:before { width: 9em }
</style>

<h2 id="introduction">
Introduction</h2>

	Issue: Add final content from previous level

<h2 id="interaction">Module Interactions</h2>

This document defines new features not present in earlier specifications.
In addition, once final, it will replace and supersede the following:

<ul>
<li>The <a href="https
8000
://www.w3.org/TR/css3-multicol">CSS Multi-Column Layout Module Level 1</a>
</ul>

<h2 id="the-multi-column-model">
The multi-column model</h2>

	Issue: Add final content from previous level

<h2 id="the-number-and-width-of-columns">
The number and width of columns</h2>

	Issue: Add final content from previous level

<h3 id='cw'>
'column-width'</h3>

	Issue: Add final content from previous level

<h3 id='cc'>
'column-count'</h3>

	Issue: Add final content from previous level

<h3 id="columns">
'columns'</h3>

	Issue: Add final content from previous level

<h3 id="pseudo-algorithm">
Pseudo-algorithm</h3>

	Issue: Add final content from previous level

<h3 id="stacking-context">
Stacking context</h3>

	Issue: Add final content from previous level

<h2 id="column-gaps-and-rules">
Column gaps and rules</h2>

	Issue: Add final content from previous level

<h3 id='column-gap'>
'column-gap'</h3>

	Issue: Add final content from previous level

<h3 id='crc'>
'column-rule-color'</h3>

	Issue: Add final content from previous level

<h3 id='crs'>
'column-rule-style'</h3>

	Issue: Add final content from previous level

<h3 id='crw'>
'column-rule-width'</h3>

	Issue: Add final content from previous level

<h3 id="column-rule">
'column-rule'</h3>

	Issue: Add final content from previous level

<h2 id="column-breaks">
Column breaks</h2>

	The previous level of this specification defined how
	the user agent must determine where column breaks are placed
	when content is laid out in multiple columns.
	The [[!CSS3-BREAK]] module has since been introduced
	to define how to break the content across pages,
	columns, or <a spec=css-regions>CSS Regions</a>,
	and supersedes <a href="https://drafts.csswg.org/css-multicol/#column-breaks">the column break</a> section of [[CSS3-MULTICOL]].

	This specification defers to [[!CSS3-BREAK]] on this topic.

<h3 id="break-before-break-after-break-inside">
'break-before', 'break-after', 'break-inside'</h3>

	The 'break-before', 'break-after' and 'break-inside' properties are now defined in [[!CSS3-BREAK]].

<h2 id="spanning-columns">
Spanning columns</h2>

	The 'column-span' property makes it possible for an element to span across several columns.
	This specification adds <<integer>> to the values available in the previous level.


<h3 id="column-span">
'column-span'</h3>

	<pre class="propdef">
	Name: column-span
	Value: none | <<integer [1,&infin;]>> | all | auto
	Initial: none
	Applies to: in-flow block-level elements
	Inherited: no
	Percentages: N/A
	Computed value: specified value
	Animation type: discrete
	</pre>

	This property describes how many columns an element spans across. Values are:

	<dl dfn-type=value dfn-for=column-span>
		<dt><dfn>none</dfn>
		<dt><dfn>all</dfn>
		<dd>

			Issue: Add final content from previous level

		<dt><dfn><<integer [1,&infin;]>></dfn>
		<dd>
			The element spans the specified number of columns.
			Values must be greater than 0.
			If the specified integer value is equal to,
			or larger than the number of columns in the multicol element,
			the number of columns spanned will be the same as if ''column-span: all'' had been specified.

			<div class=issue>This definition is insufficient.
			<ul>
				<li>Does ''column-span: 1'' count as ''column-span: none'',
				or does it create a spanner (which is a BFC)?
				<li>Which columns does it span?
				<li>How does that a
6B03
ffect height calculations, and interact with column-fill
			</ul>
			</div>

		<dt><dfn>auto</dfn>
		<dd>
			The number of columns spanned by the element
			depends on its <a>min-content</a> <a>outer size</a>
			in the inline direction of the <a>multi-column container</a>.
			If it is smaller than the used value of 'column-width',
			this is the same as if ''column-span: none'' had been specified.
			Otherwise, the number of columns spanned is the smallest positive integer <var>n</var>
			for which <code><var>n</var> × <var>'column-width'</var> + (<var>n</var> - 1) × <var>'column-gap'</var></code>
			is larger than the <a>min-content</a> <a>outer size</a>.
			If this would be larger than the number of columns,
			the number of columns spanned will be the same as if ''column-span: all'' had been specified.

			Issue: If ''column-span: 1'' does not do the same as ''column-span: none'',
			should this behave as ''column-span: 1'' or as ''column-span: none''
			when the element is small enough?
	</dl>

	Issue: Add final content from previous level
	possibly with adjustments to account for <<integer>> values

<h2 id="filling-columns">
Filling columns</h2>

	Issue: Add final content from previous level

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

	Issue: Add final content from previous level

<h2 id="overflow">
Overflow</h2>

<h3 id="overflow-inside-multicol-elements">
Overflow inside multicol elements</h3>

	Issue: Add final content from previous level

<h3 id="pagination-and-overflow-outside-multicol">
Pagination and overflow outside multicol elements</h3>

	Issue: Add final content from previous level

<h2 class=no-num id=acknowledgments>
Acknowledgments</h2>

	This document builds upon Håkon Wium Lie's work in [[CSS3-MULTICOL]],
	and is based on several older proposals and comments on older proposals.
	Contributors include:

	Issue: Add final level 1 contributor list

<h2 class="no-num" id=priv-sec>
Privacy and Security Considerations</h2>

	Delta spec lol