Skip to content

Commit 1843e8c

Browse files
tabatkinstabatkins
committed
[css3-sizing] Define intrinsic sizing of multicol elements.
--HG-- extra : rebase_source : 707b3ec5f6fcf594c3c02731db3fc6f979ccd187
1 parent 764861f commit 1843e8c

2 files changed

Lines changed: 126 additions & 109 deletions

File tree

‎css3-sizing/Overview.html‎

Lines changed: 74 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -775,71 +775,71 @@ <h3 id=table-intrinsic><span class=secno>4.4. </span> Intrinsic Sizes in
775775
<h3 id=multicol-intrinsic><span class=secno>4.5. </span> Intrinsic Sizes in
776776
Multi-column Layout</h3>
777777

778-
<p class=issue> Multi-column elements are different from most in that they
779-
grow sideways when their height is restricted. The ‘<a
780-
href="#max-content"><code class=css>max-content</code></a>’ value should
781-
be able to accommodate this somehow, in particular as this is how
782-
multi-column elements work in <a
783-
href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal
784-
flows</a>. See also <a
785-
href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this
786-
explanation</a>
787-
<!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html -->
788-
<!--
789-
790-
<p class="issue">
791-
This section is VERY experimental. Feedback is encouraged. Shipping implementations is not.
792-
793-
<p>For multi-column elements laid out with infinite available measure (see
794-
<a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
795-
the <i>min-content</i> extent is the extent that would result
796-
from taking every permissible pagination break as a column break, and the
797-
<i>max-content</i> extent is the extent that would result from taking
798-
only the forced breaks. For all other multi-column elements it is, like
799-
CSS2.1 block-level boxes, the extent that would be calculated for an
800-
''auto'' extent per [[CSS3MULTICOL]].
801-
802-
<pre>
803-
NOTES FROM ROSSEN:
804-
min-content measure is min(column-width, min-content)
805-
max-content measure is
806-
1. Pass w/ colspans displ: none;
807-
Get width
808-
2. Pass with colspans only in width
809-
Get remaining height
810-
3. Pass w/ spans again using remaining height
811-
Get width
812-
4. Layout in width as final
813-
Will lay out perfectly without colspans; will have some slack but no
814-
overflow when colspans present.
815-
</pre>
816-
817-
<p>
818-
The <i>min-content measure</i> of a multi-column element is
819-
the smaller of its 'column-width' and the <i>min-measure contribution</i>
820-
of its contents.
821-
822-
<p>
823-
The <i>max-content measure</i> of a multi-column element
824-
with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>)
825-
is the <i>measure</i> that would exactly include all of its columns.
826-
It may be approximated by:
827-
<ul>
828-
<li>Laying out the element with column-spanning elements given 'display: none',
829-
and taking a measure that includes all the columns.
830-
<li>Laying out all of the column-spanning elements into that resulting measure,
831-
and taking the resulting extent.
832-
<li>Subtracting that resulting extent from the specified restraint,
833-
laying out the element without column-spanning elements again into this adjusted extent,
834-
and taking the measure of all its columns as its <i>max-content measure</i>.
835-
<p>
836-
or by some more accurate method.
837-
838-
<p class="note">
839-
This approximation can result in some slack, but avoids overflow in the most common cases,
840-
where the balanced height of the columns above spanning elements are approximately equal.
778+
<p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a
779+
multi-column element with a computed ‘<code
780+
class=property>column-width</code>’ not ‘<code
781+
class=css>auto</code>’ is the smaller of its ‘<code
782+
class=property>column-width</code>’ and the largest <i>min-measure
783+
contribution</i> of its contents.
841784

842-
-->
785+
<p> The <a href="#min-content-measure"><i>min-content measure</i></a> of a
786+
multi-column element with a computed ‘<code
787+
class=property>column-width</code>’ of ‘<code class=css>auto</code>’
788+
is the largest <i>min-measure contribution</i> of its contents multiplied
789+
by its ‘<code class=property>column-count</code>’ (treating ‘<code
790+
class=css>auto</code>’ as ‘<code class=css>1</code>’).
791+
792+
<p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
793+
multi-column element with unrestrained column heights and a computed
794+
‘<code class=property>column-count</code>’ not ‘<code
795+
class=css>auto</code>’ is its ‘<code
796+
class=property>column-count</code>’ multiplied by the larger of its
797+
‘<code class=property>column-width</code>’ (treating ‘<code
798+
class=css>auto</code>’ as 0) and the largest <i>max-measure
799+
contribution</i> of its contents.
800+
801+
<p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
802+
multi-column element with unrestrained column heights and a computed
803+
‘<code class=property>column-count</code>’ of ‘<code
804+
class=css>auto</code>’ is its ‘<code
805+
class=property>column-width</code>’ multiplied by the number of columns
806+
obtained by taking all allowed column breaks <a href="#CSS3-BREAK"
807+
rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. <!--
808+
The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
809+
These definitions make multicols work well in flexbox,
810+
both in 'stretch' and non-'stretch' cases,
811+
without wasted space or needless overflow.
812+
-->
813+
814+
<p> The <a href="#max-content-measure"><i>max-content measure</i></a> of a
815+
multi-column element with restrained-height columns (i.e. a specified
816+
‘<code class=property>extent</code>’ or ‘<code
817+
class=property>max-extent</code>’) is the <i>measure</i> that would
818+
exactly include all of its columns. It may be approximated by:
819+
820+
<ul>
821+
<li> Laying out the element with column-spanning elements given ‘<code
822+
class=css>display: none</code>’, and taking a measure that includes all
823+
the columns.
824+
825+
<li> Laying out all of the column-spanning elements into that resulting
826+
measure, and taking the resulting extent.
827+
828+
<li> Subtracting that resulting extent from the specified restraint,
829+
laying out the element without column-spanning elements again into this
830+
adjusted extent, and taking the measure of all its columns as its <a
831+
href="#max-content-measure"><i>max-content measure</i></a>.
832+
</ul>
833+
834+
<p> or by some more accurate method.
835+
836+
<p class=note> This approximation can result in some slack, but avoids
837+
overflow in the most common cases, where the balanced height of the
838+
columns above spanning elements are approximately equal.
839+
840+
<p class=note> In the common case of no column-spanning elements, this
841+
approximation collapses to simply doing a layout, and measuring the
842+
resulting columns.
843843

844844
<h2 id=extrinsic-sizing><span class=secno>5. </span> Extrinsic Size
845845
Determination</h2>
@@ -1147,6 +1147,16 @@ <h3 class=no-num id=other-references> Other references</h3>
11471147
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
11481148
<!---->
11491149

1150+
<dt id=CSS3-BREAK>[CSS3-BREAK]
1151+
1152+
<dd>Rossen Atanassov; Elika J. Etemad. <a
1153+
href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
1154+
Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
1155+
Draft. (Work in progress.) URL: <a
1156+
href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
1157+
</dd>
1158+
<!---->
1159+
11501160
<dt id=CSS3COLOR>[CSS3COLOR]
11511161

11521162
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a

‎css3-sizing/Overview.src.html‎

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -510,70 +510,77 @@ <h3 id='table-intrinsic'>
510510
<h3 id="multicol-intrinsic">
511511
Intrinsic Sizes in Multi-column Layout</h3>
512512

513-
<p class='issue'>
514-
Multi-column elements are different from most in that they grow sideways
515-
when their height is restricted. The ''max-content'' value should be able
516-
to accommodate this somehow, in particular as this is how multi-column
517-
elements work in <a href="http://www.w3.org/TR/css3-writing-modes/#orthogonal-multicol">orthogonal flows</a>.
518-
See also
519-
<a href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0316.html">this explanation</a>
520-
<!-- http://lists.w3.org/Archives/Public/www-style/2011May/0468.html -->
513+
<p>
514+
The <i>min-content measure</i> of a multi-column element
515+
with a computed 'column-width' not ''auto''
516+
is the smaller of
517+
its 'column-width'
518+
and the largest <i>min-measure contribution</i> of its contents.
521519

522-
<!--
520+
<p>
521+
The <i>min-content measure</i> of a multi-column element
522+
with a computed 'column-width' of ''auto''
523+
is the largest <i>min-measure contribution</i> of its contents
524+
multiplied by its 'column-count'
525+
(treating ''auto'' as ''1'').
523526

524-
<p class="issue">
525-
This section is VERY experimental. Feedback is encouraged. Shipping implementations is not.
526-
527-
<p>For multi-column elements laid out with infinite available measure (see
528-
<a href="#orthogonal-multicol">Multi-column Layout in Orthogonal Flows</a>),
529-
the <i>min-content</i> extent is the extent that would result
530-
from taking every permissible pagination break as a column break, and the
531-
<i>max-content</i> extent is the extent that would result from taking
532-
only the forced breaks. For all other multi-column elements it is, like
533-
CSS2.1 block-level boxes, the extent that would be calculated for an
534-
''auto'' extent per [[CSS3MULTICOL]].
535-
536-
<pre>
537-
NOTES FROM ROSSEN:
538-
min-content measure is min(column-width, min-content)
539-
max-content measure is
540-
1. Pass w/ colspans displ: none;
541-
Get width
542-
2. Pass with colspans only in width
543-
Get remaining height
544-
3. Pass w/ spans again using remaining height
545-
Get width
546-
4. Layout in width as final
547-
Will lay out perfectly without colspans; will have some slack but no
548-
overflow when colspans present.
549-
</pre>
527+
<p>
528+
The <i>max-content measure</i> of a multi-column element
529+
with unrestrained column heights
530+
and a computed 'column-count' not ''auto''
531+
is its 'column-count'
532+
multiplied by the larger of
533+
its 'column-width' (treating ''auto'' as 0)
534+
and the largest <i>max-measure contribution</i> of its contents.
550535

551536
<p>
552-
The <i>min-content measure</i> of a multi-column element is
553-
the smaller of its 'column-width' and the <i>min-measure contribution</i>
554-
of its contents.
537+
The <i>max-content measure</i> of a multi-column element
538+
with unrestrained column heights
539+
and a computed 'column-count' of ''auto''
540+
is its 'column-width'
541+
multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]].
542+
543+
<!--
544+
The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
545+
These definitions make multicols work well in flexbox,
546+
both in 'stretch' and non-'stretch' cases,
547+
without wasted space or needless overflow.
548+
-->
555549

556550
<p>
557551
The <i>max-content measure</i> of a multi-column element
558-
with restrained-height columns (i.e. a specified <i>extent<i> or <i>max-extent</i>)
552+
with restrained-height columns (i.e. a specified 'extent' or 'max-extent')
559553
is the <i>measure</i> that would exactly include all of its columns.
560554
It may be approximated by:
555+
561556
<ul>
562-
<li>Laying out the element with column-spanning elements given 'display: none',
557+
<li>
558+
Laying out the element with column-spanning elements given 'display: none',
563559
and taking a measure that includes all the columns.
564-
<li>Laying out all of the column-spanning elements into that resulting measure,
560+
561+
<li>
562+
Laying out all of the column-spanning elements into that resulting measure,
565563
and taking the resulting extent.
566-
<li>Subtracting that resulting extent from the specified restraint,
564+
565+
<li>
566+
Subtracting that resulting extent from the specified restraint,
567567
laying out the element without column-spanning elements again into this adjusted extent,
568568
and taking the measure of all its columns as its <i>max-content measure</i>.
569+
</ul>
570+
569571
<p>
570572
or by some more accurate method.
571573

572-
<p class="note">
573-
This approximation can result in some slack, but avoids overflow in the most common cases,
574+
<p class='note'>
575+
This approximation can result in some slack,
576+
but avoids overflow in the most common cases,
574577
where the balanced height of the columns above spanning elements are approximately equal.
575578

576-
-->
579+
<p class='note'>
580+
In the common case of no column-spanning elements,
581+
this approximation collapses to simply doing a layout,
582+
and measuring the resulting columns.
583+
577584

578585
<h2 id='extrinsic-sizing'>
579586
Extrinsic Size Determination</h2>

0 commit comments

Comments
 (0)