E787 csswg-drafts/css3-multicol/Overview.html at 8dd47b1f9559445313d03321ca540383c7c97c23 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
2114 lines (1589 loc) · 60 KB

Overview.html

File metadata and controls

2114 lines (1589 loc) · 60 KB
<p> Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz.
</div>
<div class=rep style="width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
</div>
<p>The top margin of the first element and the bottom margin of the last
element will collapse with the margins of the multi-column element as per
the normal rules for collapsing.
<p>Nested multi-column elements are allowed, but there may be
implementation-specific limits.
<h2 id=the-number><span class=secno>4. </span>The number and width of
columns</h2>
<p>Finding the number and width of columns is fundamental when laying out
multi-column content. When the block direction is unconstrained and no
column breaks are added through style sheets, these two properties
determine the outcome:
<ul>
<li>&lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo;
<li>&lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo;
</ul>
<p>A third property, &lsquo;<code class=property><a
href="#columns0">columns</a></code>&rsquo;, is a shorthand property which
sets both &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; and &lsquo;<code
class=property><a href="#column-count">column-count</a></code>&rsquo;.
<h3 id=cw><span class=secno>4.1 </span>&lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo;</h3>
<table class=propdef id=name->
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=column-width>column-width</dfn>
<tr>
<td><em>Value:</em>
<td>&lt;length&gt; | auto
<tr>
<td><em>Initial:</em>
<td>auto
<tr>
<td><em>Applies to:</em>
<td>block-level elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&nbsp;value:</em>
<td>the absolute length
</table>
<p>This property describes the width of columns in multicol elements.
<dl>
<dt>auto
<dd>means that the column width will be determined by other properties
(e.g., &lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo;, if it has a non-auto
value).
<dt>&lt;length>
<dd>describes the optimal column width. The actual column width may be
wider (to fill the available space), or narrower (only if the available
space is smaller than the specified column width). Values must be greater
than 0.
</dl>
<div class=example>
<p>For example, consider this style sheet:</p>
<pre>
div {
width: 100px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>There is room for two 45px wide columns inside the 100px wide element.
In order to fill the available space the actual column width will be
increased to 50px.</p>
</div>
<div class=example>
<p>Also, consider this style sheet:</p>
<pre>
div {
width: 40px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>The available space is smaller than the specified column width and the
actual column width will therefore be decreased.</p>
</div>
<p>To ensure that &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; can be used with
vertical text, column width means the length of the line boxes inside the
columns.
<p class=note>The reason for making &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; somewhat flexible is
to achieve scalable designs that can fit many screen sizes. To set an
exact column width, all length values (in horizontal text these are:
&lsquo;<code class=property>width</code>&rsquo;, &lsquo;<code
class=property><a href="#column-width">column-width</a></code>&rsquo;,
column-gap', and &lsquo;<code class=property><a
href="#column-rule-width">column-rule-width</a></code>&rsquo;) must be
specified.
<h3 id=cc><span class=secno>4.2 </span>&lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo;</h3>
<table class=propdef id=name-0>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=column-count>column-count</dfn>
<tr>
<td><em>Value:</em>
<td>&lt;integer&gt; | auto
<tr>
<td><em>Initial:</em>
<td>auto
<tr>
<td><em>Applies to:</em>
<td>block-level elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&nbsp;value:</em>
<td>specified value
</table>
<p>This property describes the number of columns of a multicol element.
<dl>
<dt>auto
<dd>means that the number of columns will be determined by other
properties (e.g., &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo;, if it has a non-auto
value).
<dt>&lt;integer>
<dd>describes the optimal number of columns into which the content of the
element will be flowed. Values must be greater than 0. If both
&lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; and &lsquo;<code
class=property><a href="#column-count">column-count</a></code>&rsquo;
have non-auto values, the integer value describes the maximum number of
columns.
</dl>
<div class=example>
<p>Example:</p>
<pre>body { column-count: 3 }</pre>
</div>
<h3 id=columns><span class=secno>4.3 </span>&lsquo;<code class=property><a
href="#columns0">columns</a></code>&rsquo;</h3>
<table class=propdef id=name-1>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=columns0>columns</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#cw">&lt;&lsquo;<code
class=property>column-width</code>&rsquo;> || </a><a
href="#cc">&lt;&lsquo;<code class=property>column-count</code>&rsquo;>
</a>
<tr>
<td><em>Initial:</em>
<td>see individual properties
<tr>
<td><em>Applies to:</em>
<td>block-level elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&nbsp;value:</em>
<td>see individual properties
</table>
<p>This is a shorthand property for setting &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; and &lsquo;<code
class=property><a href="#column-count">column-count</a></code>&rsquo; at
the same place in the style sheet. If two legal values (one for
&lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo; and one for
&lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo;) are specified, both
properties are set to their respective specified value. If only one value
is specified, the following applies:
<dl>
<dt>auto
<dd>both &lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo; and &lsquo;<code
class=property><a href="#column-width">column-width</a></code>&rsquo; are
set to &lsquo;<code class=css>auto</code>&rsquo;
<dt>&lt;integer>
<dd>&lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo; is set to the
specified value, &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; is set to
&lsquo;<code class=css>auto</code>&rsquo;
<dt>&lt;length>
<dd>&lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; is set to the
specified value, &lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo; is set to
&lsquo;<code class=css>auto</code>&rsquo;
</dl>
<!--
<ul>
<li>A length value or ''auto'' sets 'column-width' to the specified
valued and 'column-count' to its initial value.
<li>An integer value sets 'column-count' to the specified value and
'column-width' to its initial value.
</ul>
-->
<h3 id=pseudo-algorithm><span class=secno>4.4 </span>Pseudo-algorithm</h3>
<p>The pseudo-algorithm below determines the used values for &lsquo;<code
class=property><a href="#column-count">column-count</a></code>&rsquo; (N)
and &lsquo;<code class=property><a
href="#column-width">column-width</a></code>&rsquo; (W). There are two
other variables in the pseudo-algorithm:
<ul>
<li><code>available-width</code>: if the content width of the multi-column
element has not been determined when the &lsquo;<code class=property><a
href="#column-count">column-count</a></code>&rsquo; and &lsquo;<code
class=property><a href="#column-width">column-width</a></code>&rsquo;
must be determined; (e.g., if it is floating with a &lsquo;<code
class=property>width</code>&rsquo; of &lsquo;<code
class=property>auto</code>&rsquo; as per CSS 2.1 section 10.3.5) this
varible is <code>unknown</code>, otherwise it is the same as the content
width of the multi-column element.
<li><code>shrink-to-fit</code>: this variable represents the result of a
<em>shrink-to-fit</em> computation. CSS does not define the exact
algorithm.
</ul>
<p>Two assumptions are being made by the pseudo-algorithm:
<ul>
<li>that the block direction is unconstrained
<li>that no column breaks are added through style sheets
</ul>
<p>The <code>floor()</code> function rounds a number to the next smaller
integer.
<pre>
if ((column-width = auto) and (column-count = auto)) or
((available-width = unknown) and (column-count = auto)) then
exit; /* no columns */
fi
if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
N := column-count;
W := column-width;
exit;
fi
if (available-width = unknown) then
available-width := shrink-to-fit;
fi
if (column-width = auto) then
if ((column-count - 1) * column-gap &lt; available-width) then
N := column-count;
W := (available-width - ((N - 1) * column-gap))/N;
elsif (column-gap >= available-width) then
N := 1;
W := available-width;
else
N := floor(available-width/column-gap);
W := (available-width - ((N - 1) * column-gap))/N;
fi
elsif (column-count = auto) then
if (column-width >= available-width) then
View remainder of file in raw view