drafts: css3-multicol/Overview.html@34298d3d5627

[css3-multicol] Add "Animatable:" lines to propdef tables.

This is as resolved in Tucson face-to-face at
2013-02-04 11:40:47 -0700, and edited by me per discussion starting at
2013-02-05 11:11:38 -0700.

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

     2 "http://www.w3.org/TR/html4/strict.dtd">

     4 <html lang=en>

     5  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">

     6   <title>CSS Multi-column Layout Module</title>

     8   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>

     9   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    10    rel=dcterms.rights>

    11   <meta content="CSS Multi-column Layout Module" name=dcterms.title>

    12   <meta content=text name=dcterms.type>

    13   <meta content=2013-02-07 name=dcterms.issued>

    14   <meta content="Håkon Wium Lie" name=dcterms.creator>

    15   <meta content=W3C name=dcterms.publisher>

    16   <meta content="http://www.w3.org/TR/2013/ED-css3-multicol-20130207/"

    17    name=dcterms.identifier>

    18   <link href="../default.css" rel=stylesheet type="text/css">

    19   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    20    type="text/css">

    21   <style type="text/css">

    22 .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 }

    23 .cols p { padding: 3px; margin: 0 }

    24 .col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }

    25 .gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0;  }

    26 .rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px;  color: white; z-index: 4 }

    28 table.breaks { border-collapse: collapse; margin: 1em 0 }

    29 table.breaks td, table.breaks th { border: thin solid black; padding: 0.1em 0.2em }

    31 div.example:before { width: 9em }

    32 </style>

    34  <body>

    35   <div class=head> <!--begin-logo-->

    36    <p><a href="http://www.w3.org/"><img alt=W3C height=48

    37     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    39    <h1>CSS Multi-column Layout Module</h1>

    41    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 7 February 2013</h2>

    43    <dl>

    44     <dt>This version:

    46     <dd>

    47      <!--<a href="http://www.w3.org/TR/2013/CR-css3-multicol-20130207">http://www.w3.org/TR/2013/ED-css3-multicol-20130207/</a>-->

    48      <a

    49      href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>

    51     <dt>Latest version:

    53     <dd><a href="http://www.w3.org/TR/css3-multicol">

    54      http://www.w3.org/TR/css3-multicol</a>

    56     <dt>Previous version:

    58     <dd><a

    59      href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217/">http://www.w3.org/TR/2009/CR-css3-multicol-20091217/</a>

    61     <dt>Editors:

    63     <dd>Håkon Wium Lie, Opera Software, howcome@opera.com

    64    </dl>

    65    <!--begin-copyright-->

    66    <p class=copyright><a

    67     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    68     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

    69     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

    70     href="http://www.csail.mit.edu/"><abbr

    71     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

    72     href="http://www.ercim.eu/"><abbr

    73     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

    74     <a href="http://www.keio.ac.jp/">Keio</a>, <a

    75     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

    76     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

    77     <a

    78     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

    79     and <a

    80     href="http://www.w3.org/Consortium/Legal/copyright-documents">document

    81     use</a> rules apply.</p>

    82    <!--end-copyright-->

    83    <hr title="Separator for header">

    84   </div>

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

    88   <p>This specification describes multi-column layouts in CSS, a style sheet

    89    language for the web. Using functionality described in the specification,

    90    content can be flowed into multiple columns with a gap and a rule between

    91    them.

    93   <h2 class="no-num no-toc" id=status-of-this-document>Status of this

    94    document</h2>

    95   <!--begin-status-->

    97   <p>This is a public copy of the editors' draft. It is provided for

    98    discussion only and may change at any moment. Its publication here does

    99    not imply endorsement of its contents by W3C. Don't cite this document

   100    other than as work in progress.

   102   <p>The (<a

   103    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public

   104    mailing list <a

   105    href="mailto:www-style@w3.org?Subject=%5Bcss3-multicol%5D%20PUT%20SUBJECT%20HERE">

   106    www-style@w3.org</a> (see <a

   107    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for

   108    discussion of this specification. When sending e-mail, please put the text

   109    “css3-multicol” in the subject, preferably like this:

   110    “[<!---->css3-multicol<!---->] <em>…summary of comment…</em>”

   112   <p>This document was produced by the <a href="/Style/CSS/members">CSS

   113    Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

   115   <p>This document was produced by a group operating under the <a

   116    href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent

   117    Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"

   118    rel=disclosure>public list of any patent disclosures</a> made in

   119    connection with the deliverables of the group; that page also includes

   120    instructions for disclosing a patent. An individual who has actual

   121    knowledge of a patent which the individual believes contains <a

   122    href="/Consortium/Patent-Policy-20040205/#def-essential">Essential

   123    Claim(s)</a> must disclose the information in accordance with <a

   124    href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the

   125    W3C Patent Policy</a>.</p>

   126   <!--end-status-->

   128   <p>This document has been a Working Draft in the CSS Working Group for

   129    several years. Multi-column layouts are traditionally used in print. On

   130    screen, multi-column layouts have been considered experimental, and

   131    implementation and use experience was deemed necessary in order to

   132    proceed. Several implementations have occurred over the past years, and

   133    this specification incorporates useful feedback from implementors as well

   134    as authors and users.

   136   <p>The specification was updated in April 2011 to correct a contradiction

   137    between the text and the pseudo-algorithm in section 3.4. The

   138    pseudo-algorithm was corrected and also made easier to read. The wording

   139    of a few other sections was improved in places, without changes to the

   140    functionality. In January, 2012, some examples and the description of the

   141    ‘<a href="#column-fill"><code class=property>column-fill</code></a>’

   142    property was revised.

   144   <p>This document will remain Candidate Recommendation at least until 12 May

   145    2011. See the <a href="#cr-exit-criteria">CR exit criteria.</a>

   147   <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of

   148    contents</a></h2>

   149   <!--begin-toc-->

   151   <ul class=toc>

   152    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>

   154    <li><a href="#the-multi-column-model"><span class=secno>2. </span>The

   155     multi-column model</a>

   157    <li><a href="#the-number-and-width-of-columns"><span class=secno>3.

   158     </span>The number and width of columns</a>

   159     <ul class=toc>

   160      <li><a href="#cw"><span class=secno>3.1. </span>‘<code

   161       class=property>column-width</code>’</a>

   163      <li><a href="#cc"><span class=secno>3.2. </span>‘<code

   164       class=property>column-count</code>’</a>

   166      <li><a href="#columns"><span class=secno>3.3. </span>‘<code

   167       class=property>columns</code>’</a>

   169      <li><a href="#pseudo-algorithm"><span class=secno>3.4.

   170       </span>Pseudo-algorithm</a>

   172      <li><a href="#stacking-context"><span class=secno>3.5. </span>Stacking

   173       context</a>

   174     </ul>

   176    <li><a href="#column-gaps-and-rules"><span class=secno>4. </span>Column

   177     gaps and rules</a>

   178     <ul class=toc>

   179      <li><a href="#column-gap"><span class=secno>4.1. </span>‘<code

   180       class=property>column-gap</code>’</a>

   182      <li><a href="#crc"><span class=secno>4.2. </span>‘<code

   183       class=property>column-rule-color</code>’</a>

   185      <li><a href="#crs"><span class=secno>4.3. </span>‘<code

   186       class=property>column-rule-style</code>’</a>

   188      <li><a href="#crw"><span class=secno>4.4. </span>‘<code

   189       class=property>column-rule-width</code>’</a>

   191      <li><a href="#column-rule"><span class=secno>4.5. </span>‘<code

   192       class=property>column-rule</code>’</a>

   193     </ul>

   195    <li><a href="#column-breaks"><span class=secno>5. </span>Column breaks</a>

   197     <ul class=toc>

   198      <li><a href="#break-before-break-after-break-inside"><span

   199       class=secno>5.1. </span>‘<code class=property>break-before</code>’,

   200       ‘<code class=property>break-after</code>’, ‘<code

   201       class=property>break-inside</code>’</a>

   202     </ul>

   204    <li><a href="#spanning-columns"><span class=secno>6. </span>Spanning

   205     columns</a>

   206     <ul class=toc>

   207      <li><a href="#column-span"><span class=secno>6.1. </span>‘<code

   208       class=property>column-span</code>’</a>

   209     </ul>

   211    <li><a href="#filling-columns"><span class=secno>7. </span>Filling

   212     columns</a>

   213     <ul class=toc>

   214      <li><a href="#cf"><span class=secno>7.1. </span>‘<code

   215       class=property>column-fill</code>’</a>

   216     </ul>

   218    <li><a href="#overflow"><span class=secno>8. </span>Overflow</a>

   219     <ul class=toc>

   220      <li><a href="#overflow-inside-multicol-elements"><span class=secno>8.1.

   221       </span>Overflow inside multicol elements</a>

   223      <li><a href="#pagination-and-overflow-outside-multicol"><span

   224       class=secno>8.2. </span>Pagination and overflow outside multicol

   225       elements</a>

   226     </ul>

   228    <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>

   229     <ul class=toc>

   230      <li><a href="#cr-exit-criteria"><span class=secno>9.1. </span>CR exit

   231       criteria</a>

   232     </ul>

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

   236    <li class=no-num><a href="#references">References</a>

   237     <ul class=toc>

   238      <li class=no-num><a href="#normative-references">Normative

   239       references</a>

   241      <li class=no-num><a href="#other-references">Other references</a>

   242     </ul>

   244    <li class=no-num><a href="#index">Index</a>

   246    <li class=no-num><a href="#property-index">Property index</a>

   247   </ul>

   248   <!--end-toc-->

   250   <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

   252   <p>(This section is not normative.)

   254   <p>This module describes multi-column layout in CSS. By using functionality

   255    described in this document, style sheets can declare that the content of

   256    an element is to be laid out in multiple columns.

   258   <p>On the Web, tables have also been used to describe multi-column layouts.

   259    The main benefit of using CSS-based columns is flexibility; content can

   260    flow from one column to another, and the number of columns can vary

   261    depending on the size of the viewport. Removing presentation table markup

   262    from documents allows them to more easily be presented on various output

   263    devices including speech synthesizers and small mobile devices.

   265   <p>Multi-column layouts are easy to describe in CSS. Here is a simple

   266    example:

   268   <div class=example>

   269    <pre>body { column-width: 12em }</pre>

   271    <p>In this example, the <code class=html>body</code> element is set to

   272     have columns at least ‘<code class=css>12em</code>’ wide. The exact

   273     number of columns will depend on the available space.

   274   </div>

   276   <p>The number of columns can also be set explicitly in the style sheet:

   278   <div class=example>

   279    <pre>body { column-count: 2 }</pre>

   281    <p>In this case, the number of columns is fixed and the column widths will

   282     vary depending on the available width.

   283   </div>

   285   <p>The shorthand ‘<a href="#columns0"><code

   286    class=property>columns</code></a>’ property can be used to set either,

   287    or both, properties in one declaration.

   289   <div class=example>

   290    <p>In these examples, the number of columns, the width of columns, and

   291     both the number and width are set, respectively:

   293    <pre>

   294 body { columns: 2 }

   295 body { columns: 12em }

   296 body { columns: 2 12em }

   297 </pre>

   299    <p>However, as described below, setting both the width and number of

   300     columns rarely makes sense.

   301   </div>

   303   <p>Another group of properties introduced in this module describe gaps and

   304    rules between columns.

   306   <div class=example>

   307    <pre>

   308 body {

   309   column-gap: 1em;

   310   column-rule: thin solid black;

   311 }

   312 </pre>

   314    <p>The first declaration in the example above sets the gap between two

   315     adjacent columns to be 1em. Column gaps are similar to padding areas. In

   316     the middle of the gap there will be a rule which is described by the

   317     ‘<a href="#column-rule0"><code class=property>column-rule</code></a>’

   318     property.

   319   </div>

   321   <p>The values of the ‘<a href="#column-rule0"><code

   322    class=property>column-rule</code></a>’ property are similar to those of

   323    the CSS border properties. Like ‘<code class=property>border</code>’,

   324    ‘<a href="#column-rule0"><code class=property>column-rule</code></a>’

   325    is a shorthand property.

   327   <div class=example>

   328    <p>In this example, the shorthand ‘<a href="#column-rule0"><code

   329     class=property>column-rule</code></a>’ declaration from the above

   330     example has been expanded:

   332    <pre>

   333 body {

   334   column-gap: 1em;

   335   column-rule-width: thin;

   336   column-rule-style: solid;

   337   column-rule-color: black;

   338 }

   339 </pre>

   340   </div>

   342   <p>The ‘<a href="#column-fill"><code

   343    class=property>column-fill</code></a>’ and ‘<a

   344    href="#column-span0"><code class=property>column-span</code></a>’

   345    properties give style sheets a wider range of visual expressions in

   346    multi-column layouts.

   348   <div class=example>

   349    <p>In this example, columns are set to be balanced, i.e., to have

   350     approximately the same length. Also, <code>h2</code> elements are set to

   351     span across all columns.

   353    <pre>

   354 div { column-fill: balance }

   355 h2 { column-span: all }

   356 </pre>

   357   </div>

   359   <p>This specification introduces ten new properties, all of which are used

   360    in the examples above.

   362   <p>To indicate where column breaks should (or should not) appear, new

   363    keyword values are introduced.

   365   <div class=example>

   366    <p>In this example, <code>h1</code> elements will always have a column

   367     break before them, but the formatter will try to avoid column breaks

   368     inside and after the element.

   370    <pre>

   371 h1 {

   372   break-before: column;

   373   break-inside: avoid-column;

   374   break-after: avoid-column;

   375 }

   376 </pre>

   377    <!--<p>The properties and values used in this example are formally defined in [!CSS3PAGE]].--></div>

   379   <p>If all column properties have their initial value, the layout of an

   380    element will be identical to a multi-column layout with only one column.

   382   <h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column

   383    model</h2>

   385   <p>A <dfn id=multi-column-element>multi-column element</dfn> (or

   386    <em>multicol element</em> for short) is an element whose ‘<a

   387    href="#column-width"><code class=property>column-width</code></a>’ or

   388    ‘<a href="#column-count"><code class=property>column-count</code></a>’

   389    property is not ‘<code class=css>auto</code>’ and therefore acts as a

   390    container for multi-column layout.

   392   <p>In the traditional CSS box model, the content of an element is flowed

   393    into the content box of the corresponding element. Multi-column layout

   394    introduces a new type of container between the content box and the

   395    content, namely the <dfn id=column-box>column box</dfn> (or

   396    <em>column</em> for short). The content of a multicol element is flowed

   397    into its column boxes.

   399   <p>Column boxes in a multi-column element are arranged into <em>rows</em>.

   400    Like table cells, the column boxes in a row are ordered in the inline

   401    direction of the multicol element. The <em>column width</em> is the length

   402    of the column box in the inline direction. The <em>column height</em> is

   403    the length of the column box in the block direction. All column boxes in a

   404    row have the same column width, and all column boxes in a row have the

   405    same column height. Within each row in the multi-column element, adjacent

   406    column boxes are separated by a <em>column gap</em>, which may contain a

   407    <em>column rule</em>. All column gaps in the same row are equal. All

   408    column rules in the same row are also equal, if they appear; column rules

   409    only appear between columns that both have content.

   411   <p>In the simplest case a multicol element will contain only one row of

   412    columns, and the height of each column will be equivalent to the used

   413    height of the multi-column element's content box. If the multi-column

   414    element is paginated, the height of each row is constrained by the page

   415    and the content continues in a new row of column boxes on the next page; a

   416    column box never splits across pages. The same effect occurs when a <a

   417    href="#spanning-element"><em>spanning element</em></a> divides the

   418    multi-column element: the columns before the spanning element are balanced

   419    and shortened to fit their content. Content after the spanning element

   420    then flows into a new row of column boxes.

   422   <p>It is not possible to set properties/values on column boxes. For

   423    example, the background of a certain column box cannot be set and a column

   424    box has no concept of padding, margin or borders.

   426   <p class=note>Future specifications may add additional functionality. For

   427    example, columns of different widths and different backgrounds may be

   428    supported.

   430   <div class=example>

   431    <p>Column gaps (yellow) and column rules (green) are shown in this sample

   432     rendition of a multi-column element with padding (blue). The blue and

   433     yellow is present for illustrational purposes only. In actual

   434     implementations these areas will be determined by the background.

   436    <div class=cols>

   437     <div class=col style="">

   438      <p> Ab cde fgh i jkl. Mno<br>

   439       pqr stu vw xyz. A bc<br>

   440       def g hij klm nopqrs<br>

   441       tuv wxy z. Abc de fg<br>

   442       hi jklmno. Pqrstu vw<br>

   443       x yz. Abc def ghi jkl.<br>

   444       M nop qrst uv wx yz.<br>

   445       Ab cde fgh i jkl. Mno<br>

   446       pqr stu vw xyz. A bc<br>

   447       def g hij klm nopqrs

   448     </div>

   450     <div class=col style="left: 175px">

   451      <p> tuv wxy z. Abc de fg<br>

   452       hi jklmno. Pqrstu vw<br>

   453       x yz. Abc def ghi jkl.<br>

   454       M nop qrst uv wx yz.<br>

   455       Ab cde fgh i jkl. Mno<br>

   456       pqr stu vw xyz. A bc<br>

   457       def g hij klm nopqrs<br>

   458       tuv wxy z. Abc de fg<br>

   459       hi jklmno. Pqrstu vw<br>

   460       x yz. Abc def ghi jkl.<br>

   461     </div>

   463     <div class=col style="left: 350px">

   464      <p> M nop qrst uv wx yz.<br>

   465       Ab cde fgh i jkl. Mno<br>

   466       pqr stu vw xyz. A bc<br>

   467       def g hij klm nopqrs<br>

   468       tuv wxy z. Abc de fg<br>

   469       hi jklmno. Pqrstu vw<br>

   470       x yz. Abc def ghi jkl.<br>

   471       M nop qrst uv wx yz.<br>

   472       Ab cde fgh i jkl. Mno<br>

   473       Pqr stu vw xyz.

   474     </div>

   476     <div class=gap style="left: 150px"></div>

   478     <div class=gap style="left: 325px"></div>

   479    </div>

   481    <p>To illustrate the effects of the various properties described in this

   482     specification, variations on a sample document will be used. Here is the

   483     source code of the sample document:

   485    <pre class=html>

   486 &lt;html>

   487 &lt;style type="text/css">

   488 div {

   489   column-width: 15em;

   490   column-gap: 2em;   /* shown in yellow */

   491   column-rule: 4px solid green;

   492   padding: 5px;      /* shown in blue */

   493 }

   494 p { margin: 0; padding: 0 }

   495 img { display: none }

   496 &lt;/style>

   497 &lt;body>

   498 &lt;div>

   499 &lt;p&gt;Ab cde fgh i jkl. Mno

   500 pqr stu vw xyz. A bc

   501 &lt;img src=...>

   502 def g hij

   503 ...

   504 &lt;/div>

   505 &lt;/body>

   506 &lt;/html>

   507 </pre>

   509    <p>The nonsensical text in the example is the English alphabet which shows

   510     how text flows from one column to another. To simplify the visualization,

   511     the textual content of the different examples vary slightly.

   512   </div>

   514   <p>Column boxes are block container boxes. That is, column boxes behave

   515    like block-level, table cell, and inline-block boxes as per CSS 2.1,

   516    section 10.1, item 2 <a href="#CSS21"

   517    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. However, column boxes do not

   518    establish block container boxes for elements with ‘<code

   519    class=css>position: fixed</code>’ or ‘<code class=css>position:

   520    absolute</code>’.

   522   <div class=example>

   523    <p>In this example, the width of the image is set with these rules:

   525    <pre class=css>

   526 img { display: block; width: 100% }

   527 </pre>

   529    <p>Given that the width is calculated relative to the column box, the

   530     image will be as wide as the column box:

   532    <div class=cols>

   533     <p>Ab cde fgh i jkl. Mno<br>

   534      pqr stu vw xyz. A bc<br>

   535      <br>

   536      <br>

   537      <br>

   538      <br>

   539      <br>

   540      <br>

   541      def g hij klm nopqrs<br>

   542      tuv wxy z. Abc de fg<br>

   544     <div class=col style="left: 175px">

   545      <p>hi jklmno. Pqrstu vw<br>

   546       x yz. Abc def ghi jkl.<br>

   547       M nop qrst uv wx yz.<br>

   548       Ab cde fgh i jkl. Mno<br>

   549       pqr stu vw xyz. A bc<br>

   550       def g hij klm nopqrs<br>

   551       tuv wxy z. Abc de fg<br>

   552       hi jklmno. Pqrstu vw<br>

   553       x yz. Abc def ghi jkl.<br>

   554       M nop qrst uv wx yz.<br>

   555     </div>

   557     <div class=col style="left: 350px">

   558      <p> Ab cde fgh i jkl. Mno<br>

   559       pqr stu vw xyz. A bc<br>

   560       def g hij klm nopqrs<br>

   561       tuv wxy z. Abc de fg<br>

   562       hi jklmno. Pqrstu vw<br>

   563       x yz. Abc def ghi jkl.<br>

   564       M nop qrst uv wx yz.<br>

   565       Ab cde fgh i jkl. Mno<br>

   566       pqr stu vw xyz.

   567     </div>

   569     <div class=rep style="width: 150px"></div>

   571     <div class=gap style="left: 150px"></div>

   573     <div class=gap style="left: 325px"></div>

   574    </div>

   575   </div>

   577   <p>Floats that appear inside multi-column layouts are positioned with

   578    regard to the column box where the float appears.

   580   <div class=example>

   581    <p>In this example, this CSS fragment describes the presentation of the

   582     image:

   584    <pre class=css>

   585 img { display: block; float: right }

   586 </pre>

   588    <div class=cols>

   589     <div class=col style="">

   590      <p> Ab cde fgh i jkl. Mno<br>

   591       pqr stu vw xyz. A bc<br>

   592       def g<br>

   593       hij klm<br>

   594       nopq<br>

   595       rs tuv<br>

   596       wxy x<br>

   597       yz. Ab <br>

   598       cde fgh i jkl. Mno<br>

   599       pqr stu vw xyz. A bc

   600     </div>

   602     <div class=col style="left: 175px">

   603      <p> def g hij klm nopqrs<br>

   604       tuv wxy z. Abc de fg<br>

   605       hi jklmno. Pqrstu vw<br>

   606       x yz. Abc def ghi jkl.<br>

   607       M nop qrst uv wx yz.<br>

   608       Ab cde fgh i jkl. Mno<br>

   609       pqr stu vw xyz. A bc<br>

   610       def g hij klm nopqrs<br>

   611       tuv wxy z. Abc de fg<br>

   612       hi jklmno. Pqrstu vw<br>

   613     </div>

   615     <div class=col style="left: 350px">

   616      <p> x yz. Abc def ghi jkl.<br>

   617       M nop qrst uv wx yz.<br>

   618       Ab cde fgh i jkl. Mno<br>

   619       pqr stu vw xyz. A bc<br>

   620       def g hij klm nopqrs<br>

   621       tuv wxy z. Abc de fg<br>

   622       hi jklmno. Pqrstu vw<br>

   623       x yz. Abc def ghi jkl.<br>

   624       M nop qrst uv wx yz.<br>

   625     </div>

   627     <div class=rep style="left: 50px"></div>

   629     <div class=gap style="left: 150px"></div>

   631     <div class=gap style="left: 325px"></div>

   632    </div>

   634    <p>The black box represents the image.

   635   </div>

   637   <p>A multi-column element establishes a new block formatting context, as

   638    per CSS 2.1 section 9.4.1.

   640   <div class=example>

   641    <p>A top margin set on the first child element of a multicol element will

   642     not collapse with the margins of the multicol element.

   643   </div>

   645   <p>Nested multi-column elements are allowed, but there may be

   646    implementation-specific limits.

   648   <h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The

   649    number and width of columns</h2>

   651   <p>Finding the number and width of columns is fundamental when laying out

   652    multi-column content. When the block direction is unconstrained and no

   653    column breaks are added through style sheets, these two properties

   654    determine the outcome:

   656   <ul>

   657    <li>‘<a href="#column-count"><code

   658     class=property>column-count</code></a>’

   660    <li>‘<a href="#column-width"><code

   661     class=property>column-width</code></a>’

   662   </ul>

   664   <p>A third property, ‘<a href="#columns0"><code

   665    class=property>columns</code></a>’, is a shorthand property which sets

   666    both ‘<a href="#column-width"><code

   667    class=property>column-width</code></a>’ and ‘<a

   668    href="#column-count"><code class=property>column-count</code></a>’.

   670   <h3 id=cw><span class=secno>3.1. </span>‘<a href="#column-width"><code

   671    class=property>column-width</code></a>’</h3>

   673   <table class=propdef>

   674    <tbody>

   675     <tr>

   676      <td><em>Name:</em>

   678      <td><dfn id=column-width>column-width</dfn>

   680     <tr>

   681      <td><em>Value:</em>

   683      <td>&lt;length&gt; | auto

   685     <tr>

   686      <td><em>Initial:</em>

   688      <td>auto

   690     <tr>

   691      <td><em>Applies to:</em>

   693      <td>non-replaced block-level elements (except table elements), table

   694       cells, and inline-block elements

   696     <tr>

   697      <td><em>Inherited:</em>

   699      <td>no

   701     <tr>

   702      <td><em>Percentages:</em>

   704      <td>N/A

   706     <tr>

   707      <td><em>Media:</em>

   709      <td>visual

   711     <tr>

   712      <td><em>Computed value:</em>

   714      <td>the absolute length, zero or larger

   716     <tr>

   717      <td><em>Animatable:</em>

   719      <td>as <a

   720       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>

   721   </table>

   723   <p>This property describes the width of columns in multicol elements.

   725   <dl>

   726    <dt>auto

   728    <dd>means that the column width will be determined by other properties

   729     (e.g., ‘<a href="#column-count"><code

   730     class=property>column-count</code></a>’, if it has a non-auto value).

   732    <dt>&lt;length>

   734    <dd>describes the optimal column width. The actual column width may be

   735     wider (to fill the available space), or narrower (only if the available

   736     space is smaller than the specified column width). Specified values must

   737     be greater than 0.

   738   </dl>

   740   <div class=example>

   741    <p>For example, consider this style sheet:

   743    <pre>

   744 div {

   745   width: 100px;

   746   column-width: 45px;

   747   column-gap: 0;

   748   column-rule: none;

   749 }

   750 </pre>

   752    <p>There is room for two 45px wide columns inside the 100px wide element.

   753     In order to fill the available space the actual column width will be

   754     increased to 50px.

   755   </div>

   757   <div class=example>

   758    <p>Also, consider this style sheet:

   760    <pre>

   761 div {

   762   width: 40px;

   763   column-width: 45px;

   764   column-gap: 0;

   765   column-rule: none;

   766 }

   767 </pre>

   769    <p>The available space is smaller than the specified column width and the

   770     actual column width will therefore be decreased.

   771   </div>

   773   <p>To ensure that ‘<a href="#column-width"><code

   774    class=property>column-width</code></a>’ can be used with vertical text,

   775    column width means the length of the line boxes inside the columns.

   777   <p class=note>The reason for making ‘<a href="#column-width"><code

   778    class=property>column-width</code></a>’ somewhat flexible is to achieve

   779    scalable designs that can fit many screen sizes. To set an exact column

   780    width, all length values (in horizontal text these are: ‘<code

   781    class=property>width</code>’, ‘<a href="#column-width"><code

   782    class=property>column-width</code></a>’, ‘<a href="#column-gap0"><code

   783    class=property>column-gap</code></a>’, and ‘<a

   784    href="#column-rule-width"><code

   785    class=property>column-rule-width</code></a>’) must be specified.

   787   <h3 id=cc><span class=secno>3.2. </span>‘<a href="#column-count"><code

   788    class=property>column-count</code></a>’</h3>

   790   <table class=propdef>

   791    <tbody>

   792     <tr>

   793      <td><em>Name:</em>

   795      <td><dfn id=column-count>column-count</dfn>

   797     <tr>

   798      <td><em>Value:</em>

   800      <td>&lt;integer&gt; | auto

   802     <tr>

   803      <td><em>Initial:</em>

   805      <td>auto

   807     <tr>

   808      <td><em>Applies to:</em>

   810      <td>non-replaced block-level elements (except table elements), table

   811       cells, and inline-block elements

   813     <tr>

   814      <td><em>Inherited:</em>

   816      <td>no

   818     <tr>

   819      <td><em>Percentages:</em>

   821      <td>N/A

   823     <tr>

   824      <td><em>Media:</em>

   826      <td>visual

   828     <tr>

   829      <td><em>Computed value:</em>

   831      <td>specified value

   833     <tr>

   834      <td><em>Animatable:</em>

   836      <td>as <a

   837       href="http://dev.w3.org/csswg/css3-transitions/#animtype-integer">integer</a>

   838   </table>

   840   <p>This property describes the number of columns of a multicol element.

   842   <dl>

   843    <dt>auto

   845    <dd>means that the number of columns will be determined by other

   846     properties (e.g., ‘<a href="#column-width"><code

   847     class=property>column-width</code></a>’, if it has a non-auto value).

   849    <dt>&lt;integer>

   851    <dd>describes the optimal number of columns into which the content of the

   852     element will be flowed. Values must be greater than 0. If both ‘<a

   853     href="#column-width"><code class=property>column-width</code></a>’ and

   854     ‘<a href="#column-count"><code

   855     class=property>column-count</code></a>’ have non-auto values, the

   856     integer value describes the maximum number of columns.

   857   </dl>

   859   <div class=example>

   860    <p>Example:

   862    <pre>body { column-count: 3 }</pre>

   863   </div>

   865   <h3 id=columns><span class=secno>3.3. </span>‘<a href="#columns0"><code

   866    class=property>columns</code></a>’</h3>

   868   <table class=propdef>

   869    <tbody>

   870     <tr>

   871      <td><em>Name:</em>

   873      <td><dfn id=columns0>columns</dfn>

   875     <tr>

   876      <td><em>Value:</em>

   878      <td><a href="#cw">&lt;‘<code

   879       class=property>column-width</code>’></a> || <a

   880       href="#cc">&lt;‘<code class=property>column-count</code>’></a>

   882     <tr>

   883      <td><em>Initial:</em>

   885      <td>see individual properties

   887     <tr>

   888      <td><em>Applies to:</em>

   890      <td>non-replaced block-level elements (except table elements), table

   891       cells, and inline-block elements

   893     <tr>

   894      <td><em>Inherited:</em>

   896      <td>no

   898     <tr>

   899      <td><em>Percentages:</em>

   901      <td>N/A

   903     <tr>

   904      <td><em>Media:</em>

   906      <td>visual

   908     <tr>

   909      <td><em>Computed value:</em>

   911      <td>see individual properties

   913     <tr>

   914      <td><em>Animatable:</em>

   916      <td>see individual properties

   917   </table>

   919   <p>This is a shorthand property for setting ‘<a

   920    href="#column-width"><code class=property>column-width</code></a>’ and

   921    ‘<a href="#column-count"><code

   922    class=property>column-count</code></a>’. Omitted values are set to their

   923    initial values.

   925   <div class=example>

   926    <p>Here are some valid declarations using the ‘<a href="#columns0"><code

   927     class=property>columns</code></a>’ property:

   929    <pre>

   930 columns: 12em;      /* column-width: 12em; column-count: auto */

   931 columns: auto 12em; /* column-width: 12em; column-count: auto */

   932 columns: 2;         /* column-width: auto; column-count: 2 */

   933 columns: 2 auto;    /* column-width: auto; column-count: 2 */

   934 columns: auto;      /* column-width: auto; column-count: auto */

   935 columns: auto auto; /* column-width: auto; column-count: auto */

   936 </pre>

   937   </div>

   939   <h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>

   941   <p>The pseudo-algorithm below determines the used values for ‘<a

   942    href="#column-count"><code class=property>column-count</code></a>’ (N)

   943    and ‘<a href="#column-width"><code

   944    class=property>column-width</code></a>’ (W). There are two other

   945    variables in the pseudo-algorithm:

   947   <ul>

   948    <li><code>available-width</code>: if the used width of the multi-column

   949     element has not been determined when the ‘<a href="#column-count"><code

   950     class=property>column-count</code></a>’ and ‘<a

   951     href="#column-width"><code class=property>column-width</code></a>’ must

   952     be determined (e.g., if it is floating with a ‘<code

   953     class=property>width</code>’ of ‘<code class=property>auto</code>’

   954     as per CSS 2.1 section 10.3.5) this variable is <code>unknown</code>,

   955     otherwise it is the same as the used width of the multi-column element.

   956     In vertical text, the used height replaces used width in this

   957     calculation.

   959    <li><code>shrink-to-fit</code>: this variable represents the result of a

   960     <em>shrink-to-fit</em> computation. CSS does not define the exact

   961     algorithm.

   962   </ul>

   964   <p>Two assumptions are being made by the pseudo-algorithm:

   966   <ul>

   967    <li>that the block direction is unconstrained

   969    <li>that no column breaks are added through style sheets

   970   </ul>

   972   <p>The <code>floor()</code> function rounds a number to the next smaller

   973    integer. <!--

   974 <pre>

   975 (01)  if ((column-width = auto) and (column-count = auto)) or

   976 (02)     ((available-width = unknown) and (column-count = auto)) then

   977 (03)    exit; /* no columns */

   978 (04)  fi

   979 (05)

   980 (06)  if (available-width = unknown) and (column-count != auto) and (column-width != auto) then

   981 (07)    N := column-count;

   982 (08)    W := column-width;

   983 (09)    exit;

   984 (10)  fi

   985 (11)

   986 (12)  if (available-width = unknown) then

   987 (13)    available-width := shrink-to-fit;

   988 (14)  fi

   989 (15)

   990 (16)  if (column-width = auto) then

   991 (18)    N := column-count;

   992 (19)    W := max(0, (available-width - ((N - 1) * column-gap))/N);

   993 (27)  elsif (column-count = auto) then

   994 (28)    if (column-width >= available-width) then

   995 (29)      N := 1

   996 (30)      W := available-width;

   997 (31)    else

   998 (32)      N := floor((available-width + column-gap) / (column-width + column-gap));

   999 (33)      W := ((available-width + column-gap) / N) - column-gap;

  1000 (34)    fi

  1001 (35)  elsif (column-width >= available-width) then

  1002 (36)    N := 1

  1003 (37)    W := available-width;

  1004 (38)  else

  1005 (39)    N := min(column-count, floor((available-width + column-gap) / (column-width + column-gap)))

  1006 (40)    W := ((available-width + column-gap) / N) - column-gap;

  1007 (41)  fi

  1008 </pre>

  1010 <p><span class=issue>Alternative encoding of pseudo-algorithm:

  1011 -->

  1013   <pre>

  1014 (01)  if ((column-width = auto) and (column-count = auto)) then

  1015 (02)        exit; /* not a multicol element */

  1017 (03)  if ((available-width = unknown) and (column-count = auto)) then

  1018 (04)    exit; /* no columns */

  1020 (05)  if (available-width = unknown) and (column-count != auto) and (column-width != auto) then

  1021 (06)    N := column-count;

  1022 (07)    W := column-width;

  1023 (08)  exit;

  1025 (09)  if (available-width = unknown) then

  1026 (10)    available-width := shrink-to-fit;

  1028 (11)  if (column-width = auto) and (column-count != auto) then

  1029 (12)    N := column-count;

  1030 (13)    W := max(0, (available-width - ((N - 1) * column-gap)) / N);

  1031 (14)  exit;

  1033 (15)  if (column-width != auto) and (column-count = auto) then

  1034 (16)    N := max(1, floor((available-width + column-gap) / (column-width + column-gap)));

  1035 (17)    W := ((available-width + column-gap) / N) - column-gap;

  1036 (18)  exit;

  1038 (19)  if (column-width != auto) and (column-count != auto) then

  1039 (20)    N := min(column-count, floor((available-width + column-gap) / (column-width + column-gap)))

  1040 (21)    N := max(1, N);

  1041 (22)    W := ((available-width + column-gap) / N) - column-gap;

  1042 (23)  exit

  1043 </pre>

  1045   <p>In paged media, user agents may perform this calculation on a per-page

  1046    basis.

  1048   <p class=note>Note that, in most cases, only one of ‘<a

  1049    href="#column-width"><code class=property>column-width</code></a>’ and

  1050    ‘<a href="#column-count"><code class=property>column-count</code></a>’

  1051    affect the layout. If ‘<a href="#column-width"><code

  1052    class=property>column-width</code></a>’ has a value other than ‘<code

  1053    class=css>auto</code>’, ‘<a href="#column-count"><code

  1054    class=property>column-count</code></a>’ indicates the maximum number of

  1055    columns. However, both ‘<a href="#column-width"><code

  1056    class=property>column-width</code></a>’ and ‘<a

  1057    href="#column-count"><code class=property>column-count</code></a>’ are

  1058    honored when the width of the element has not been determined. This can,

  1059    e.g., be the case for table cells and floats.

  1061   <h3 id=stacking-context><span class=secno>3.5. </span>Stacking context</h3>

  1063   <p>All column boxes in a multi-column element are in the same stacking

  1064    context and the drawing order of their contents is as specified in CSS

  1065    2.1. Column boxes do not establish new stacking contexts.

  1067   <h2 id=column-gaps-and-rules><span class=secno>4. </span>Column gaps and

  1068    rules</h2>

  1070   <p>Column gaps and rules are placed between columns in the same multicol

  1071    element. The length of the column gaps and column rules is equal to the

  1072    length of the columns. Column gaps take up space. That is, column gaps

  1073    will push apart content in adjacent columns (within the same multicol

  1074    element).

  1076   <p>A column rule is drawn in the middle of the column gap with the

  1077    endpoints at opposing content edges of the multicol element. Column rules

  1078    do not take up space. That is, the presence or thickness of a column rule

  1079    will not alter the placement of anything else. If a column rule is wider

  1080    than its gap, the adjacent column boxes will overlap the rule, and the

  1081    rule may possibly extend outside the box of the multicol element. Column

  1082    rules are painted just above the background of the multicol element.

  1083    Column rules are only drawn between two columns that both have content.

  1085   <h3 id=column-gap><span class=secno>4.1. </span>‘<a

  1086    href="#column-gap0"><code class=property>column-gap</code></a>’</h3>

  1088   <table class=propdef>

  1089    <tbody>

  1090     <tr>

  1091      <td><em>Name:</em>

  1093      <td><dfn id=column-gap0>column-gap</dfn>

  1095     <tr>

  1096      <td><em>Value:</em>

  1098      <td>&lt;length&gt; | normal

  1100     <tr>

  1101      <td><em>Initial:</em>

  1103      <td>normal

  1105     <tr>

  1106      <td><em>Applies to:</em>

  1108      <td>multicol elements

  1110     <tr>

  1111      <td><em>Inherited:</em>

  1113      <td>no

  1115     <tr>

  1116      <td><em>Percentages:</em>

  1118      <td>N/A

  1120     <tr>

  1121      <td><em>Media:</em>

  1123      <td>visual

  1125     <tr>

  1126      <td><em>Computed value:</em>

  1128      <td>absolute length or ‘<code class=property>normal</code>’

  1130     <tr>

  1131      <td><em>Animatable:</em>

  1133      <td>as <a

  1134       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>

  1135   </table>

  1137   <p>The ‘<a href="#column-gap0"><code

  1138    class=property>column-gap</code></a>’ property sets the gap between

  1139    columns. If there is a column rule between columns, it will appear in the

  1140    middle of the gap.

  1142   <p>The ‘<code class=css>normal</code>’ value is UA-specific. A value of

  1143    ‘<code class=css>1em</code>’ is suggested.

  1145   <p>Column gaps cannot be negative.

  1147   <h3 id=crc><span class=secno>4.2. </span>‘<a

  1148    href="#column-rule-color"><code

  1149    class=property>column-rule-color</code></a>’</h3>

  1151   <table class=propdef>

  1152    <tbody>

  1153     <tr>

  1154      <td><em>Name:</em>

  1156      <td><dfn id=column-rule-color>column-rule-color</dfn>

  1158     <tr>

  1159      <td><em>Value:</em>

  1161      <td>&lt;color&gt;

  1163     <tr>

  1164      <td><em>Initial:</em>

  1166      <td><a

  1167       href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>

  1168       <!--      <td>same as for 'color' property [[!CSS21]]-->

  1170     <tr>

  1171      <td><em>Applies to:</em>

  1173      <td>multicol elements

  1175     <tr>

  1176      <td><em>Inherited:</em>

  1178      <td>no

  1180     <tr>

  1181      <td><em>Percentages:</em>

  1183      <td>N/A

  1185     <tr>

  1186      <td><em>Media:</em>

  1188      <td>visual

  1190     <tr>

  1191      <td><em>Computed value:</em>

  1193      <td>the same as the computed value for the ‘<code

  1194       class=property>color</code>’ property <a href="#CSS21"

  1195       rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  1197     <tr>

  1198      <td><em>Animatable:</em>

  1200      <td>as <a

  1201       href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>

  1202   </table>

  1204   <p>This property sets the color of the column rule. The &lt;color&gt;

  1205    values are defined in <a href="#CSS21"

  1206    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  1208   <h3 id=crs><span class=secno>4.3. </span>‘<a

  1209    href="#column-rule-style"><code

  1210    class=property>column-rule-style</code></a>’</h3>

  1212   <table class=propdef>

  1213    <tbody>

  1214     <tr>

  1215      <td><em>Name:</em>

  1217      <td><dfn id=column-rule-style>column-rule-style</dfn>

  1219     <tr>

  1220      <td><em>Value:</em>

  1222      <td><a

  1223       href="http://www.w3.org/TR/CSS2/tables.html#table-border-styles">&lt;border-style&gt;</a>

  1224       <!--http://www.w3.org/TR/CSS21/box.html#value-def-border-style-->

  1226     <tr>

  1227      <td><em>Initial:</em>

  1229      <td>none

  1231     <tr>

  1232      <td><em>Applies to:</em>

  1234      <td>multicol elements

  1236     <tr>

  1237      <td><em>Inherited:</em>

  1239      <td>no

  1241     <tr>

  1242      <td><em>Percentages:</em>

  1244      <td>N/A

  1246     <tr>

  1247      <td><em>Media:</em>

  1249      <td>visual

  1251     <tr>

  1252      <td><em>Computed value:</em>

  1254      <td>specified value

  1256     <tr>

  1257      <td><em>Animatable:</em>

  1259      <td>no

  1260   </table>

  1262   <p>The ‘<a href="#column-rule-style"><code

  1263    class=property>column-rule-style</code></a>’ property sets the style of

  1264    the rule between columns of an element. The &lt;border-style&gt; values

  1265    are defined in <a href="#CSS21"

  1266    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and the values are

  1267    interpreted as in the <a

  1268    href="http://www.w3.org/TR/CSS2/tables.html#collapsing-borders">the

  1269    collapsing border model</a>.

  1271   <p>The ‘<code class=property>none</code>’ value forces the computed

  1272    value of <a class=property href="#column-rule-width">‘<code

  1273    class=property>column-rule-width</code>’</a> to be ‘<code

  1274    class=css>0</code>’.

  1276   <h3 id=crw><span class=secno>4.4. </span>‘<a

  1277    href="#column-rule-width"><code

  1278    class=property>column-rule-width</code></a>’</h3>

  1280   <table class=propdef>

  1281    <tbody>

  1282     <tr>

  1283      <td><em>Name:</em>

  1285      <td><dfn id=column-rule-width>column-rule-width</dfn>

  1287     <tr>

  1288      <td><em>Value:</em>

  1290      <td><a

  1291       href="http://www.w3.org/TR/CSS21/box.html#value-def-border-width">&lt;border-width&gt;</a>

  1293     <tr>

  1294      <td><em>Initial:</em>

  1296      <td>medium

  1298     <tr>

  1299      <td><em>Applies to:</em>

  1301      <td>multicol elements

  1303     <tr>

  1304      <td><em>Inherited:</em>

  1306      <td>no

  1308     <tr>

  1309      <td><em>Percentages:</em>

  1311      <td>N/A

  1313     <tr>

  1314      <td><em>Media:</em>

  1316      <td>visual

  1318     <tr>

  1319      <td><em>Computed value:</em>

  1321      <td>absolute length; ‘<code class=css>0</code>’ if the column rule

  1322       style is ‘<code class=property>none</code>’ or ‘<code

  1323       class=property>hidden</code>’

  1325     <tr>

  1326      <td><em>Animatable:</em>

  1328      <td>as <a

  1329       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>

  1330   </table>

  1332   <p>This property sets the width of the rule between columns. Negative

  1333    values are not allowed.

  1335   <h3 id=column-rule><span class=secno>4.5. </span>‘<a

  1336    href="#column-rule0"><code class=property>column-rule</code></a>’</h3>

  1338   <table class=propdef>

  1339    <tbody>

  1340     <tr>

  1341      <td><em>Name:</em>

  1343      <td><dfn id=column-rule0>column-rule</dfn>

  1345     <tr>

  1346      <td><em>Value:</em>

  1348      <td><a href="#crw">&lt;‘<code

  1349       class=property>column-rule-width</code>’&gt;</a> || <a

  1350       href="#crs">&lt;‘<code

  1351       class=property>column-rule-style</code>’&gt;</a> || [ <a

  1352       href="#crc">&lt;‘<code

  1353       class=property>column-rule-color</code>’&gt;</a> | transparent ]

  1355     <tr>

  1356      <td><em>Initial:</em>

  1358      <td>see individual properties

  1360     <tr>

  1361      <td><em>Applies to:</em>

  1363      <td>multicol elements

  1365     <tr>

  1366      <td><em>Inherited:</em>

  1368      <td>no

  1370     <tr>

  1371      <td><em>Percentages:</em>

  1373      <td>N/A

  1375     <tr>

  1376      <td><em>Media:</em>

  1378      <td>visual

  1380     <tr>

  1381      <td><em>Computed value:</em>

  1383      <td>see individual properties

  1385     <tr>

  1386      <td><em>Animatable:</em>

  1388      <td>see individual properties

  1389   </table>

  1391   <p>This property is a shorthand for setting ‘<a

  1392    href="#column-rule-width"><code

  1393    class=property>column-rule-width</code></a>’, ‘<a

  1394    href="#column-rule-style"><code

  1395    class=property>column-rule-style</code></a>’, and ‘<a

  1396    href="#column-rule-color"><code

  1397    class=property>column-rule-color</code></a>’ at the same place in the

  1398    style sheet. Omitted values are set to their initial values.

  1400   <div class=example>

  1401    <p>In this example, the column rule and the column gap have the same

  1402     width. Therefore, they will occupy exactly the same space.

  1404    <pre>

  1405 body {

  1406   column-gap: 1em;

  1407   column-rule-width: 1em;

  1408   column-rule-style: solid;

  1409   column-rule-color: black;

  1410 }

  1411 </pre>

  1412   </div>

  1414   <div class=example>

  1415    <p>If a tall image is moved to a column on the next page to find room for

  1416     it, its natural column may be left empty. If so, the column is is still

  1417     considered to have content for the purpose of deciding if the column rule

  1418     should be drawn.

  1419   </div>

  1421   <h2 id=column-breaks><span class=secno>5. </span>Column breaks</h2>

  1423   <p>When content is laid out in multiple columns, the user agent must

  1424    determine where column breaks are placed. The problem of breaking content

  1425    into columns is similar to breaking content into pages, which is described

  1426    in CSS 2.1, section 13.3.3 <a href="#CSS21"

  1427    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  1429   <p>Three new properties are introduced to allow column breaks to be

  1430    described in the same properties as page breaks: ‘<a

  1431    href="#break-before"><code class=property>break-before</code></a>’,

  1432    ‘<a href="#break-after"><code class=property>break-after</code></a>’,

  1433    and ‘<a href="#break-inside"><code

  1434    class=property>break-inside</code></a>’. These properties take the same

  1435    values as ‘<code class=property>page-break-before</code>’, ‘<code

  1436    class=property>page-break-after</code>’, and ‘<code

  1437    class=property>page-break-inside</code>’ <a href="#CSS21"

  1438    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. In addition, some new

  1439    keyword values are added.

  1441   <h3 id=break-before-break-after-break-inside><span class=secno>5.1.

  1442    </span>‘<a href="#break-before"><code

  1443    class=property>break-before</code></a>’, ‘<a href="#break-after"><code

  1444    class=property>break-after</code></a>’, ‘<a href="#break-inside"><code

  1445    class=property>break-inside</code></a>’</h3>

  1447   <table class=propdef>

  1448    <tbody>

  1449     <tr>

  1450      <td><em>Name:</em>

  1452      <td><dfn id=break-before>break-before</dfn>

  1454     <tr>

  1455      <td><em>Value:</em>

  1457      <td>auto | always | avoid | left | right | page | column | avoid-page |

  1458       avoid-column

  1460     <tr>

  1461      <td><em>Initial:</em>

  1463      <td>auto

  1465     <tr>

  1466      <td><em>Applies to:</em>

  1468      <td>block-level elements

  1470     <tr>

  1471      <td><em>Inherited:</em>

  1473      <td>no

  1475     <tr>

  1476      <td><em>Percentages:</em>

  1478      <td>N/A

  1480     <tr>

  1481      <td><em>Media:</em>

  1483      <td>paged

  1485     <tr>

  1486      <td><em>Computed value:</em>

  1488      <td>specified value

  1490     <tr>

  1491      <td><em>Animatable:</em>

  1493      <td>no

  1494   </table>

  1496   <table class=propdef>

  1497    <tbody>

  1498     <tr>

  1499      <td><em>Name:</em>

  1501      <td><dfn id=break-after>break-after</dfn>

  1503     <tr>

  1504      <td><em>Value:</em>

  1506      <td>auto | always | avoid | left | right | page | column | avoid-page |

  1507       avoid-column

  1509     <tr>

  1510      <td><em>Initial:</em>

  1512      <td>auto

  1514     <tr>

  1515      <td><em>Applies to:</em>

  1517      <td>block-level elements

  1519     <tr>

  1520      <td><em>Inherited:</em>

  1522      <td>no

  1524     <tr>

  1525      <td><em>Percentages:</em>

  1527      <td>N/A

  1529     <tr>

  1530      <td><em>Media:</em>

  1532      <td>paged

  1534     <tr>

  1535      <td><em>Computed value:</em>

  1537      <td>specified value

  1539     <tr>

  1540      <td><em>Animatable:</em>

  1542      <td>no

  1543   </table>

  1545   <table class=propdef>

  1546    <tbody>

  1547     <tr>

  1548      <td><em>Name:</em>

  1550      <td><dfn id=break-inside>break-inside</dfn>

  1552     <tr>

  1553      <td><em>Value:</em>

  1555      <td>auto | avoid | avoid-page | avoid-column

  1557     <tr>

  1558      <td><em>Initial:</em>

  1560      <td>auto

  1562     <tr>

  1563      <td><em>Applies to:</em>

  1565      <td>block-level elements

  1567     <tr>

  1568      <td><em>Inherited:</em>

  1570      <td>no

  1572     <tr>

  1573      <td><em>Percentages:</em>

  1575      <td>N/A

  1577     <tr>

  1578      <td><em>Media:</em>

  1580      <td>paged

  1582     <tr>

  1583      <td><em>Computed value:</em>

  1585      <td>specified value

  1587     <tr>

  1588      <td><em>Animatable:</em>

  1590      <td>no

  1591   </table>

  1593   <p>These properties describe page/column break behavior before/after/inside

  1594    the generated box. These values are normatively defined in <a

  1595    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>:

  1597   <dl>

  1598    <dt>auto

  1600    <dd>Neither force nor forbid a page/column break before (after, inside)

  1601     the generated box.

  1603    <dt>always

  1605    <dd>Always force a page break before (after) the generated box.

  1607    <dt>avoid

  1609    <dd>Avoid a page/column break before (after, inside) the generated box.

  1611    <dt>left

  1613    <dd>Force one or two page breaks before (after) the generated box so that

  1614     the next page is formatted as a left page.

  1616    <dt>right

  1618    <dd>Force one or two page breaks before (after) the generated box so that

  1619     the next page is formatted as a right page.

  1620   </dl>

  1622   <p>This specification adds the following new values:

  1624   <dl>

  1625    <dt>page

  1627    <dd>Always force a page break before (after) the generated box.

  1629    <dt>column

  1631    <dd>Always force a column break before (after) the generated box.

  1633    <dt>avoid-page

  1635    <dd>Avoid a page break before (after, inside) the generated box.

  1637    <dt>avoid-column

  1639    <dd>Avoid a column break before (after, inside) the generated box.

  1640   </dl>

  1642   <p>When a page or column break splits a box, the box's margins, borders,

  1643    and padding have no visual effect where the split occurs. However, the

  1644    margin immediately after a forced page/column break will be preserved. A

  1645    forced page/column break is a break that does not occur naturally.

  1647   <p class=note>In the future, new properties may describe alternate ways to

  1648    handle margins, borders and padding around page/column breaks.

  1650   <div class=example>

  1651    <p>In this example, forced column breaks appear before <code>h2</code>

  1652     elements and after <code>img</code> elements:

  1654    <pre>

  1655 .multicol { column-width: 8em }

  1656 .multicol h2 { break-before: column; margin-top: 2em }

  1657 .multicol img { break-after: column }

  1658 </pre>

  1660    <p>The top margin of <code>h2</code> elements will be preserved since the

  1661     column break is forced.

  1662   </div>

  1664   <div class=example>

  1665    <p>In this example, the formatter will try avoid column breaks inside

  1666     <code>p</code> elements:

  1668    <pre>

  1669 p { break-inside: avoid-column }

  1670 </pre>

  1671   </div>

  1673   <h2 id=spanning-columns><span class=secno>6. </span>Spanning columns</h2>

  1675   <p>The ‘<a href="#column-span0"><code

  1676    class=property>column-span</code></a>’ property makes it possible for an

  1677    element to span across several columns.

  1679   <h3 id=column-span><span class=secno>6.1. </span>‘<a

  1680    href="#column-span0"><code class=property>column-span</code></a>’</h3>

  1682   <table class=propdef>

  1683    <tbody>

  1684     <tr>

  1685      <td><em>Name:</em>

  1687      <td><dfn id=column-span0>column-span</dfn>

  1689     <tr>

  1690      <td><em>Value:</em>

  1692      <td>none | all

  1694     <tr>

  1695      <td><em>Initial:</em>

  1697      <td>none

  1699     <tr>

  1700      <td><em>Applies to:</em>

  1702      <td>in-flow block-level elements

  1704     <tr>

  1705      <td><em>Inherited:</em>

  1707      <td>no

  1709     <tr>

  1710      <td><em>Percentages:</em>

  1712      <td>N/A

  1714     <tr>

  1715      <td><em>Media:</em>

  1717      <td>visual

  1719     <tr>

  1720      <td><em>Computed value:</em>

  1722      <td>specified value

  1724     <tr>

  1725      <td><em>Animatable:</em>

  1727      <td>no

  1728   </table>

  1730   <p>This property describes how many columns an element spans across. Values

  1731    are:

  1733   <dl>

  1734    <dt>none

  1736    <dd>The element does not span multiple columns.

  1738    <dt>all

  1740    <dd>The element spans across all columns of the nearest multicol ancestor

  1741     in the same block formatting context. The element spans across all

  1742     columns. Content in the normal flow that appears before the element is

  1743     automatically balanced across all columns before the element appears. The

  1744     element establishes a new block formatting context.

  1745   </dl>

  1747   <p>An element that spans more than one column is called a <dfn

  1748    id=spanning-element>spanning element</dfn> and the box it creates is

  1749    called a <dfn id=spanner>spanner</dfn>. <!--

  1750 <p>This property has no effect on elements that do not fit entirely

  1751 within the multicol element. Also, if a setting on this property pushes the

  1752 element outside a multicol element, this property will have no effect.

  1753 -->

  1755   <div class=example>

  1756    <p>In this example, an <code>h2</code> element has been added to the

  1757     sample document after the sixth sentence (i.e., after the word "jkl.").

  1758     This styling applies:

  1760    <pre class=css>

  1761 h2 { column-span: all; background: silver }

  1762 img { display: none }

  1763 </pre>

  1765    <p>By setting ‘<a href="#column-span0"><code

  1766     class=property>column-span</code></a>’ to ‘<code

  1767     class=css>all</code>’, all content that appear before the

  1768     <code>h2</code> element is shown before the <code>h2</code> element.

  1770    <div class=cols>

  1771     <p>Ab cde fgh i jkl. Mno<br>

  1772      pqr stu vw xyz. A bc<br>

  1773      <br>

  1774      <br>

  1775      M nop qrst uv wx yz.<br>

  1776      Ab cde fgh i jkl. Mno<br>

  1777      pqr stu vw xyz. A bc<br>

  1778      def g hij klm nopqrs<br>

  1779      tuv wxy z. Abc de fg<br>

  1780      hi jklmno. Pqrstu vw<br>

  1782     <div class=col style="left: 175px">

  1783      <p>def g hij klm nopqrs<br>

  1784       tuv wxy z. Abc de fg<br>

  1785       <br>

  1786       <br>

  1787       x yz. Abc def ghi jkl.<br>

  1788       M nop qrst uv wx yz.<br>

  1789       Ab cde fgh i jkl. Mno<br>

  1790       pqr stu vw xyz. A bc<br>

  1791       def g hij klm nopqrs<br>

  1792       tuv wxy z. Abc de fg<br>

  1793     </div>

  1795     <div class=col style="left: 350px">

  1796      <p> hi jklmno. Pqrstu vw<br>

  1797       x yz. Abc def ghi jkl.<br>

  1798       <br>

  1799       <br>

  1800       hi jklmno. Pqrstu vw<br>

  1801       x yz. Abc def ghi jkl.<br>

  1802       M nop qrst uv wx yz.<br>

  1803       Ab cde fgh i jkl. Mno<br>

  1804       pqr stu vw xyz.

  1805     </div>

  1807     <div class=rep

  1808      style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An

  1809      H2 element</div>

  1811     <div class=gap style="left: 150px"></div>

  1813     <div class=gap style="left: 325px"></div>

  1814    </div>

  1815   </div>

  1817   <p>A spanning element takes up more space than the element would take up

  1818    otherwise. When space is limited, it may be impossible to find room for

  1819    the spanning element. In these cases, user agents may treat the element as

  1820    if ‘<code class=property>none</code>’ had been specified on this

  1821    property.

  1823   <div class=example>

  1824    <p>In this example, the H2 element appears later in the content, and the

  1825     height of the multicol element is constrained. Therefore, the H2 element

  1826     appears in the overflow and there is not room to make the element

  1827     spanning. As a result, the element appears as if ‘<code

  1828     class=css>column-span: none</code>’ was specified.

  1830    <div class=cols style="height: 100px">

  1831     <div class=col style="">

  1832      <p> Ab cde fgh i jkl. Mno<br>

  1833       pqr stu vw xyz. A bc<br>

  1834       def g hij klm nopqrs<br>

  1835       tuv wxy z. Abc de fg<br>

  1836       hi jklmno. Pqrstu vw<br>

  1837     </div>

  1839     <div class=col style="left: 175px">

  1840      <p> x yz. Abc def ghi jkl.<br>

  1841       M nop qrst uv wx yz.<br>

  1842       Ab cde fgh i jkl. Mno<br>

  1843       pqr stu vw xyz. A bc<br>

  1844       def g hij klm nopqrs

  1845     </div>

  1847     <div class=col style="left: 350px">

  1848      <p> tuv wxy z. Abc de fg<br>

  1849       hi jklmno. Pqrstu vw<br>

  1850       x yz. Abc def ghi jkl.<br>

  1851       M nop qrst uv wx yz.<br>

  1852       Ab cde fgh i jkl. Mno<br>

  1853     </div>

  1855     <div class=col style="left: 525px">

  1856      <p>pqr stu vw xyz.

  1858      <div class=rep

  1859       style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An

  1860       H2 element</div>

  1861      A bc def g hij klm</div>

  1863     <div class=col style="left: 700px"> nopqrs tuv wxy z.</div>

  1865     <div class=gap style="left: 150px"></div>

  1867     <div class=gap style="left: 325px"></div>

  1869     <div class=gap style="left: 500px"></div>

  1871     <div class=gap style="left: 675px"></div>

  1872    </div>

  1873   </div>

  1875   <div class=example>

  1876    <p>This example is similar to the previous example, except that the H2

  1877     element appears naturally in the last column. Still, there is not enough

  1878     room to make the element spanning.

  1880    <div class=cols style="height: 100px">

  1881     <div class=col style="">

  1882      <p> Ab cde fgh i jkl. Mno<br>

  1883       pqr stu vw xyz. A bc<br>

  1884       def g hij klm nopqrs<br>

  1885       tuv wxy z. Abc de fg<br>

  1886       hi jklmno. Pqrstu vw<br>

  1887     </div>

  1889     <div class=col style="left: 175px">

  1890      <p> x yz. Abc def ghi jkl.<br>

  1891       M nop qrst uv wx yz.<br>

  1892       Ab cde fgh i jkl. Mno<br>

  1893       pqr stu vw xyz. A bc<br>

  1894       def g hij klm nopqrs

  1895     </div>

  1897     <div class=col style="left: 350px">

  1898      <p> tuv wxy z. Abc de fg<br>

  1899       hi jklmno.

  1901      <div class=rep

  1902       style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An

  1903       H2 element</div>

  1904     </div>

  1906     <div class=col style="left: 525px">

  1907      <p>A bc def g hij klm<br>

  1908       nop w rstu vw xyz.

  1909     </div>

  1911     <div class=gap style="left: 150px"></div>

  1913     <div class=gap style="left: 325px"></div>

  1915     <div class=gap style="left: 500px"></div>

  1916    </div>

  1917   </div>

  1919   <div class=example>

  1920    <p>In paged media spanning elements are honored on all pages. In this

  1921     example, the first three paragraphs have column breaks after them. An

  1922     spanning <code>H2</code> element appears after the fourth paragraph. This

  1923     would appear on the first page:

  1925    <div class=cols style="height: 80px; border-bottom: none">

  1926     <div class=col style="">

  1927      <p> Ab cde fgh i jkl. Mno<br>

  1928       pqr stu vw xyz.

  1929     </div>

  1931     <div class=col style="left: 175px">

  1932      <p> Ab cde fgh i jkl. Mno<br>

  1933       pqr stu vw xyz. A bc<br>

  1934       def g hij klm nopqrs<br>

  1935       tuv wxy z.

  1936     </div>

  1938     <div class=col style="left: 350px">

  1939      <p> Ab cde fgh i jkl mno.<br>

  1940       Pq rstu vwxyz.

  1941     </div>

  1943     <div class=gap style="left: 150px"></div>

  1945     <div class=gap style="left: 325px"></div>

  1946    </div>

  1948    <p>This would appear on the second page:

  1950    <div class=cols style="height: 200px; border-top: none">

  1951     <p>Ab cde fgh i jkl. Mno<br>

  1952      pqr stu vw xyz. A bc<br>

  1953      <br>

  1954      <br>

  1955      M nop qrst uv wx yz.<br>

  1956      Ab cde fgh i jkl. Mno<br>

  1957      pqr stu vw xyz. A bc<br>

  1958      def g hij klm nopqrs<br>

  1959      tuv wxy z. Abc de fg<br>

  1960      hi jklmno. Pqrstu vw<br>

  1962     <div class=col style="left: 175px">

  1963      <p>def g hij klm nopqrs<br>

  1964       tuv wxy z. Abc de fg<br>

  1965       <br>

  1966       <br>

  1967       x yz. Abc def ghi jkl.<br>

  1968       M nop qrst uv wx yz.<br>

  1969       Ab cde fgh i jkl. Mno<br>

  1970       pqr stu vw xyz. A bc<br>

  1971       def g hij klm nopqrs<br>

  1972       tuv wxy z. Abc de fg<br>

  1973     </div>

  1975     <div class=col style="left: 350px">

  1976      <p> hi jklmno. Pqrstu vw<br>

  1977       x yz. Abc def ghi jkl.<br>

  1978       <br>

  1979       <br>

  1980       hi jklmno. Pqrstu vw<br>

  1981       x yz. Abc def ghi jkl.<br>

  1982       M nop qrst uv wx yz.<br>

  1983       Ab cde fgh i jkl. Mno<br>

  1984       pqr stu vw xyz.

  1985     </div>

  1987     <div class=rep

  1988      style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An

  1989      H2 element</div>

  1991     <div class=gap style="left: 150px"></div>

  1993     <div class=gap style="left: 325px"></div>

  1994    </div>

  1995   </div>

  1997   <h2 id=filling-columns><span class=secno>7. </span>Filling columns</h2>

  1999   <p>There are two strategies for filling columns: columns can either be

  2000    balanced, or not. If columns are balanced, user agents should try to fill

  2001    all columns in a row so that the columns appear to have the same amount of

  2002    content, while also trying to minimize the overflow content. If columns

  2003    are not balanced, they are filled sequentially; some columns may end up

  2004    partially filled, or with no content at all. In any case, user agents must

  2005    honor forced page breaks and should try to honor ‘<code

  2006    class=property>widows</code>’, ‘<code class=property>orphans</code>’

  2007    and other properties that may affect column lengths.

  2009   <h3 id=cf><span class=secno>7.1. </span>‘<a href="#column-fill"><code

  2010    class=property>column-fill</code></a>’</h3>

  2012   <table class=propdef>

  2013    <tbody>

  2014     <tr>

  2015      <td><em>Name:</em>

  2017      <td><dfn id=column-fill>column-fill</dfn>

  2019     <tr>

  2020      <td><em>Value:</em>

  2022      <td>auto | balance

  2024     <tr>

  2025      <td><em>Initial:</em>

  2027      <td>balance

  2029     <tr>

  2030      <td><em>Applies to:</em>

  2032      <td>multicol elements

  2034     <tr>

  2035      <td><em>Inherited:</em>

  2037      <td>no

  2039     <tr>

  2040      <td><em>Percentages:</em>

  2042      <td>N/A

  2044     <tr>

  2045      <td><em>Media:</em>

  2047      <td>see below

  2049     <tr>

  2050      <td><em>Computed value:</em>

  2052      <td>specified value

  2054     <tr>

  2055      <td><em>Animatable:</em>

  2057      <td>no

  2058   </table>

  2060   <p>The values are:

  2062   <dl>

  2063    <dt>balance

  2065    <dd>Balance content equally between columns, if possible.

  2067    <dt>auto

  2069    <dd>Fills columns sequentially.

  2070   </dl>

  2071   <!--

  2072 <p>In continuous media, this property will only be consulted if the

  2073 length of columns has been constrained. Otherwise, columns will

  2074 automatically be balanced.

  2075 -->

  2077   <p>In continuous media, this property does not have any effect in overflow

  2078    columns (see below). <!--

  2079 <p>In paged media, this property will only have

  2080 effect on the last page the multicol element appears on.

  2081 -->

  2083   <h2 id=overflow><span class=secno>8. </span>Overflow</h2>

  2085   <h3 id=overflow-inside-multicol-elements><span class=secno>8.1.

  2086    </span>Overflow inside multicol elements</h3>

  2088   <p>Content in the normal flow that extends into column gaps (e.g., long

  2089    words or images) is clipped in the middle of the column gap.

  2091   <div class=example>

  2092    <p>In this example, the black image is wider than the column, and is

  2093     therefore clipped.

  2095    <div class=cols>

  2096     <p>Lorem ipsum dolor<br>

  2097      sit amet. Nam at jus. <br>

  2098      <br>

  2099      <br>

  2100      <br>

  2101      <br>

  2102      <br>

  2103      <br>

  2104      Sed imp er di et ris.<br>

  2105      Cur abi tur et sapen.

  2107     <div style="position: absolute; left: 175px; top: 0; z-index: 6;">

  2108      <p>Lorem ipsum dolor<br>

  2109       sit amet. Nam at jus.<br>

  2110       Sed imp er di et ris.<br>

  2111       Cur abi tur et sapen.<br>

  2112       Vivamus a metus.<br>

  2113       Aenean at risus<br>

  2114       pharetra ante luctu<br>

  2115       feugiat quis enim.<br>

  2116       Cum sociis natoque<br>

  2117       penatibus et magni.

  2118     </div>

  2120     <div style="position: absolute; left: 350px; top: 0; z-index: 6;">

  2121      <p>Lorem ipsum dolor<br>

  2122       sit amet. Nam at jus.<br>

  2123       Sed imp er di et ris.<br>

  2124       Cur abi tur et sapen.<br>

  2125       Vivamus a metus.<br>

  2126       Aenean at risus<br>

  2127       pharetra ante luctu<br>

  2128       feugiat quis enim.<br>

  2129       Cum sociis natoque<br>

  2130       penatibus et magni.

  2131     </div>

  2133     <div class=rep style="width: 163px"></div>

  2135     <div class=gap style="left: 150px"></div>

  2137     <div class=gap style="left: 325px"></div>

  2138    </div>

  2139   </div>

  2141   <h3 id=pagination-and-overflow-outside-multicol><span class=secno>8.2.

  2142    </span>Pagination and overflow outside multicol elements</h3>

  2144   <p>Content and column rules that extend outside column boxes at the edges

  2145    of the multi-column element are clipped according to the ‘<code

  2146    class=property>overflow</code>’ property.

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

  2150   <ul>

  2151    <li>a declaration that constrains the column height (e.g., using ‘<code

  2152     class=property>height</code>’ or ‘<code

  2153     class=property>max-height</code>’). In this case, additional column

  2154     boxes are created in the inline direction

  2156    <li>the size of the page. In this case, additional column boxes are moved

  2157     to the next page(s).

  2159    <li>explicit column breaks. In this case, additional column boxes are

  2160     created in the inline direction for continuous media, and additional

  2161     column boxes are moved to the next page(s) for paged media.

  2162   </ul>

  2164   <p>Columns that appear outside the multicol element in continuous media are

  2165    called <dfn id=overflow-columns>overflow columns</dfn>.

  2167   <div class=example>

  2168    <p>In this example, the height of the multi-column element has been

  2169     constrained to a maximum height. Also, the style sheet specifies that

  2170     overflowing content should be visible:

  2172    <pre class=css>

  2173 div {

  2174   max-height: 5em;

  2175   overflow: visible;

  2176 }

  2177 </pre>

  2179    <p>As a result, the number of columns is increased.

  2181    <div class=cols style="height: 100px">

  2182     <div class=col style="">

  2183      <p> Ab cde fgh i jkl. Mno<br>

  2184       pqr stu vw xyz. A bc<br>

  2185       def g hij klm nopqrs<br>

  2186       tuv wxy z. Abc de fg<br>

  2187       hi jklmno. Pqrstu vw<br>

  2188     </div>

  2190     <div class=col style="left: 175px">

  2191      <p> x yz. Abc def ghi jkl.<br>

  2192       M nop qrst uv wx yz.<br>

  2193       Ab cde fgh i jkl. Mno<br>

  2194       pqr stu vw xyz. A bc<br>

  2195       def g hij klm nopqrs

  2196     </div>

  2198     <div class=col style="left: 350px">

  2199      <p> tuv wxy z. Abc de fg<br>

  2200       hi jklmno. Pqrstu vw<br>

  2201       x yz. Abc def ghi jkl.<br>

  2202       M nop qrst uv wx yz.<br>

  2203       Ab cde fgh i jkl. Mno<br>

  2204     </div>

  2206     <div class=col style="left: 525px">

  2207      <p> pqr stu vw xyz. A bc<br>

  2208       def g hij klm nopqrs<br>

  2209       tuv wxy z. Abc de fg<br>

  2210       hi jklmno. Pqrstu vw<br>

  2211       x yz. Abc def ghi jkl.<br>

  2212     </div>

  2214     <div class=gap style="left: 150px"></div>

  2216     <div class=gap style="left: 325px"></div>

  2218     <div class=gap style="left: 500px"></div>

  2219    </div>

  2220   </div>

  2222   <div class=example>

  2223    <p>In paged media, the overflow content goes into column on subsequent

  2224     pages. Given the same content as in the previous example and a page box

  2225     that only has room for five lines of formatted text, this would appear on

  2226     the first page:

  2228    <div class=cols style="height: 100px; border-bottom: none">

  2229     <div class=col style="">

  2230      <p> Ab cde fgh i jkl. Mno<br>

  2231       pqr stu vw xyz. A bc<br>

  2232       def g hij klm nopqrs<br>

  2233       tuv wxy z. Abc de fg<br>

  2234       hi jklmno. Pqrstu vw<br>

  2235     </div>

  2237     <div class=col style="left: 175px">

  2238      <p> x yz. Abc def ghi jkl.<br>

  2239       M nop qrst uv wx yz.<br>

  2240       Ab cde fgh i jkl. Mno<br>

  2241       pqr stu vw xyz. A bc<br>

  2242       def g hij klm nopqrs

  2243     </div>

  2245     <div class=col style="left: 350px">

  2246      <p> tuv wxy z. Abc de fg<br>

  2247       hi jklmno. Pqrstu vw<br>

  2248       x yz. Abc def ghi jkl.<br>

  2249       M nop qrst uv wx yz.<br>

  2250       Ab cde fgh i jkl. Mno<br>

  2251     </div>

  2253     <div class=gap style="left: 150px"></div>

  2255     <div class=gap style="left: 325px"></div>

  2256    </div>

  2258    <p>Assuming column balancing, this would appear on the second page:

  2260    <div class=cols style="height: 45px; border-top: none">

  2261     <div class=col style="">

  2262      <p> pqr stu vw xyz. A bc<br>

  2263       def g hij klm nopqrs<br>

  2264     </div>

  2266     <div class=col style="left: 175px">

  2267      <p> tuv wxy z. Abc de fg<br>

  2268       hi jklmno. Pqrstu vw<br>

  2269     </div>

  2271     <div class=col style="left: 350px">

  2272      <p> x yz. Abc def ghi jkl.<br>

  2273     </div>

  2275     <div class=gap style="left: 150px"></div>

  2277     <div class=gap style="left: 325px"></div>

  2278    </div>

  2279   </div>

  2281   <div class=example>

  2282    <p>In this example, explicit column breaks are generated after paragraphs:

  2284    <pre class=css>

  2285 p {

  2286   break-after: column;

  2287 }

  2288 </pre>

  2290    <p>As a result, the number of columns increases and the extra columns are

  2291     added in the inline direction:

  2293    <div class=cols style="height: 100px">

  2294     <div class=col style="">

  2295      <p> Ab cde fgh i jkl. Mno<br>

  2296       pqr stu vw xyz.

  2297     </div>

  2299     <div class=col style="left: 175px">

  2300      <p> Ab cde fgh i jkl. Mno<br>

  2301       pqr stu vw xyz. A bc<br>

  2302       def g hij klm nopqrs<br>

  2303       tuv wxyz. Abc defghi<br>

  2304       jklmno pqrstu vwxyz.

  2305     </div>

  2307     <div class=col style="left: 350px">

  2308      <p> Ab cde fgh i jkl mno.<br>

  2309     </div>

  2311     <div class=col style="left: 525px">

  2312      <p> Pqr stu vw xyz. A bc<br>

  2313       def g hij klm nopqrs<br>

  2314       tuv wxy z.

  2315     </div>

  2317     <div class=gap style="left: 150px"></div>

  2319     <div class=gap style="left: 325px"></div>

  2321     <div class=gap style="left: 500px"></div>

  2322    </div>

  2323   </div>

  2325   <div class=example>

  2326    <p>In paged media, extra columns are shown on the next page. Given the

  2327     same code as the previous example, the last paragraph appears on the

  2328     second page. This would appear on the first page:

  2330    <div class=cols style="height: 100px; border-bottom: none">

  2331     <div class=col style="">

  2332      <p> Ab cde fgh i jkl. Mno<br>

  2333       pqr stu vw xyz.

  2334     </div>

  2336     <div class=col style="left: 175px">

  2337      <p> Ab cde fgh i jkl. Mno<br>

  2338       pqr stu vw xyz. A bc<br>

  2339       def g hij klm nopqrs<br>

  2340       tuv wxyz. Abc defghi<br>

  2341       jklmno pqrstu vwxyz.

  2342     </div>

  2344     <div class=col style="left: 350px">

  2345      <p> Ab cde fgh i jkl mno.<br>

  2346     </div>

  2348     <div class=gap style="left: 150px"></div>

  2350     <div class=gap style="left: 325px"></div>

  2351    </div>

  2353    <p>This would appear on the second page:

  2355    <div class=cols style="height: 23px; border-top: none">

  2356     <div class=col style="">

  2357      <p> Pqr stu vw xyz. A bc

  2358     </div>

  2360     <div class=col style="left: 175px">

  2361      <p> def g hij klm nopqrs

  2362     </div>

  2364     <div class=col style="left: 350px">

  2365      <p> tuv wxy z.

  2366     </div>

  2368     <div class=gap style="left: 150px"></div>

  2370     <div class=gap style="left: 325px"></div>

  2371    </div>

  2372    Due to column balancing, the last paragraph is split across three columns.</div>

  2374   <h2 id=conformance><span class=secno>9. </span>Conformance</h2>

  2376   <p>Conforming UAs must flow the content of an element into several columns

  2377    according to this specification.

  2379   <p>The conformance requirements are expressed with a combination of

  2380    descriptive assertions and RFC 2119 terminology. The key words "MUST",

  2381    "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",

  2382    "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this

  2383    document are to be interpreted as described in RFC 2119. However, for

  2384    readability, these words do not appear in all uppercase letters in this

  2385    specification. All of the text of this specification is normative except

  2386    sections explicitly marked as non-normative, examples, and notes. <a

  2387    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  2389   <h3 id=cr-exit-criteria><span class=secno>9.1. </span>CR exit criteria</h3>

  2391   <p>As described in the W3C process document, a <a

  2392    href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">Candidate

  2393    Recommendation</a> (CR) is a specification that W3C recommends for use on

  2394    the Web. The next stage is <em>Recommendation</em>, when the specification

  2395    is sufficiently implemented.

  2397   <p>For this specification to be proposed as a W3C Recommendation, the

  2398    following conditions shall be met. There must be at least two independent,

  2399    interoperable implementations of each feature. Each feature may be

  2400    implemented by a different set of products, there is no requirement that

  2401    all features be implemented by a single product. For the purposes of this

  2402    criterion, we define the following terms:

  2404   <dl>

  2405    <dt>independent

  2407    <dd>each implementation must be developed by a different party and cannot

  2408     share, reuse, or derive from code used by another qualifying

  2409     implementation. Sections of code that have no bearing on the

  2410     implementation of this specification are exempt from this requirement.

  2412    <dt>interoperable

  2414    <dd>passing the respective test case(s) in the official CSS test suite,

  2415     or, if the implementation is not a Web browser, an equivalent test. Every

  2416     relevant test in the test suite should have an equivalent test created if

  2417     such a user agent (UA) is to be used to claim interoperability. In

  2418     addition if such a UA is to be used to claim interoperability, then there

  2419     must one or more additional UAs which can also pass those equivalent

  2420     tests in the same way for the purpose of interoperability. The equivalent

  2421     tests must be made publicly available for the purposes of peer review.

  2423    <dt>implementation

  2425    <dd>a user agent which:

  2426     <ol class=inline>

  2427      <li>implements the specification.

  2429      <li>is available to the general public. The implementation may be a

  2430       shipping product or other publicly available version (i.e., beta

  2431       version, preview release, or <em>nightly build</em>). Non-shipping

  2432       product releases must have implemented the feature(s) for a period of

  2433       at least one month in order to demonstrate stability.

  2435      <li>is not experimental (i.e., a version specifically designed to pass

  2436       the test suite and is not intended for normal usage going forward).

  2437     </ol>

  2438   </dl>

  2440   <p>A minimum of sixth months of the CR period must have elapsed. This is to

  2441    ensure that enough time is given for any remaining major errors to be

  2442    caught.

  2444   <p>Features will be dropped if two or more interoperable implementations

  2445    are not found by the end of the CR period.

  2447   <p>Features may/will also be dropped if adequate/sufficient (by judgment of

  2448    CSS WG) tests have not been produced for those feature(s) by the end of

  2449    the CR period.

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

  2453   <p>This document is based on several older proposals and comments on older

  2454    proposals. Contributors include Øyvind Stenhaug, Sylvain Galineau,

  2455    Giovanni Campagna, David Hyatt, David Singer, David Woolley, Elika Etemad,

  2456    Björn Höhrmann, Joost de Valk, Peter-Paul Koch, Shelby Moore, Till

  2457    Halbach, Cédric Savarese, Andy Clarke, Robert O'Callahan, Markus Mielke,

  2458    Alex Mogilevsky, Sergey Genkin, Michael Day, Melinda Grant, Kevin Lawver,

  2459    Anton Prowse, L. David Baron, Bert Bos, Dave Raggett, Chris Wilson, Robert

  2460    Stevahn, Peter Linss, Chris Lilley, Steve Zilles, Tantek Çelik, Daniel

  2461    Glazman and Ian Hickson.

  2463   <h2 class=no-num id=references>References</h2>

  2465   <h3 class=no-num id=normative-references>Normative references</h3>

  2466   <!--begin-normative-->

  2467   <!-- Sorted by label -->

  2469   <dl class=bibliography>

  2470    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  2471     <!---->

  2473    <dt id=CSS21>[CSS21]

  2475    <dd>Bert Bos; et al. <a

  2476     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style

  2477     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June

  2478     2011. W3C Recommendation. URL: <a

  2479     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  2480    </dd>

  2481    <!---->

  2483    <dt id=RFC2119>[RFC2119]

  2485    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key

  2486     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet

  2487     RFC 2119. URL: <a

  2488     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>

  2489    </dd>

  2490    <!---->

  2491   </dl>

  2492   <!--end-normative-->

  2494   <h3 class=no-num id=other-references>Other references</h3>

  2495   <!--begin-informative-->

  2496   <!-- Sorted by label -->

  2498   <dl class=bibliography>

  2499    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  2500     <!---->

  2501   </dl>

  2502   <!--end-informative-->

  2504   <h2 class=no-num id=index>Index</h2>

  2505   <!--begin-index-->

  2507   <ul class=indexlist>

  2508    <li>break-after, <a href="#break-after"

  2509     title="section 5.1."><strong>5.1.</strong></a>

  2511    <li>break-before, <a href="#break-before"

  2512     title="section 5.1."><strong>5.1.</strong></a>

  2514    <li>break-inside, <a href="#break-inside"

  2515     title="section 5.1."><strong>5.1.</strong></a>

  2517    <li>column box, <a href="#column-box"

  2518     title="section 2."><strong>2.</strong></a>

  2520    <li>column-count, <a href="#column-count"

  2521     title="section 3.2."><strong>3.2.</strong></a>

  2523    <li>column-fill, <a href="#column-fill"

  2524     title="section 7.1."><strong>7.1.</strong></a>

  2526    <li>column-gap, <a href="#column-gap0"

  2527     title="section 4.1."><strong>4.1.</strong></a>

  2529    <li>column-rule, <a href="#column-rule0"

  2530     title="section 4.5."><strong>4.5.</strong></a>

  2532    <li>column-rule-color, <a href="#column-rule-color"

  2533     title="section 4.2."><strong>4.2.</strong></a>

  2535    <li>column-rule-style, <a href="#column-rule-style"

  2536     title="section 4.3."><strong>4.3.</strong></a>

  2538    <li>column-rule-width, <a href="#column-rule-width"

  2539     title="section 4.4."><strong>4.4.</strong></a>

  2541    <li>columns, <a href="#columns0"

  2542     title="section 3.3."><strong>3.3.</strong></a>

  2544    <li>column-span, <a href="#column-span0"

  2545     title="section 6.1."><strong>6.1.</strong></a>

  2547    <li>column-width, <a href="#column-width"

  2548     title="section 3.1."><strong>3.1.</strong></a>

  2550    <li>multi-column element, <a href="#multi-column-element"

  2551     title="section 2."><strong>2.</strong></a>

  2553    <li>overflow columns, <a href="#overflow-columns"

  2554     title="section 8.2."><strong>8.2.</strong></a>

  2556    <li>spanner, <a href="#spanner"

  2557     title="section 6.1."><strong>6.1.</strong></a>

  2559    <li>spanning element, <a href="#spanning-element"

  2560     title="section 6.1."><strong>6.1.</strong></a>

  2561   </ul>

  2562   <!--end-index-->

  2564   <h2 class=no-num id=property-index>Property index</h2>

  2565   <!--begin-properties-->

  2567   <table class=proptable>

  2568    <thead>

  2569     <tr>

  2570      <th>Property

  2572      <th>Values

  2574      <th>Initial

  2576      <th>Applies to

  2578      <th>Inh.

  2580      <th>Percentages

  2582      <th>Media

  2584    <tbody>

  2585     <tr>

  2586      <th><a class=property href="#break-after">break-after</a>

  2588      <td>auto | always | avoid | left | right | page | column | avoid-page |

  2589       avoid-column

  2591      <td>auto

  2593      <td>block-level elements

  2595      <td>no

  2597      <td>N/A

  2599      <td>paged

  2601     <tr>

  2602      <th><a class=property href="#break-before">break-before</a>

  2604      <td>auto | always | avoid | left | right | page | column | avoid-page |

  2605       avoid-column

  2607      <td>auto

  2609      <td>block-level elements

  2611      <td>no

  2613      <td>N/A

  2615      <td>paged

  2617     <tr>

  2618      <th><a class=property href="#break-inside">break-inside</a>

  2620      <td>auto | avoid | avoid-page | avoid-column

  2622      <td>auto

  2624      <td>block-level elements

  2626      <td>no

  2628      <td>N/A

  2630      <td>paged

  2632     <tr>

  2633      <th><a class=property href="#column-count">column-count</a>

  2635      <td>&lt;integer&gt; | auto

  2637      <td>auto

  2639      <td>non-replaced block-level elements (except table elements), table

  2640       cells, and inline-block elements

  2642      <td>no

  2644      <td>N/A

  2646      <td>visual

  2648     <tr>

  2649      <th><a class=property href="#column-fill">column-fill</a>

  2651      <td>auto | balance

  2653      <td>balance

  2655      <td>multicol elements

  2657      <td>no

  2659      <td>N/A

  2661      <td>see below

  2663     <tr>

  2664      <th><a class=property href="#column-gap0">column-gap</a>

  2666      <td>&lt;length&gt; | normal

  2668      <td>normal

  2670      <td>multicol elements

  2672      <td>no

  2674      <td>N/A

  2676      <td>visual

  2678     <tr>

  2679      <th><a class=property href="#column-rule0">column-rule</a>

  2681      <td>&lt;‘column-rule-width’&gt; || &lt;‘column-rule-style’&gt;

  2682       || [ &lt;‘column-rule-color’&gt; | transparent ]

  2684      <td>see individual properties

  2686      <td>multicol elements

  2688      <td>no

  2690      <td>N/A

  2692      <td>visual

  2694     <tr>

  2695      <th><a class=property href="#column-rule-color">column-rule-color</a>

  2697      <td>&lt;color&gt;

  2699      <td>currentColor

  2701      <td>multicol elements

  2703      <td>no

  2705      <td>N/A

  2707      <td>visual

  2709     <tr>

  2710      <th><a class=property href="#column-rule-style">column-rule-style</a>

  2712      <td>&lt;border-style&gt;

  2714      <td>none

  2716      <td>multicol elements

  2718      <td>no

  2720      <td>N/A

  2722      <td>visual

  2724     <tr>

  2725      <th><a class=property href="#column-rule-width">column-rule-width</a>

  2727      <td>&lt;border-width&gt;

  2729      <td>medium

  2731      <td>multicol elements

  2733      <td>no

  2735      <td>N/A

  2737      <td>visual

  2739     <tr>

  2740      <th><a class=property href="#columns0">columns</a>

  2742      <td>&lt;‘column-width’> || &lt;‘column-count’>

  2744      <td>see individual properties

  2746      <td>non-replaced block-level elements (except table elements), table

  2747       cells, and inline-block elements

  2749      <td>no

  2751      <td>N/A

  2753      <td>visual

  2755     <tr>

  2756      <th><a class=property href="#column-span0">column-span</a>

  2758      <td>none | all

  2760      <td>none

  2762      <td>in-flow block-level elements

  2764      <td>no

  2766      <td>N/A

  2768      <td>visual

  2770     <tr>

  2771      <th><a class=property href="#column-width">column-width</a>

  2773      <td>&lt;length&gt; | auto

  2775      <td>auto

  2777      <td>non-replaced block-level elements (except table elements), table

  2778       cells, and inline-block elements

  2780      <td>no

  2782      <td>N/A

  2784      <td>visual

  2785   </table>

  2786   <!--end-properties-->

  2787 </html>

  2788 <!-- Keep this comment at the end of the file

  2789 Local variables:

  2790 mode: sgml

  2791 sgml-declaration:"~/SGML/HTML4.decl"

  2792 sgml-default-doctype-name:"html"

  2793 sgml-minimize-attributes:t

  2794 sgml-nofill-elements:("pre" "style" "br")

  2795 sgml-live-element-indicator:t

  2796 sgml-omittag:nil

  2797 sgml-shorttag:nil

  2798 sgml-namecase-general:t

  2799 sgml-general-insert-case:lower

  2800 sgml-always-quote-attributes:t

  2801 sgml-indent-step:nil

  2802 sgml-indent-data:t

  2803 sgml-parent-document:nil

  2804 sgml-exposed-tags:nil

  2805 sgml-local-catalogs:nil

  2806 sgml-local-ecat-files:nil

  2807 End:

  2808 -->

Mercurial > drafts / file revision

css3-multicol/Overview.html@34298d3d5627

css3-multicol/Overview.html