8000 csswg-drafts/css3-multicol/Overview.html at 0fb58eb697eb6925f2fbe75e0d922401aa99407c · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
2749 lines (2047 loc) · 77.5 KB

Overview.html

File metadata and controls

2749 lines (2047 loc) · 77.5 KB
pqr stu vw xyz. A bc<br>
def g<br>
hij klm<br>
nopq<br>
rs tuv<br>
wxy x<br>
yz. Ab <br>
cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc
</div>
<div class=col style="left: 175px">
<p> def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
</div>
<div class=col style="left: 350px">
<p> x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
</div>
<div class=rep style="left: 50px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
<p>The black box represents the image.
</div>
<p>A multi-column element establishes a new block formatting context, as
per CSS 2.1 section 9.4.1.
<div class=example>
<p>A top margin set on the first child element of a multicol element will
not collapse with the margins of the multicol element.
</div>
<p>Nested multi-column elements are allowed, but there may be
implementation-specific limits.
<h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The
number and width of columns</h2>
<p>Finding the number and width of columns is fundamental when laying out
multi-column content. When the block direction is unconstrained and no
column breaks are added through style sheets, these two properties
determine the outcome:
<ul>
<li>&lsquo;<a href="#column-count"><code
class=property>column-count</code></a>&rsquo;
<li>&lsquo;<a href="#column-width"><code
class=property>column-width</code></a>&rsquo;
</ul>
<p>A third property, &lsquo;<a href="#columns0"><code
class=property>columns</code></a>&rsquo;, is a shorthand property which
sets both &lsquo;<a href="#column-width"><code
class=property>column-width</code></a>&rsquo; and &lsquo;<a
href="#column-count"><code class=property>column-count</code></a>&rsquo;.
<h3 id=cw><span class=secno>3.1. </span>&lsquo;<a
href="#column-width"><code class=property>column-width</code></a>&rsquo;</h3>
<table class=propdef>
<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>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&nbsp;value:</em>
<td>the absolute length, zero or larger
</table>
<p>This property describes the width of columns in multicol elements.
<dl>
<dt>auto
<dd>means that the column width will be determined by other properties
(e.g., &lsquo;<a href="#column-count"><code
class=property>column-count</code></a>&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). Specified values must
be greater than 0.
</dl>
<div class=example>
<p>For example, consider this style sheet:</p>
<pre>
div {
width: 100px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>There is room for two 45px wide columns inside the 100px wide element.
In order to fill the available space the actual column width will be
increased to 50px.</p>
</div>
<div class=example>
<p>Also, consider this style sheet:</p>
<pre>
div {
width: 40px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>The available space is smaller than the specified column width and the
actual column width will therefore be decreased.</p>
</div>
<p>To ensure that &lsquo;<a href="#column-width"><code
class=property>column-width</code></a>&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;<a href="#column-width"><code
class=property>column-width</code></a>&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;<a
href="#column-width"><code class=property>column-width</code></a>&rsquo;,
&lsquo;<a href="#column-gap0"><code
class=property>column-gap</code></a>&rsquo;, and &lsquo;<a
href="#column-rule-width"><code
class=property>column-rule-width</code></a>&rsquo;) must be specified.
<h3 id=cc><span class=secno>3.2. </span>&lsquo;<a
href="#column-count"><code class=property>column-count</code></a>&rsquo;</h3>
<table class=propdef>
<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>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&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;<a href="#column-width"><code
class=property>column-width</code></a>&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;<a
href="#column-width"><code class=property>column-width</code></a>&rsquo;
and &lsquo;<a href="#column-count"><code
class=property>column-count</code></a>&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>3.3. </span>&lsquo;<a
href="#columns0"><code class=property>columns</code></a>&rsquo;</h3>
<table class=propdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=columns0>columns</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#cw">&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>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed&nbsp;value:</em>
<td>see individual properties
</table>
<p>This is a shorthand property for setting &lsquo;<a
href="#column-width"><code class=property>column-width</code></a>&rsquo;
and &lsquo;<a href="#column-count"><code
class=property>column-count</code></a>&rsquo;. Omitted values are set to
their initial values.
<div class=example>
<p>Here are some valid declarations using the &lsquo;<a
href="#columns0"><code class=property>columns</code></a>&rsquo; property:
<pre>
columns: 12em; /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2; /* column-width: auto; column-count: 2 */
columns: 2 auto; /* column-width: auto; column-count: 2 */
columns: auto; /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */
</pre>
</div>
<h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>
<p>The pseudo-algorithm below determines the used values for &lsquo;<a
href="#column-count"><code class=property>column-count</code></a>&rsquo;
(N) and &lsquo;<a href="#column-width"><code
class=property>column-width</code></a>&rsquo; (W). There are two other
variables in the pseudo-algorithm:
<ul>
<li><code>available-width</code>: if the used width of the multi-column
element has not been determined when the &lsquo;<a
href="#column-count"><code class=property>column-count</code></a>&rsquo;
and &lsquo;<a href="#column-width"><code
class=property>column-width</code></a>&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 variable is <code>unknown</code>, otherwise it is the same
as the used width of the multi-column element. In vertical text, the used
height replaces used width in this calculation.
<li><code>shrink-to-fit</code>: this variable represents the result of a
<em>shrink-to-fit</em> computation. CSS does not define the exact
algorithm.
</ul>
<p>Two assumptions are being made by the pseudo-algorithm:
<ul>
<li>that the block direction is unconstrained
<li>that no column breaks are added through style sheets
</ul>
<p>The <code>floor()</code> function rounds a number to the next smaller
integer. <!--
<pre>
(01) if ((column-width = auto) and (column-count = auto)) or
(02) ((available-width = unknown) and (column-count = auto)) then
(03) exit; /* no columns */
(04) fi
(05)
(06) if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
(07) N := column-count;
(08) W := column-width;
(09) exit;
(10) fi
(11)
(12) if (available-width = unknown) then
(13) available-width := shrink-to-fit;
(14) fi
(15)
(16) if (column-width = auto) then
(18) N := column-count;
(19) W := max(0, (available-width - ((N - 1) * column-gap))/N);
(27) elsif (column-count = auto) then
(28) if (column-width >= available-width) then
(29) N := 1
(30) W := available-width;
(31) else
(32) N := floor((available-width + column-gap) / (column-width + column-gap));
(33) W := ((available-width + column-gap) / N) - column-gap;
(34) fi
(35) elsif (column-width >= available-width) then
(36) N := 1
(37) W := available-width;
(38) else
(39) N := min(column-count, floor((available-width + column-gap) / (column-width + column-gap)))
(40) W := ((available-width + column-gap) / N) - column-gap;
(41) fi
</pre>
<p><span class=issue>Alternative encoding of pseudo-algorithm:
-->
<pre>
(01) if ((column-width = auto) and (column-count = auto)) then
(02) exit; /* not a multicol element */
View remainder of file in raw view