You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2578 lines
73 KiB
2578 lines
73 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>CSS Multi-column Layout Module</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<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>
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Multi-column Layout Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-working>W3C Candidate Recommendation 12
|
|
April 2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd> <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
|
|
<!--<a href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>-->
|
|
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/css3-multicol">
|
|
http://www.w3.org/TR/css3-multicol</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217">http://www.w3.org/TR/2009/CR-css3-multicol-20091217</a>
|
|
|
|
|
|
<dt>Editors:
|
|
|
|
<dd>Håkon Wium Lie, Opera Software, howcome@opera.com
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>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.
|
|
|
|
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
|
|
document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a
|
|
href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate
|
|
Recommendation.</a>
|
|
|
|
<p>A Candidate Recommendation is a document that has been widely reviewed
|
|
and is ready for implementation. W3C encourages everybody to implement
|
|
this specification and return comments to the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a
|
|
href="mailto:www-style@w3.org?Subject=%5Bcss3-multicol%5D%20PUT%20SUBJECT%20HERE">
|
|
www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>). When sending
|
|
e-mail, please put the text “css3-multicol” in the subject,
|
|
preferably like this: “[<!---->css3-multicol<!---->]
|
|
<em>…summary of comment…</em>”
|
|
|
|
<p>Publication as a Candidate Recommendation does not imply endorsement by
|
|
the W3C Membership. This is a draft document and may be updated, replaced
|
|
or obsoleted by other documents at any time. It is inappropriate to cite
|
|
this document as other than work in progress.
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">
|
|
Essential Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">
|
|
section 6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>This document has been a Working Draft in the CSS Working Group for
|
|
several years. Multi-column layouts are traditionally used in print. On
|
|
screen, multi-column layouts have been considered experimental, and
|
|
implementation and use experience was deemed necessary in order to
|
|
proceed. Several implementations have occurred over the past years, and
|
|
this specification incorporates useful feedback from implementors as well
|
|
as authors and users.
|
|
|
|
<p>The specification was updated in April 2011 to correct a contradiction
|
|
between the text and the pseudo-algorithm in section 3.4. The
|
|
pseudo-algorithm was corrected and also made easier to read. The wording
|
|
of a few other sections was improved in places, without changes to the
|
|
functionality.
|
|
|
|
<p>This document will remain Candidate Recommendation at least until 12 May
|
|
2011. See the <a href="#cr-exit-criteria">CR exit criteria.</a>
|
|
|
|
<h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
|
|
contents</a></h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#the-multi-column-model"><span class=secno>2. </span>The
|
|
multi-column model</a>
|
|
|
|
<li><a href="#the-number-and-width-of-columns"><span class=secno>3.
|
|
</span>The number and width of columns</a>
|
|
<ul class=toc>
|
|
<li><a href="#cw"><span class=secno>3.1. </span>‘<code
|
|
class=property>column-width</code>’</a>
|
|
|
|
<li><a href="#cc"><span class=secno>3.2. </span>‘<code
|
|
class=property>column-count</code>’</a>
|
|
|
|
<li><a href="#columns"><span class=secno>3.3. </span>‘<code
|
|
class=property>columns</code>’</a>
|
|
|
|
<li><a href="#pseudo-algorithm"><span class=secno>3.4.
|
|
</span>Pseudo-algorithm</a>
|
|
|
|
<li><a href="#stacking-context"><span class=secno>3.5. </span>Stacking
|
|
context</a>
|
|
</ul>
|
|
|
|
<li><a href="#column-gaps-and-rules"><span class=secno>4. </span>Column
|
|
gaps and rules</a>
|
|
<ul class=toc>
|
|
<li><a href="#column-gap"><span class=secno>4.1. </span>‘<code
|
|
class=property>column-gap</code>’</a>
|
|
|
|
<li><a href="#crc"><span class=secno>4.2. </span>‘<code
|
|
class=property>column-rule-color</code>’</a>
|
|
|
|
<li><a href="#crs"><span class=secno>4.3. </span>‘<code
|
|
class=property>column-rule-style</code>’</a>
|
|
|
|
<li><a href="#crw"><span class=secno>4.4. </span>‘<code
|
|
class=property>column-rule-width</code>’</a>
|
|
|
|
<li><a href="#column-rule"><span class=secno>4.5. </span>‘<code
|
|
class=property>column-rule</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#column-breaks"><span class=secno>5. </span>Column breaks</a>
|
|
|
|
<ul class=toc>
|
|
<li><a href="#break-before-break-after-break-inside"><span
|
|
class=secno>5.1. </span>‘<code
|
|
class=property>break-before</code>’, ‘<code
|
|
class=property>break-after</code>’, ‘<code
|
|
class=property>break-inside</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#spanning-columns"><span class=secno>6. </span>Spanning
|
|
columns</a>
|
|
<ul class=toc>
|
|
<li><a href="#column-span"><span class=secno>6.1. </span>‘<code
|
|
class=property>column-span</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#filling-columns"><span class=secno>7. </span>Filling
|
|
columns</a>
|
|
<ul class=toc>
|
|
<li><a href="#cf"><span class=secno>7.1. </span>‘<code
|
|
class=property>column-fill</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#overflow"><span class=secno>8. </span>Overflow</a>
|
|
<ul class=toc>
|
|
<li><a href="#overflow-inside-multicol-elements"><span class=secno>8.1.
|
|
</span>Overflow inside multicol elements</a>
|
|
|
|
<li><a href="#pagination-and-overflow-outside-multicol"><span
|
|
class=secno>8.2. </span>Pagination and overflow outside multicol
|
|
elements</a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#cr-exit-criteria"><span class=secno>9.1. </span>CR exit
|
|
criteria</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p>(This section is not normative.)
|
|
|
|
<p>This module describes multi-column layout in CSS. By using functionality
|
|
described in this document, style sheets can declare that the content of
|
|
an element is to be laid out in multiple columns.
|
|
|
|
<p>On the Web, tables have also been used to describe multi-column layouts.
|
|
The main benefit of using CSS-based columns is flexibility; content can
|
|
flow from one column to another, and the number of columns can vary
|
|
depending on the size of the viewport. Removing presentation table markup
|
|
from documents allows them to more easily be presented on various output
|
|
devices including speech synthesizers and small mobile devices.
|
|
|
|
<p>Multi-column layouts are easy to describe in CSS. Here is a simple
|
|
example:
|
|
|
|
<div class=example>
|
|
<pre>body { column-width: 12em }</pre>
|
|
|
|
<p>In this example, the <code class=html>body</code> element is set to
|
|
have columns at least ‘<code class=css>12em</code>’ wide. The
|
|
exact number of columns will depend on the available space.
|
|
</div>
|
|
|
|
<p>The number of columns can also be set explicitly in the style sheet:
|
|
|
|
<div class=example>
|
|
<pre>body { column-count: 2 }</pre>
|
|
|
|
<p>In this case, the number of columns is fixed and the column widths will
|
|
vary depending on the available width.
|
|
</div>
|
|
|
|
<p>The shorthand ‘<a href="#columns0"><code
|
|
class=property>columns</code></a>’ property can be used to set
|
|
either, or both, properties in one declaration.
|
|
|
|
<div class=example>
|
|
<p>In these examples, the number of columns, the width of columns, and
|
|
both the number and width are set, respectively:
|
|
|
|
<pre>
|
|
body { columns: 2 }
|
|
body { columns: 12em }
|
|
body { columns: 2 12em }
|
|
</pre>
|
|
|
|
<p>However, as described below, setting both the width and number of
|
|
columns rarely makes sense.
|
|
</div>
|
|
|
|
<p>Another group of properties introduced in this module describe gaps and
|
|
rules between columns.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
body {
|
|
column-gap: 1em;
|
|
column-rule: thin solid black;
|
|
}
|
|
</pre>
|
|
|
|
<p>The first declaration in the example above sets the gap between two
|
|
adjacent columns to be 1em. Column gaps are similar to padding areas. In
|
|
the middle of the gap there will be a rule which is described by the
|
|
‘<a href="#column-rule0"><code
|
|
class=property>column-rule</code></a>’ property.
|
|
</div>
|
|
|
|
<p>The values of the ‘<a href="#column-rule0"><code
|
|
class=property>column-rule</code></a>’ property are similar to those
|
|
of the CSS border properties. Like ‘<code
|
|
class=property>border</code>’, ‘<a href="#column-rule0"><code
|
|
class=property>column-rule</code></a>’ is a shorthand property.
|
|
|
|
<div class=example>
|
|
<p>In this example, the shorthand ‘<a href="#column-rule0"><code
|
|
class=property>column-rule</code></a>’ declaration from the above
|
|
example has been expanded:
|
|
|
|
<pre>
|
|
body {
|
|
column-gap: 1em;
|
|
column-rule-width: thin;
|
|
column-rule-style: solid;
|
|
column-rule-color: black;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The ‘<a href="#column-fill"><code
|
|
class=property>column-fill</code></a>’ and ‘<a
|
|
href="#column-span0"><code class=property>column-span</code></a>’
|
|
properties give style sheets a wider range of visual expressions in
|
|
multi-column layouts.
|
|
|
|
<div class=example>
|
|
<p>In this example, columns are set to be balanced, i.e., to have
|
|
approximately the same length. Also, <code>h2</code> elements are set to
|
|
span across all columns.
|
|
|
|
<pre>
|
|
div { column-fill: balance }
|
|
h2 { column-span: all }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>This specification introduces ten new properties, all of which are used
|
|
in the examples above.
|
|
|
|
<p>To indicate where column breaks should (or should not) appear, new
|
|
keyword values are introduced.
|
|
|
|
<div class=example>
|
|
<p>In this example, <code>h1</code> elements will always have a column
|
|
break before them, but the formatter will try to avoid column breaks
|
|
inside and after the element.
|
|
|
|
<pre>
|
|
h1 {
|
|
break-before: column;
|
|
break-inside: avoid-column;
|
|
break-after: avoid-column;
|
|
}
|
|
</pre>
|
|
<!--<p>The properties and values used in this example are formally defined in [!CSS3PAGE]].-->
|
|
</div>
|
|
|
|
<p>If all column properties have their initial value, the layout of an
|
|
element will be identical to a multi-column layout with only one column.
|
|
|
|
<h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
|
|
model</h2>
|
|
|
|
<p>A <dfn id=multi-column-element>multi-column element</dfn> (or
|
|
<em>multicol element</em> for short) is an element whose ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’
|
|
or ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’ property is not ‘<code
|
|
class=css>auto</code>’ and therefore acts as a container for
|
|
multi-column layout.
|
|
|
|
<p>In the traditional CSS box model, the content of an element is flowed
|
|
into the content box of the corresponding element. Multi-column layout
|
|
introduces a new type of container between the content box and the
|
|
content, namely the <dfn id=column-box>column box</dfn> (or
|
|
<em>column</em> for short). The content of a multicol element is flowed
|
|
into its column boxes.
|
|
|
|
<p>Column boxes in a multi-column element are arranged into <em>rows</em>.
|
|
Like table cells, the column boxes in a row are ordered in the inline
|
|
direction of the multicol element. The <em>column width</em> is the length
|
|
of the column box in the inline direction. The <em>column height</em> is
|
|
the length of the column box in the block direction. All column boxes in a
|
|
row have the same column width, and all column boxes in a row have the
|
|
same column height. Within each row in the multi-column element, adjacent
|
|
column boxes are separated by a <em>column gap</em>, which may contain a
|
|
<em>column rule</em>. All column gaps in the same row are equal. All
|
|
column rules in the same row are also equal, if they appear; column rules
|
|
only appear between columns that both have content.
|
|
|
|
<p>In the simplest case a multicol element will contain only one row of
|
|
columns, and the height of each column will be equivalent to the used
|
|
height of the multi-column element's content box. If the multi-column
|
|
element is paginated, the height of each row is constrained by the page
|
|
and the content continues in a new row of column boxes on the next page; a
|
|
column box never splits across pages. The same effect occurs when a <a
|
|
href="#spanning-element"><em>spanning element</em></a> divides the
|
|
multi-column element: the columns before the spanning element are balanced
|
|
and shortened to fit their content. Content after the spanning element
|
|
then flows into a new row of column boxes.
|
|
|
|
<p>It is not possible to set properties/values on column boxes. For
|
|
example, the background of a certain column box cannot be set and a column
|
|
box has no concept of padding, margin or borders.
|
|
|
|
<p class=note>Future specifications may add additional functionality. For
|
|
example, columns of different widths and different backgrounds may be
|
|
supported.
|
|
|
|
<div class=example>
|
|
<p>Column gaps (yellow) and column rules (green) are shown in this sample
|
|
rendition of a multi-column element with padding (blue). The blue and
|
|
yellow is present for illustrational purposes only. In actual
|
|
implementations these areas will be determined by the background.
|
|
|
|
<div class=cols>
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
Pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
|
|
<p>To illustrate the effects of the various properties described in this
|
|
specification, variations on a sample document will be used. Here is the
|
|
source code of the sample document:
|
|
|
|
<pre class=html>
|
|
<html>
|
|
<style type="text/css">
|
|
div {
|
|
column-width: 15em;
|
|
column-gap: 2em; /* shown in yellow */
|
|
column-rule: 4px solid green;
|
|
padding: 5px; /* shown in blue */
|
|
}
|
|
p { margin: 0; padding: 0 }
|
|
img { display: none }
|
|
</style>
|
|
<body>
|
|
<div>
|
|
<p>Ab cde fgh i jkl. Mno
|
|
pqr stu vw xyz. A bc
|
|
<img src=...>
|
|
def g hij
|
|
...
|
|
</div>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
<p>The nonsensical text in the example is the English alphabet which shows
|
|
how text flows from one column to another. To simplify the visualization,
|
|
the textual content of the different examples vary slightly.
|
|
</div>
|
|
|
|
<p>Column boxes act as the containing block for their content. That is,
|
|
column boxes behave like block-level, table cell, and inline-block boxes
|
|
as per CSS 2.1, section 10.1, item 2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. However, column boxes do not
|
|
establish containing blocks for elements with ‘<code
|
|
class=css>position: fixed</code>’ or ‘<code
|
|
class=css>position: absolute</code>’.
|
|
<!--Percentage values that are calculated
|
|
relative to the containing block height are calculated based on the
|
|
multicol element's height, not the column box's height.-->
|
|
|
|
|
|
<div class=example>
|
|
<p>In this example, the width of the image is set with these rules:
|
|
|
|
<pre class=css>
|
|
img { display: block; width: 100% }
|
|
</pre>
|
|
|
|
<p>Given that the width is calculated relative to the column box, the
|
|
image will be as wide as the column box:
|
|
|
|
<div class=cols>
|
|
<p>Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p>hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=rep style="width: 150px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Floats that appear inside multi-column layouts are positioned with
|
|
regard to the column box where the float appears.
|
|
|
|
<div class=example>
|
|
<p>In this example, this CSS fragment describes the presentation of the
|
|
image:
|
|
|
|
<pre class=css>
|
|
img { display: block; float: right }
|
|
</pre>
|
|
|
|
<div class=cols>
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g<br>
|
|
hij klm<br>
|
|
nopq<br>
|
|
rs tuv<br>
|
|
wxy x<br>
|
|
yz. Ab <br>
|
|
cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
</div>
|
|
|
|
<div class=rep style="left: 50px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
|
|
<p>The black box represents the image.
|
|
</div>
|
|
|
|
<p>A multi-column element establishes a new block formatting context, as
|
|
per CSS 2.1 section 9.4.1.
|
|
|
|
<div class=example>
|
|
<p>A top margin set on the first child element of a multicol element will
|
|
not collapse with the margins of the multicol element.
|
|
</div>
|
|
|
|
<p>Nested multi-column elements are allowed, but there may be
|
|
implementation-specific limits.
|
|
|
|
<h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The
|
|
number and width of columns</h2>
|
|
|
|
<p>Finding the number and width of columns is fundamental when laying out
|
|
multi-column content. When the block direction is unconstrained and no
|
|
column breaks are added through style sheets, these two properties
|
|
determine the outcome:
|
|
|
|
<ul>
|
|
<li>‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’
|
|
|
|
<li>‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’
|
|
</ul>
|
|
|
|
<p>A third property, ‘<a href="#columns0"><code
|
|
class=property>columns</code></a>’, is a shorthand property which
|
|
sets both ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ and ‘<a
|
|
href="#column-count"><code class=property>column-count</code></a>’.
|
|
|
|
<h3 id=cw><span class=secno>3.1. </span>‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-width>column-width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length> | auto
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>the absolute length, zero or larger
|
|
</table>
|
|
|
|
<p>This property describes the width of columns in multicol elements.
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>means that the column width will be determined by other properties
|
|
(e.g., ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’, if it has a non-auto
|
|
value).
|
|
|
|
<dt><length>
|
|
|
|
<dd>describes the optimal column width. The actual column width may be
|
|
wider (to fill the available space), or narrower (only if the available
|
|
space is smaller than the specified column width). Specified values must
|
|
be greater than 0.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>For example, consider this style sheet:</p>
|
|
|
|
<pre>
|
|
div {
|
|
width: 100px;
|
|
column-width: 45px;
|
|
column-gap: 0;
|
|
column-rule: none;
|
|
}
|
|
</pre>
|
|
|
|
<p>There is room for two 45px wide columns inside the 100px wide element.
|
|
In order to fill the available space the actual column width will be
|
|
increased to 50px.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Also, consider this style sheet:</p>
|
|
|
|
<pre>
|
|
div {
|
|
width: 40px;
|
|
column-width: 45px;
|
|
column-gap: 0;
|
|
column-rule: none;
|
|
}
|
|
</pre>
|
|
|
|
<p>The available space is smaller than the specified column width and the
|
|
actual column width will therefore be decreased.</p>
|
|
</div>
|
|
|
|
<p>To ensure that ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ can be used with vertical
|
|
text, column width means the length of the line boxes inside the columns.
|
|
|
|
<p class=note>The reason for making ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ somewhat flexible is to
|
|
achieve scalable designs that can fit many screen sizes. To set an exact
|
|
column width, all length values (in horizontal text these are:
|
|
‘<code class=property>width</code>’, ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’,
|
|
‘<a href="#column-gap0"><code
|
|
class=property>column-gap</code></a>’, and ‘<a
|
|
href="#column-rule-width"><code
|
|
class=property>column-rule-width</code></a>’) must be specified.
|
|
|
|
<h3 id=cc><span class=secno>3.2. </span>‘<a
|
|
href="#column-count"><code class=property>column-count</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-count>column-count</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><integer> | auto
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property describes the number of columns of a multicol element.
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>means that the number of columns will be determined by other
|
|
properties (e.g., ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’, if it has a non-auto
|
|
value).
|
|
|
|
<dt><integer>
|
|
|
|
<dd>describes the optimal number of columns into which the content of the
|
|
element will be flowed. Values must be greater than 0. If both ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’
|
|
and ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’ have non-auto values, the
|
|
integer value describes the maximum number of columns.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<pre>body { column-count: 3 }</pre>
|
|
</div>
|
|
|
|
<h3 id=columns><span class=secno>3.3. </span>‘<a
|
|
href="#columns0"><code class=property>columns</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=columns0>columns</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#cw"><‘<code
|
|
class=property>column-width</code>’></a> || <a
|
|
href="#cc"><‘<code
|
|
class=property>column-count</code>’></a>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>This is a shorthand property for setting ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’
|
|
and ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’. Omitted values are set to
|
|
their initial values.
|
|
|
|
<div class=example>
|
|
<p>Here are some valid declarations using the ‘<a
|
|
href="#columns0"><code class=property>columns</code></a>’ property:
|
|
|
|
|
|
<pre>
|
|
columns: 12em; /* column-width: 12em; column-count: auto */
|
|
columns: auto 12em; /* column-width: 12em; column-count: auto */
|
|
columns: 2; /* column-width: auto; column-count: 2 */
|
|
columns: 2 auto; /* column-width: auto; column-count: 2 */
|
|
columns: auto; /* column-width: auto; column-count: auto */
|
|
columns: auto auto; /* column-width: auto; column-count: auto */
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>
|
|
|
|
<p>The pseudo-algorithm below determines the used values for ‘<a
|
|
href="#column-count"><code class=property>column-count</code></a>’
|
|
(N) and ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ (W). There are two other
|
|
variables in the pseudo-algorithm:
|
|
|
|
<ul>
|
|
<li><code>available-width</code>: if the used width of the multi-column
|
|
element has not been determined when the ‘<a
|
|
href="#column-count"><code class=property>column-count</code></a>’
|
|
and ‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ must be determined (e.g.,
|
|
if it is floating with a ‘<code class=property>width</code>’
|
|
of ‘<code class=property>auto</code>’ as per CSS 2.1 section
|
|
10.3.5) this variable is <code>unknown</code>, otherwise it is the same
|
|
as the used width of the multi-column element. In vertical text, the used
|
|
height replaces used width in this calculation.
|
|
|
|
<li><code>shrink-to-fit</code>: this variable represents the result of a
|
|
<em>shrink-to-fit</em> computation. CSS does not define the exact
|
|
algorithm.
|
|
</ul>
|
|
|
|
<p>Two assumptions are being made by the pseudo-algorithm:
|
|
|
|
<ul>
|
|
<li>that the block direction is unconstrained
|
|
|
|
<li>that no column breaks are added through style sheets
|
|
</ul>
|
|
|
|
<p>The <code>floor()</code> function rounds a number to the next smaller
|
|
integer. <!--
|
|
<pre>
|
|
(01) if ((column-width = auto) and (column-count = auto)) or
|
|
(02) ((available-width = unknown) and (column-count = auto)) then
|
|
(03) exit; /* no columns */
|
|
(04) fi
|
|
(05)
|
|
(06) if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
|
|
(07) N := column-count;
|
|
(08) W := column-width;
|
|
(09) exit;
|
|
(10) fi
|
|
(11)
|
|
(12) if (available-width = unknown) then
|
|
(13) available-width := shrink-to-fit;
|
|
(14) fi
|
|
(15)
|
|
(16) if (column-width = auto) then
|
|
(18) N := column-count;
|
|
(19) W := max(0, (available-width - ((N - 1) * column-gap))/N);
|
|
(27) elsif (column-count = auto) then
|
|
(28) if (column-width >= available-width) then
|
|
(29) N := 1
|
|
(30) W := available-width;
|
|
(31) else
|
|
(32) N := floor((available-width + column-gap) / (column-width + column-gap));
|
|
(33) W := ((available-width + column-gap) / N) - column-gap;
|
|
(34) fi
|
|
(35) elsif (column-width >= available-width) then
|
|
(36) N := 1
|
|
(37) W := available-width;
|
|
(38) else
|
|
(39) N := min(column-count, floor((available-width + column-gap) / (column-width + column-gap)))
|
|
(40) W := ((available-width + column-gap) / N) - column-gap;
|
|
(41) fi
|
|
</pre>
|
|
|
|
<p><span class=issue>Alternative encoding of pseudo-algorithm:
|
|
-->
|
|
|
|
|
|
<pre>
|
|
(01) if ((column-width = auto) and (column-count = auto)) then
|
|
(02) exit; /* not a multicol element */
|
|
|
|
(03) if ((available-width = unknown) and (column-count = auto)) then
|
|
(04) exit; /* no columns */
|
|
|
|
(05) if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
|
|
(06) N := column-count;
|
|
(07) W := column-width;
|
|
(08) exit;
|
|
|
|
(09) if (available-width = unknown) then
|
|
(10) available-width := shrink-to-fit;
|
|
|
|
(11) if (column-width = auto) and (column-count != auto) then
|
|
(12) N := column-count;
|
|
(13) W := max(0, (available-width - ((N - 1) * column-gap)) / N);
|
|
(14) exit;
|
|
|
|
(15) if (column-width != auto) and (column-count = auto) then
|
|
(16) N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));
|
|
(17) W := ((available-width + column-gap) / N) - column-gap;
|
|
(18) exit;
|
|
|
|
(19) if (column-width != auto) and (column-count != auto) then
|
|
(20) N := min(column-count, floor((available-width + column-gap) / (column-width + column-gap)))
|
|
(21) W := ((available-width + column-gap) / N) - column-gap;
|
|
(22) exit
|
|
</pre>
|
|
|
|
<p>In paged media, user agents may perform this calculation on a per-page
|
|
basis.
|
|
|
|
<p class=note>Note that, in most cases, only one of ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’
|
|
and ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’ affect the layout. If
|
|
‘<a href="#column-width"><code
|
|
class=property>column-width</code></a>’ has a value other than
|
|
‘<code class=css>auto</code>’, ‘<a
|
|
href="#column-count"><code class=property>column-count</code></a>’
|
|
indicates the maximum number of columns. However, both ‘<a
|
|
href="#column-width"><code class=property>column-width</code></a>’
|
|
and ‘<a href="#column-count"><code
|
|
class=property>column-count</code></a>’ are honored when the width
|
|
of the element has not been determined. This can, e.g., be the case for
|
|
table cells and floats.
|
|
|
|
<h3 id=stacking-context><span class=secno>3.5. </span>Stacking context</h3>
|
|
|
|
<p>All column boxes in a multi-column element are in the same stacking
|
|
context and the drawing order of their contents is as specified in CSS
|
|
2.1.
|
|
|
|
<h2 id=column-gaps-and-rules><span class=secno>4. </span>Column gaps and
|
|
rules</h2>
|
|
|
|
<p>Column gaps and rules are placed between columns in the same multicol
|
|
element. The length of the column gaps and column rules is equal to the
|
|
length of the columns. Column gaps take up space. That is, column gaps
|
|
will push apart content in adjacent columns (within the same multicol
|
|
element).
|
|
|
|
<p>A column rule is drawn in the middle of the column gap with the
|
|
endpoints at opposing content edges of the multicol element. Column rules
|
|
do not take up space. That is, the presence or thickness of a column rule
|
|
will not alter the placement of anything else. If a column rule is wider
|
|
than its gap, the column rule will overlap adjacent column boxes, and
|
|
possibly extend outside the box of the multicol element. Column rules are
|
|
painted just above the background of the multicol element. This allows
|
|
child elements with ‘<code class=property>z-index</code>’
|
|
values to be on top of column rules. Column rules are only drawn between
|
|
two columns that both have content.
|
|
|
|
<h3 id=column-gap><span class=secno>4.1. </span>‘<a
|
|
href="#column-gap0"><code class=property>column-gap</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-gap0>column-gap</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length> | normal
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>absolute length or ‘<code class=property>normal</code>’
|
|
</table>
|
|
|
|
<p>The ‘<a href="#column-gap0"><code
|
|
class=property>column-gap</code></a>’ property sets the gap between
|
|
columns. If there is a column rule between columns, it will appear in the
|
|
middle of the gap.
|
|
|
|
<p>The ‘<code class=css>normal</code>’ value is UA-specific. A
|
|
value of ‘<code class=css>1em</code>’ is suggested.
|
|
|
|
<p>Column gaps cannot be negative.
|
|
|
|
<h3 id=crc><span class=secno>4.2. </span>‘<a
|
|
href="#column-rule-color"><code
|
|
class=property>column-rule-color</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-rule-color>column-rule-color</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><color>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>same as for ‘<code class=property>color</code>’ property
|
|
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>the same as the computed value for the ‘<code
|
|
class=property>color</code>’ property <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</table>
|
|
|
|
<p>This property sets the color of the column rule. The <color>
|
|
values are defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<h3 id=crs><span class=secno>4.3. </span>‘<a
|
|
href="#column-rule-style"><code
|
|
class=property>column-rule-style</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-rule-style>column-rule-style</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a
|
|
href="http://www.w3.org/TR/CSS2/tables.html#table-border-styles"><border-style></a>
|
|
<!--http://www.w3.org/TR/CSS21/box.html#value-def-border-style-->
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#column-rule-style"><code
|
|
class=property>column-rule-style</code></a>’ property sets the style
|
|
of the rule between columns of an element. The <border-style> values
|
|
are defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and the values are
|
|
interpreted as in the <a
|
|
href="http://www.w3.org/TR/CSS2/tables.html#collapsing-borders">the
|
|
collapsing border model</a>.
|
|
|
|
<p>The ‘<code class=property>none</code>’ value forces the
|
|
computed value of <span class=property>‘<a
|
|
href="#column-rule-width"><code
|
|
class=property>column-rule-width</code></a>’</span> to be
|
|
‘<code class=css>0</code>’.
|
|
|
|
<h3 id=crw><span class=secno>4.4. </span>‘<a
|
|
href="#column-rule-width"><code
|
|
class=property>column-rule-width</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-rule-width>column-rule-width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#value-def-border-width"><border-width></a>
|
|
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>medium
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>absolute length; ‘<code class=css>0</code>’ if the
|
|
column rule style is ‘<code class=property>none</code>’ or
|
|
‘<code class=property>hidden</code>’
|
|
</table>
|
|
|
|
<p>This property sets the width of the rule between columns. Negative
|
|
values are not allowed.
|
|
|
|
<h3 id=column-rule><span class=secno>4.5. </span>‘<a
|
|
href="#column-rule0"><code class=property>column-rule</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-rule0>column-rule</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a href="#crw"><‘<code
|
|
class=property>column-rule-width</code>’></a> || <a
|
|
href="#crs"><‘<code
|
|
class=property>column-rule-style</code>’></a> || [ <a
|
|
href="#crc"><‘<code
|
|
class=property>column-rule-color</code>’></a> | transparent ]
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>This property is a shorthand for setting ‘<a
|
|
href="#column-rule-width"><code
|
|
class=property>column-rule-width</code></a>’, ‘<a
|
|
href="#column-rule-style"><code
|
|
class=property>column-rule-style</code></a>’, and ‘<a
|
|
href="#column-rule-color"><code
|
|
class=property>column-rule-color</code></a>’ at the same place in
|
|
the style sheet. Omitted values are set to their initial values.
|
|
|
|
<div class=example>
|
|
<p>In this example, the column rule and the column gap have the same
|
|
width. Therefore, they will occupy exactly the same space.
|
|
|
|
<pre>
|
|
body {
|
|
column-gap: 1em;
|
|
column-rule-width: 1em;
|
|
column-rule-style: solid;
|
|
column-rule-color: black;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>If a tall image is moved to a column on the next page to find room for
|
|
it, its natural column may be left empty. If so, the column is is still
|
|
considered to have content for the purpose of deciding if the column rule
|
|
should be drawn.
|
|
</div>
|
|
|
|
<h2 id=column-breaks><span class=secno>5. </span>Column breaks</h2>
|
|
|
|
<p>When content is laid out in multiple columns, the user agent must
|
|
determine where column breaks are placed. The problem of breaking content
|
|
into columns is similar to breaking content into pages.
|
|
|
|
<p>Three new properties are introduced to allow column breaks to be
|
|
described in the same properties as page breaks: ‘<a
|
|
href="#break-before"><code class=property>break-before</code></a>’,
|
|
‘<a href="#break-after"><code
|
|
class=property>break-after</code></a>’, and ‘<a
|
|
href="#break-inside"><code class=property>break-inside</code></a>’.
|
|
These properties take the same values as ‘<code
|
|
class=property>page-break-before</code>’, ‘<code
|
|
class=property>page-break-after</code>’, and ‘<code
|
|
class=property>page-break-inside</code>’ <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. In addition, some new
|
|
keyword values are added.
|
|
|
|
<h3 id=break-before-break-after-break-inside><span class=secno>5.1.
|
|
</span>‘<a href="#break-before"><code
|
|
class=property>break-before</code></a>’, ‘<a
|
|
href="#break-after"><code class=property>break-after</code></a>’,
|
|
‘<a href="#break-inside"><code
|
|
class=property>break-inside</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=break-before>break-before</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | always | avoid | left | right | page | column | avoid-page |
|
|
avoid-column
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=break-after>break-after</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | always | avoid | left | right | page | column | avoid-page |
|
|
avoid-column
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=break-inside>break-inside</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | avoid | avoid-page | avoid-column
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>These properties describe page/column break behavior before/after/inside
|
|
the generated box. These values are normatively defined in <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>:
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>Neither force nor forbid a page/column break before (after, inside)
|
|
the generated box.
|
|
|
|
<dt>always
|
|
|
|
<dd>Always force a page break before (after) the generated box.
|
|
|
|
<dt>avoid
|
|
|
|
<dd>Avoid a page/column break before (after, inside) the generated box.
|
|
|
|
<dt>left
|
|
|
|
<dd>Force one or two page breaks before (after) the generated box so that
|
|
the next page is formatted as a left page.
|
|
|
|
<dt>right
|
|
|
|
<dd>Force one or two page breaks before (after) the generated box so that
|
|
the next page is formatted as a right page.
|
|
</dl>
|
|
|
|
<p>This specification adds the following new values:
|
|
|
|
<dl>
|
|
<dt>page
|
|
|
|
<dd>Always force a page break before (after) the generated box.
|
|
|
|
<dt>column
|
|
|
|
<dd>Always force a column break before (after) the generated box.
|
|
|
|
<dt>avoid-page
|
|
|
|
<dd>Avoid a page break before (after, inside) the generated box.
|
|
|
|
<dt>avoid-column
|
|
|
|
<dd>Avoid a column break before (after, inside) the generated box.
|
|
</dl>
|
|
|
|
<p>When a page or column break splits a box, the box's margins, borders,
|
|
and padding have no visual effect where the split occurs. However, the
|
|
margin immediately after a forced page/column break will be preserved. A
|
|
forced page/column break is a break that does not occur naturally.
|
|
|
|
<p class=note>In the future, new properties may describe alternate ways to
|
|
handle margins, borders and padding around page/column breaks.
|
|
|
|
<div class=example>
|
|
<p>In this example, forced column breaks appear before <code>h2</code>
|
|
elements and after <code>img</code> elements:
|
|
|
|
<pre>
|
|
.multicol { column-width: 8em }
|
|
.multicol h2 { break-before: column; margin-top: 2em }
|
|
.multicol img { break-after: column }
|
|
</pre>
|
|
|
|
<p>The top margin of <code>h2</code> elements will be preserved since the
|
|
column break is forced.
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, the formatter will try avoid column breaks inside
|
|
<code>p</code> elements:
|
|
|
|
<pre>
|
|
p { break-inside: avoid-column }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=spanning-columns><span class=secno>6. </span>Spanning columns</h2>
|
|
|
|
<p>The ‘<a href="#column-span0"><code
|
|
class=property>column-span</code></a>’ property makes it possible
|
|
for an element to span across several columns.
|
|
|
|
<h3 id=column-span><span class=secno>6.1. </span>‘<a
|
|
href="#column-span0"><code class=property>column-span</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-span0>column-span</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | all
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em> <!--
|
|
<td>static, non-floating elements,
|
|
-->
|
|
|
|
|
|
<td>block-level elements, except floating and absolutely positioned
|
|
elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property describes how many columns an element spans across. Values
|
|
are:
|
|
|
|
<dl>
|
|
<dt>none
|
|
|
|
<dd>The element does not span multiple columns.
|
|
|
|
<dt>all
|
|
|
|
<dd>The element spans across all columns. Content in the normal flow that
|
|
appears before the element is automatically balanced across all columns
|
|
before the element appears. The element establishes a new block
|
|
formatting context.
|
|
</dl>
|
|
|
|
<p>An element that spans more than one column is called a <dfn
|
|
id=spanning-element>spanning element</dfn>. <!--
|
|
<p>This property has no effect on elements that do not fit entirely
|
|
within the multicol element. Also, if a setting on this property pushes the
|
|
element outside a multicol element, this property will have no effect.
|
|
-->
|
|
|
|
|
|
<div class=example>
|
|
<p>In this example, an <code>h2</code> element has been added to the
|
|
sample document after the first sentence in the fourth sentence (i.e.,
|
|
after the word "jkl."). This styling applies:
|
|
|
|
<pre class=css>
|
|
h2 { column-span: all; background: silver }
|
|
img { display: none }
|
|
</pre>
|
|
|
|
<p>By setting ‘<a href="#column-span0"><code
|
|
class=property>column-span</code></a>’ to ‘<code
|
|
class=css>all</code>’, all content that appear before the
|
|
<code>h2</code> element is shown before the <code>h2</code> element.
|
|
|
|
<div class=cols>
|
|
<p>Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
<br>
|
|
<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p>def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
<br>
|
|
<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
<br>
|
|
<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=rep style="width: 490px; height: 20px; background: silver;
|
|
font-size: 1.5em; padding: 5px">An H2 element</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>A spanning element takes up more space than the element would take up
|
|
otherwise. When space is limited, it may be impossible to find room for
|
|
the spanning element. In these cases, user agents may treat the element as
|
|
if ‘<code class=property>none</code>’ had been specified on
|
|
this property.
|
|
|
|
<div class=example>
|
|
<p>This is a variation of the previous example. In this example, the H2
|
|
element appears later in the content, and the height of the multicol
|
|
element is constrained. Therefore, the H2 element appears in the overflow
|
|
and there is not room to make the element spanning. As a result, the
|
|
element appears as if ‘<code class=css>column-span:
|
|
none</code>’ was specified.
|
|
|
|
<div class=cols style="height: 100px">
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 525px">
|
|
<p>pqr stu vw xyz.
|
|
|
|
<div class=rep style="width: 140px; height: 40px; background: silver;
|
|
font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2
|
|
element</div>
|
|
A bc def g hij klm</div>
|
|
|
|
<div class=col style="left: 700px"> nopqrs tuv wxy z.</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
|
|
<div class=gap style="left: 500px"></div>
|
|
|
|
<div class=gap style="left: 675px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id=filling-columns><span class=secno>7. </span>Filling columns</h2>
|
|
|
|
<p>There are two strategies for filling columns: columns can either be
|
|
balanced, or not. If columns are balanced, UAs should minimize the
|
|
variation in column length. Otherwise, columns are filled sequentially and
|
|
some columns may end up partially filled, or with no content at all. In
|
|
any case, the user agent should try to honor the ‘<code
|
|
class=property>widows</code>’ and ‘<code
|
|
class=property>orphans</code>’ properties.
|
|
|
|
<h3 id=cf><span class=secno>7.1. </span>‘<a href="#column-fill"><code
|
|
class=property>column-fill</code></a>’</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=column-fill>column-fill</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | balance
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>balance
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>multicol elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>see below
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>The values are:
|
|
|
|
<dl>
|
|
<dt>balance
|
|
|
|
<dd>Balance content equally between columns, if possible.
|
|
|
|
<dt>auto
|
|
|
|
<dd>Fills columns sequentially.
|
|
</dl>
|
|
|
|
<p>In continuous media, this property will only be consulted if the length
|
|
of columns has been constrained. Otherwise, columns will automatically be
|
|
balanced.
|
|
|
|
<p>In continous media, this property does not have any effect in overflow
|
|
columns (see below).
|
|
|
|
<p>In paged media, this property will only have effect on the last page the
|
|
multicol element appears on.
|
|
|
|
<h2 id=overflow><span class=secno>8. </span>Overflow</h2>
|
|
|
|
<h3 id=overflow-inside-multicol-elements><span class=secno>8.1.
|
|
</span>Overflow inside multicol elements</h3>
|
|
|
|
<p>Content in the normal flow that extends into column gaps (e.g., long
|
|
words or images) is clipped in the middle of the column gap.
|
|
|
|
<div class=example>
|
|
<p>In this example, the black image is wider than the column, and is
|
|
therefore clipped.
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus. <br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="width: 163px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id=pagination-and-overflow-outside-multicol><span class=secno>8.2.
|
|
</span>Pagination and overflow outside multicol elements</h3>
|
|
|
|
<p>Content and column rules that extend outside column boxes at the edges
|
|
of the multi-column element are clipped according to the ‘<code
|
|
class=property>overflow</code>’ property.
|
|
|
|
<p>A multicol element can have more columns than it has room for due to:
|
|
|
|
<ul>
|
|
<li>a declaration that constrains the column height (e.g., using
|
|
‘<code class=property>height</code>’ or ‘<code
|
|
class=property>max-height</code>’). In this case, additional column
|
|
boxes are created in the inline direction
|
|
|
|
<li>the size of the page. In this case, additional column boxes are moved
|
|
to the next page(s).
|
|
|
|
<li>explicit column breaks. In this case, additional column boxes are
|
|
created in the inline direction for continous media, and additional
|
|
column boxes are moved to the next page(s) for paged media.
|
|
</ul>
|
|
|
|
<p>Columns that appear outside the multicol element in continous media are
|
|
called <dfn id=overflow-columns>overflow columns</dfn>.
|
|
|
|
<div class=example>
|
|
<p>In this example, the height of the multi-column element has been
|
|
constrained to a maximum height. Also, the style sheet specifies that
|
|
overflowing content should be visible:
|
|
|
|
<pre class=css>
|
|
div {
|
|
max-height: 5em;
|
|
overflow: visible;
|
|
}
|
|
</pre>
|
|
|
|
<p>As a result, the number of columns is increased.
|
|
|
|
<div class=cols style="height: 100px">
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 525px">
|
|
<p> pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
|
|
<div class=gap style="left: 500px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, explicit column breaks are generated after paragraphs:
|
|
|
|
|
|
<pre class=css>
|
|
p {
|
|
break-after: column;
|
|
}
|
|
</pre>
|
|
|
|
<p>As a result, the number of columns increases and the extra columns
|
|
added in the inline direction:
|
|
|
|
<div class=cols style="height: 100px">
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z.
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> Ab cde fgh i jkl mno.<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 525px">
|
|
<p> Pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno pqr stu v<br>
|
|
wx yz.
|
|
</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
|
|
<div class=gap style="left: 500px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In paged media, extra columns are shown on the next page. Given the
|
|
same code as the previous example:
|
|
|
|
<pre class=css>
|
|
p {
|
|
break-after: column;
|
|
}
|
|
</pre>
|
|
|
|
<p>As a result, the number of columns is increased and placed on the next
|
|
page. This would appear on the first page:
|
|
|
|
<div class=cols style="height: 80px; border-bottom: none">
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z.
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> Ab cde fgh i jkl.<br>
|
|
</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
|
|
<p>This would appear on the second page:
|
|
|
|
<div class=cols style="height: 100px; border-top: none">
|
|
<div class=col style="">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno.<br>
|
|
</div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id=conformance><span class=secno>9. </span>Conformance</h2>
|
|
|
|
<p>Conforming UAs must flow the content of an element into several columns
|
|
according to this specification.
|
|
|
|
<p>The conformance requirements are expressed with a combination of
|
|
descriptive assertions and RFC 2119 terminology. The key words "MUST",
|
|
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
|
|
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
|
|
document are to be interpreted as described in RFC 2119. However, for
|
|
readability, these words do not appear in all uppercase letters in this
|
|
specification. All of the text of this specification is normative except
|
|
sections explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<h3 id=cr-exit-criteria><span class=secno>9.1. </span>CR exit criteria</h3>
|
|
|
|
<p>As described in the W3C process document, a <a
|
|
href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">Candidate
|
|
Recommendation</a> (CR) is a specification that W3C recommends for use on
|
|
the Web. The next stage is <em>Recommendation</em>, when the specification
|
|
is sufficiently implemented.
|
|
|
|
<p>For this specification to be proposed as a W3C Recommendation, the
|
|
following conditions shall be met. There must be at least two independent,
|
|
interoperable implementations of each feature. Each feature may be
|
|
implemented by a different set of products, there is no requirement that
|
|
all features be implemented by a single product. For the purposes of this
|
|
criterion, we define the following terms:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>each implementation must be developed by a different party and cannot
|
|
share, reuse, or derive from code used by another qualifying
|
|
implementation. Sections of code that have no bearing on the
|
|
implementation of this specification are exempt from this requirement.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>passing the respective test case(s) in the official CSS test suite,
|
|
or, if the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created if
|
|
such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then there
|
|
must one or more additional UAs which can also pass those equivalent
|
|
tests in the same way for the purpose of interoperability. The equivalent
|
|
tests must be made publicly available for the purposes of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>is available to the general public. The implementation may be a
|
|
shipping product or other publicly available version (i.e., beta
|
|
version, preview release, or <em>nightly build</em>). Non-shipping
|
|
product releases must have implemented the feature(s) for a period of
|
|
at least one month in order to demonstrate stability.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p>A minimum of sixth months of the CR period must have elapsed. This is to
|
|
ensure that enough time is given for any remaining major errors to be
|
|
caught.
|
|
|
|
<p>Features will be dropped if two or more interoperable implementations
|
|
are not found by the end of the CR period.
|
|
|
|
<p>Features may/will also be dropped if adequate/sufficient (by judgment of
|
|
CSS WG) tests have not been produced for those feature(s) by the end of
|
|
the CR period.
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>This document is based on several older proposals and comments on older
|
|
proposals. Contributors include Øyvind Stenhaug, Sylvain Galineau,
|
|
Giovanni Campagna, David Hyatt, David Singer, David Woolley, Elika Etemad,
|
|
Björn Höhrmann, Joost de Valk, Peter-Paul Koch, Shelby Moore,
|
|
Till Halbach, Cédric Savarese, Andy Clarke, Robert O'Callahan,
|
|
Markus Mielke, Alex Mogilevsky, Sergey Genkin, Michael Day, Melinda Grant,
|
|
Kevin Lawver, David Baron, Bert Bos, Dave Raggett, Chris Wilson, Robert
|
|
Stevahn, Peter Linss, Chris Lilley, Steve Zilles, Tantek Çelik,
|
|
Daniel Glazman and Ian Hickson.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2010/WD-CSS2-20101207"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 December
|
|
2010. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/WD-CSS2-20101207">http://www.w3.org/TR/2010/WD-CSS2-20101207</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>break-after, <a href="#break-after"
|
|
title=break-after><strong>5.1.</strong></a>
|
|
|
|
<li>break-before, <a href="#break-before"
|
|
title=break-before><strong>5.1.</strong></a>
|
|
|
|
<li>break-inside, <a href="#break-inside"
|
|
title=break-inside><strong>5.1.</strong></a>
|
|
|
|
<li>column box, <a href="#column-box" title="column
|
|
box"><strong>2.</strong></a>
|
|
|
|
<li>column-count, <a href="#column-count"
|
|
title=column-count><strong>3.2.</strong></a>
|
|
|
|
<li>column-fill, <a href="#column-fill"
|
|
title=column-fill><strong>7.1.</strong></a>
|
|
|
|
<li>column-gap, <a href="#column-gap0"
|
|
title=column-gap><strong>4.1.</strong></a>
|
|
|
|
<li>column-rule, <a href="#column-rule0"
|
|
title=column-rule><strong>4.5.</strong></a>
|
|
|
|
<li>column-rule-color, <a href="#column-rule-color"
|
|
title=column-rule-color><strong>4.2.</strong></a>
|
|
|
|
<li>column-rule-style, <a href="#column-rule-style"
|
|
title=column-rule-style><strong>4.3.</strong></a>
|
|
|
|
<li>column-rule-width, <a href="#column-rule-width"
|
|
title=column-rule-width><strong>4.4.</strong></a>
|
|
|
|
<li>columns, <a href="#columns0" title=columns><strong>3.3.</strong></a>
|
|
|
|
<li>column-span, <a href="#column-span0"
|
|
title=column-span><strong>6.1.</strong></a>
|
|
|
|
<li>column-width, <a href="#column-width"
|
|
title=column-width><strong>3.1.</strong></a>
|
|
|
|
<li>multi-column element, <a href="#multi-column-element"
|
|
title="multi-column element"><strong>2.</strong></a>
|
|
|
|
<li>overflow columns, <a href="#overflow-columns" title="overflow
|
|
columns"><strong>8.2.</strong></a>
|
|
|
|
<li>spanning element, <a href="#spanning-element" title="spanning
|
|
element"><strong>6.1.</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#break-after">break-after</a>
|
|
|
|
<td>auto | always | avoid | left | right | page | column | avoid-page |
|
|
avoid-column
|
|
|
|
<td>auto
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>paged
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#break-before">break-before</a>
|
|
|
|
<td>auto | always | avoid | left | right | page | column | avoid-page |
|
|
avoid-column
|
|
|
|
<td>auto
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>paged
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#break-inside">break-inside</a>
|
|
|
|
<td>auto | avoid | avoid-page | avoid-column
|
|
|
|
<td>auto
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>paged
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-count">column-count</a>
|
|
|
|
<td><integer> | auto
|
|
|
|
<td>auto
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-fill">column-fill</a>
|
|
|
|
<td>auto | balance
|
|
|
|
<td>balance
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>see below
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-gap0">column-gap</a>
|
|
|
|
<td><length> | normal
|
|
|
|
<td>normal
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-rule0">column-rule</a>
|
|
|
|
<td><‘column-rule-width’> ||
|
|
<‘column-rule-style’> || [
|
|
<‘column-rule-color’> | transparent ]
|
|
|
|
<td>see individual properties
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-rule-color">column-rule-color</a>
|
|
|
|
<td><color>
|
|
|
|
<td>same as for ‘color’ property [CSS21]
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-rule-style">column-rule-style</a>
|
|
|
|
<td><border-style>
|
|
|
|
<td>none
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-rule-width">column-rule-width</a>
|
|
|
|
<td><border-width>
|
|
|
|
<td>medium
|
|
|
|
<td>multicol elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#columns0">columns</a>
|
|
|
|
<td><‘column-width’> || <‘column-count’>
|
|
|
|
<td>see individual properties
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-span0">column-span</a>
|
|
|
|
<td>none | all
|
|
|
|
<td>none
|
|
|
|
<td>block-level elements, except floating and absolutely positioned
|
|
elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#column-width">column-width</a>
|
|
|
|
<td><length> | auto
|
|
|
|
<td>auto
|
|
|
|
<td>non-replaced block-level elements (except table elements), table
|
|
cells, and inline-block elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|