- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 17 Feb 2012 01:20:54 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv30933
Modified Files:
new.src.html
Log Message:
New set of constraints and target functions to determine optimal sizes
for rows and columns.
Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- new.src.html 15 Feb 2012 13:35:24 -0000 1.9
+++ new.src.html 17 Feb 2012 01:20:51 -0000 1.10
@@ -707,6 +707,28 @@
href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
><dfn>multi-column element.</dfn></a>
+ <p>[[!CSS3-WRITING-MODES]] defines the <dfn>writing-mode</dfn>
+ property, which defines when elements have a <dfn>vertical writing
+ mode</dfn> (text lines are vertical) or a <dfn>horizontal writing
+ mode</dfn> (text lines are horizontal). For brevity, we refer to the
+ former as a <dfn title="vertical|vertical element" >vertical
+ element</dfn> and to the latter as a <dfn
+ title="horizontal|horizontal element" >horizontal element.</dfn>
+
+ <p>[[!CSS3BOX]] defines the intrinsic sizes of boxes.
+
+ <p>Following [[!CSS3-WRITING-MODES]] and [[!CSS3BOX]], we define the
+ <dfn>inline dimension</dfn> of a box, element or slot as meaning
+ either its width or height, depending on whether it is
+ <em>horizontal</em> or <em>vertical,</em> respectively. And
+ likewise: the <dfn>block dimension</dfn> of a box, element or slot
+ <em>at a given inline dimension</em> is its size in the
+ perpendicular dimension.
+
+ <p>'Direction' is defined in [[!CSS21]].
+
+
+
<h3 id="values">
Values</h3>
@@ -910,6 +932,34 @@
block elements as children, such as blocks, inline blocks or table
cells, but not inline elements or replaced elements.
+ <p>The <dfn>number of columns</dfn> of a <span>grid element</span>
+ is defined as follows:
+
+ <ol>
+ <li>If 'grid-template' is not 'none', it determines the number of
+ columns.
+
+ <li>Otherwise, if 'grid-columns' is not 'auto', the number of
+ columns is equal to the number of <var><track-size></var>
+ values in 'grid-columns'.
+
+ <li>Otherwise, the grid has one column.
+ </ol>
+
+ <p>The <dfn>number of rows</dfn> of a <span>grid element</span> is
+ defined as follows:
+
+ <ol>
+ <li>If 'grid-template' is not 'none', it determines the number of
+ rows.
+
+ <li>Otherwise, if 'grid-rows' is not 'auto', the number of rows is
+ equal to the number of <var><track-size></var> values in
+ 'grid-rows'.
+
+ <li>Otherwise, the grid has one row.
+ </ol>
+
<p class=issue>What if an element has both 'columns' and
'grid-template', is it a grid element or a column element? (or do the
columns apply to the default slot?)
@@ -1106,26 +1156,19 @@
<p>Where
<pre class=prod>
-<!-- --><dfn><track-size></dfn> = <var><length></var> | <var><percentage></var> | * |
-<!-- --> <var><fraction></var> | <var><minmax></var> | min-content | max-content
+<!-- --><dfn><track-size></dfn> = <var><length></var> | <var><percentage></var> | * | <var><fraction></var> |
+<!-- --> <var><minmax></var> | min-content | max-content | fit-content
<!-- --><dfn><minmax></dfn> = minmax( <var><track-size></var> , <var><track-size></var> )
</pre>
<p>Each <var><track-size></var> sets the width of a column.
- <p>If an element has <var>N</var> columns, only the
- first <var>N</var> <var><track-size></var> values are used, the
- others are ignored. If there are fewer than <var>N</var> values, the
- missing ones are all assumed to be '1fr'.
-
- <p>The number of columns <var>N</var> of a grid is determined as
- follows:
-
- <ol>
- <li>If 'grid-template' is not 'none', it determines the number of columns.
- <li>Otherwise, the number of columns is equal to the number
- of <var><track-size></var> values in 'grid-columns'.
- </ol>
+ <p>If an element has <span title="number of columns"><var>N</var>
+ columns,</span> only the first <var>N</var>
+ <var><track-size></var> values are used, the others are
+ ignored. If there are fewer than <var>N</var> values, or if the
+ value is 'auto', the missing ones are all '*' <span class=issue>[or
+ '1fr']</span>.
<p>Each <var><track-size></var> can be one of the following:
@@ -1140,7 +1183,7 @@
remaining space, see <a href="#fraction-values-fr" >Fraction
values</a> below.
- <dt>''*'' (Asterisk)
+ <dt>''*'' (asterisk)
<dd>
All columns with a width of '*' have the same width.
@@ -1174,7 +1217,7 @@
<p class="issue">''fit-content'' is normally equivalent to
max(min-content, max(max-content, fill-available)). This
definition doesn't quite make sense here, but should the
- keyword be the same then?
+ keyword be the same then? maybe ''auto''?
</dl>
<div class=issue>
@@ -1193,6 +1236,30 @@
<p class=issue>Flex?
+ <div class="example">
+ <p>The following example:</p>
+ <ul>
+ <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the 'start' of the grid.</li>
+ <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining space away.</li>
+ <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> will be based on the maximum content size of elements
+ occupying the column.</li>
+ <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> is based on
+ the minimum content size of all elements occupying the column, or 1/2 the
+ remaining space, whichever is greater.</li>
+ </ul>
+ <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
+ </div>
+
+ <div class="example">
+ <p>Additional examples of valid <a href="#grid-track">Grid Track</a> definitions:</p>
+ <pre>/* examples of valid track definitions */
+<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
+<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
+<!-- -->grid-rows: (10px);
+<!-- -->grid-rows: calc(4em - 5px)</pre>
+ </div>
+
+
<h3 id="grid-row-sizes">
Specifying the height of rows: 'grid-rows'</h3>
@@ -1234,6 +1301,14 @@
<p>The 'grid-rows' property specifies the sizes of the rows of a grid. It
takes the same values as 'grid-columns'.
+ <p>If an element has <span title="number of rows"><var>N</var>
+ rows,</span> only the first <var>N</var>
+ <var><track-size></var> values are used, the others are
+ ignored. If there are fewer than <var>N</var> values, or if the
+ value is 'auto', the missing ones are all 'fit-content'.
+
+
+
<h3>Default slots</h3>
<p>Every <span>grid element</span> has a <dfn>default slot.</dfn> If
@@ -1242,7 +1317,8 @@
template defines the default slot.
<p class=example>For example, if the template is defined by
- 'grid-template: "..c" "abb" "abb"', then “c” is the default slot.
+ 'grid-template: "..." "..c" "abb" "abb"', then “c” is the default
+ slot.
<p>If the grid has an <em>implicit template</em> (i.e.,
'grid-template' is ''none''), then the default slot is the single,
@@ -1260,11 +1336,11 @@
<p>For example, in this document fragment
<pre>
-<DIV STYLE="grid-template: "ab*">
- <IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+<DIV STYLE="grid: 'ab*'">
+ <IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
This is an
- <EM STYLE="position: *">emphasized</EM>
- <EM STYLE="position: b">(note well!)</EM>
+ <EM STYLE="flow: *">emphasized</EM>
+ <EM STYLE="flow: b">(note well!)</EM>
sentence.
<
</DIV>
@@ -1280,86 +1356,7 @@
</div>
-
-<h3 id="track-sizing">
-Specifying the size of grid tracks</h3>
-
- <p>Where:</p>
- <dl>
- <dt><length></dt>
- <dd>
- An absolute size as defined by CSS3 Values. [[!CSS3VAL]]
- </dd>
- <dt><percentage></dt>
- <dd>
- Expresses a size for a <a href="#grid-track">Grid Track</a> as a
- percentage of the <i>grid element</i>'s logical
- width (for columns) or logical height (for rows).
- When the width or height of the <i>grid element</i>
- is dependent on content, the result is undefined.
- </dd>
- <dt><fraction></dt>
- <dd>
- A non-negative <a href="http://www.w3.org/TR/css3-values/#dimension">dimension</a>
- [[!CSS3VAL]] with the unit identifier ''fr''. Each ''<fraction>''
- value takes a share of the remaining space proportional to its number.
- See <a href="#fraction-values-fr">fraction values</a> for more details.
- </dd>
- <dt>''max-content''
- <dd>
- Refers to the maximum of the max sizes of <a href="#grid-item">Grid
- Item</a>s occupying the <a href="#grid-track">Grid Track</a>.
- </dd>
- <dt>''min-content''
- <dd>
- Refers to the maximum of the min sizes of <i>grid items</i>
- occupying the <a href="#grid-track">Grid Track</a>.
- </dd>
- <dt>''minmax(<var>min</var>, <var>max</var>)''</dt>
- <dd>
- Defines a size range. The size used must be greater than or equal to
- <var>min</var> and less than or equal to <var>max</var>.
- If <var>max</var> < <var>min</var>, then <var>max</var> is ignored
- and ''minmax(<var>min</var>, <var>max</var>)'' is treated as <var>min</var>.
- </dd>
- <dt>''fit-content''<dt>
- <dd>
- Equivalent to ''minmax(min-content, max-content)''.
- </dd>
- </dl>
- <p class="issue">
- Consider whether having undefined behavior for percentage-sized tracks in
- content-sized grids is appropriate. CSS2.1 and CSS3 leave percentage width
- undefined, although there appears to be consistency between browser
- implementations.
-
- <p class="issue">
- Flex could also be allowed as a sizing function for a <a href="#grid-track">Grid Track</a>.
- </p>
-
- <div class="example">
- <p>The following example:</p>
- <ul>
- <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the 'start' of the grid.</li>
- <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining space away.</li>
- <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> will be based on the maximum content size of elements
- occupying the column.</li>
- <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from the prior <a href="#grid-line">Grid Line</a> is based on
- the minimum content size of all elements occupying the column, or 1/2 the
- remaining space, whichever is greater.</li>
- </ul>
- <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
- </div>
-
- <div class="example">
- <p>Additional examples of valid <a href="#grid-track">Grid Track</a> definitions:</p>
- <pre>/* examples of valid track definitions */
-<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
-<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
-<!-- -->grid-rows: (10px);
-<!-- -->grid-rows: calc(4em - 5px)</pre>
- </div>
-
+
<h4 id="fraction-values-fr">
Fraction Values: 'fr'</h4>
@@ -1408,23 +1405,171 @@
<a href="#grid-line">Grid Line</a> not explicitly defined by a
'grid-rows' or grid-columns' property.
-<h3 id="slot-widths">
-Calculating the widths of the slots</h3>
- <p class=issue>If a slot has a vertical writing mode, then the values
- ''max-content'' and ''min-content'' both stand for the <i>block dimension</i>
- [[!CSS3-WRITING-MODES]] of the slot's content.
- <p>[Solve set of constraints as in css3-layout]
+<h3 id="slot-sizes">
+Calculating the widths and heights of the slots</h3>
-<h3 id="slot-heights">
-Computing the height of the slots</h3>
+<p>The UA must choose the widths and heights of all columns and rows
+such that the following constraints are satisfied.
+
+<ul>
+ <li>If the element has an a-priori known content height, then the
+ sum of the heights of all rows must be equal to the element's
+ height.
+
+ <li>If the grid element has an a-priori known content width, then
+ the sum of the widths of all columns must be equal to the element's
+ width.
+
+ <li>Each row whose height is specified as 'min-content',
+ 'max-content', or 'minmax(<var>p</var>,<var>q</var>)' must be no
+ higher than the largest intrinsic minimum height, intrinsic
+ preferred height, or <var>q</var>, respectively, of all the vertical
+ slots in the line that span only one row. <span class=note>(Note
+ that 'fit-content' counts as a 'minmax()')</span>
+
+ <li>Each column whose width is specified as 'min-content',
+ 'max-content', or 'minmax(<var>p</var>,<var>q</var>)' must be no
+ wider than the largest intrinsic minimum width, intrinsic preferred
+ width, or <var>q</var>, respectively, of all the horizontal slots in
+ the line that span only one column.
+
+ <li>Each row with a height specified as a <var><length></var>
+ must have exactly that height.
+
+ <li>Each column with a width specified as
+ a <var><length></var> must have exactly that width.
+
+
+ <li>Each <em>vertical</em> slot that spans at least one row with a
+ height specified as 'max-content' must be at least as high as the
+ preferred intrinsic height of that slot, as defined in [[!CSS3BOX]],
+ plus the slot's vertical padding, border and margin.
+
+ <li>Each <em>horizontal</em> slot that spans at least one column
+ with a width specified as 'max-content' must be at least as wide as
+ the preferred intrinsic width of that slot, as defined in
+ [[!CSS3BOX]], plus the slot's horizontal padding, border and margin.
+
+ <li>Each <em>vertical</em> slot that spans at least one row with a
+ height specified as 'min-content' must be at least as high as the
+ preferred minimum height of that slot, as defined in [[!CSS3BOX]],
+ plus the slot's vertical padding, border and margin.
+
+ <li>Each <em>horizontal</em> slot that spans at least one columns
+ with a height specified as 'min-content' must be at least as wide as
+ the preferred minimum width of that slot, as defined in
+ [[!CSS3BOX]], plus the slot's horizontal padding, border and margin.
+
+
+ <li>All rows with a height specified as '*' must have the same
+ height.
+
+ <li>All columns with a width specified as '*' must have the same
+ width.
+
+ <li>For any pair (<var>i</var>,<var>j</var>) of rows
+ whose <var><row-height></var> values h<sub>i</sub> and
+ h<sub>j</sub> are both specified in 'fr', the computed heights
+ H<sub>i</sub> and H<sub>j</sub> must be such that H<sub>i</sub> *
+ h<sub>j</sub> = H<sub>j</sub> * h<sub>i</sub>. (I.e., their heights
+ are proportional to their number of 'fr' units.)
+
+ <li>For any pair (<var>i</var>,<var>j</var>) of columns
+ whose <var><col-width></var> values w<sub>i</sub> and
+ w<sub>j</sub> are both specified in 'fr', the computed width
+ W<sub>i</sub> and W<sub>j</sub> must be such that W<sub>i</sub> *
+ w<sub>j</sub> = W<sub>j</sub> * W<sub>i</sub>. (I.e., their widths
+ are proportional to their number of 'fr' units.)
+
+</ul>
+
+<p>If it is impossible to choose such widths and heights, then try
+without constraint 1. If it is still impossible, try without
+constraint 2 instead. And, finally, try with both 1 and 2 dropped.
+
+<p>If there are multiple solutions, and constraint 1 was dropped or
+did not apply, then the sizes must additionally be chosen such that
+the sum of the heights of the rows is minimized.
+
+<p>If there are still multiple solutions, and constraint 2 was dropped
+or did not apply, then the sizes must additionally be chosen such that
+the sum of the widths of the columns is minimized.
+
+<p class=note>The width isn't known a-priori, if, e.g., 'width' is
+''auto'' and the element is floating, absolutely positioned,
+inline-block or a child of a block with vertical writing mode.
+
+
+<p>An extra step may be necessary in paged media if a page break
+occurs inside a template (only in the case of an <em>element-based
+template,</em> see <a href="#element-based-page-break" >below</a>). If
+the template, after computing the width and height, is too big to fit
+on the current page, and if a suitable break point exists, the part of
+the template after that break point is put on the next page. The width
+of the containing block on that page may be different if that page has
+different margins from the current page (see [[!CSS3PAGE]]) and thus
+the width and height of that part of the template must be recalculated
+in the new context.
+
+<p class=note>Note that the widths of the columns can be completely
+determined before laying out any of the contents as long as there are
+no columns with a <var><col-width></var> of ''min-content'' or
+''max-content''.
+
+<p class=issue>Do we define restrictions or approximations for slots
+that are part of a <em>chain</em> to avoid complicated optimization
+algorithms?
+
+<p class=note>Note: In a future update of CSS, rows might get a
+property to specify how the height of that row is adjusted in case the
+above calculation yields a template that is less tall than the element
+itself.
+
+<p>The height of a slot is measured as if the slot had one <dfn
+title="anonymous block of a slot">anonymous block</dfn> as a child that
+contains all the slot's contents, and both the slot and the anonymous
+block have a 'block-flow' of ''tb'' and the anonymous
+block's height is computed as a <em>flow root</em> (see “Auto heights
+for flow roots” in [[!CSS3BOX]]). Roughly, this means the height is
+from the top margin edge of the topmost element to the bottom margin
+edge of the bottommost element or of the bottommost float.
+
+<div class=example>
+<p>This example divides the window in three rows and three columns,
+separated by 1em of white space. The middle row and the middle column
+are flexible, the others are fixed at a specific size. The first
+column is 5em wide, the last one 10em.
+
+<pre>
+<style type="text/css">
+ body {
+ height: 100%;
+ display: "a . b . c" /2em
+ ". . . . ." /1em
+ "d . e . f"
+ ". . . . ." /1em
+ "g . h . i" /2em
+ 5em 1em * 1em 10em}
+ #logo {position: a}
+ #motto {position: b}
+ #date {position: c}
+ #main {position: e}
+ #adv {position: f}
+ #copy {position: g}
+ #about {position: h}
+</style>
+<p id=logo><img src=...
+<p id=motto>Making Web pages since 1862
+<p id=date>August 2, 2004
+...</pre>
+</div>
+
+<p class=issue>[Add example with three columns, first two as narrow as
+possible, third one taking up all remaining space.]
- <p>If a slot has a horizontal writing mode, then the values
- ''max-content'' and ''min-content'' both stand for the <em>block
- dimension</em> [[!CSS3-WRITING-MODES]] of the slot's content.
- <p>[Solve set of constraints as in css3-layout]
<h3 id="grid-shorthand">
The 'grid' shorthand property</h3>
@@ -1439,8 +1584,8 @@
<tr>
<th><a href="#values">Value</a>:
<td>none | [ [ <var><string></var> [ /
- <var><track-size></var> ]? ]+ ]
- <var><track-size></var>*
+ <var><row-height></var> ]? ]+ ]
+ <var><col-width></var>*
<tr>
<th>Initial:
<td>none
@@ -1470,8 +1615,27 @@
</table>
<p>[Explain how a value is split into values for the three properties.]
-
+ <p>The 'grid' property is a shorthand for 'grid-template',
+ 'grid-rows' and 'grid-columns'. The value of 'grid-template' is the
+ list of <var><string></var> values. The value of 'grid-rows'
+ is the list of <var><row-height></var> values, with any
+ omitted ones set to 'fit-content'. And the value of 'grid-columns'
+ is the list of <var><col-width></var> values, or 'auto' if
+ there are none.
+
+ <div class=example>
+ <p>For example, the rule
+
+ <pre>grid: "a b c" "a b d"/4em * 10em</pre>
+
+ <p>is the same as
+
+ <pre>
+grid-template: "a b c" "a b d";
+grid-rows: fit-content 4em;
+grid-columns: * 10em;</pre>
+ </div>
<h2 id=positioning>
Positioning slots</h2>
Received on Friday, 17 February 2012 01:20:56 UTC