Overview.bs

<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/
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 element
               <!-- 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://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="parial propdef">
	Name: column-span
	Value: none | <<integer>> | all | auto
	Initial: none
	Applies to: in-flow block-level elements
	Inherited: no
	Percentages: N/A
	Media: visual
	Computed value: specified value
	</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>></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 insufficent.
			<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 affect height calculations, and interract 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 element</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 adjustements 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