W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-layout new.src.html,1.9,1.10

From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 17 Feb 2012 01:20:54 +0000
To: public-css-commits@w3.org
Message-Id: <E1RyCVK-00083V-4t@lionel-hutz.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>&lt;track-size&gt;</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>&lt;track-size&gt;</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>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * |
-<!-- -->                     <var>&lt;fraction&gt;</var> | <var>&lt;minmax&gt;</var> | min-content | max-content
+<!-- --><dfn>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
+<!-- -->  <var>&lt;minmax&gt;</var> | min-content | max-content | fit-content
 <!-- --><dfn>&lt;minmax&gt;</dfn> = minmax( <var>&lt;track-size&gt;</var> , <var>&lt;track-size&gt;</var> )
   </pre>
 
   <p>Each <var>&lt;track-size&gt;</var> sets the width of a column.
 
-  <p>If an element has <var>N</var> columns, only the
-  first <var>N</var> <var>&lt;track-size&gt;</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>&lt;track-size&gt;</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>&lt;track-size&gt;</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>&lt;track-size&gt;</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>&lt;track-size&gt;</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>
-&lt;DIV STYLE="grid-template: "ab*">
- &lt;IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+&lt;DIV STYLE="grid: 'ab*'">
+ &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
  This is an
- &lt;EM STYLE="position: *">emphasized&lt;/EM>
- &lt;EM STYLE="position: b">(note well!)&lt;/EM>
+ &lt;EM STYLE="flow: *">emphasized&lt;/EM>
+ &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
  sentence.
  &lt;
 &lt;/DIV>
@@ -1280,86 +1356,7 @@
 </div>
 
 
-
-<h3 id="track-sizing">
-Specifying the size of grid tracks</h3>
-
-  <p>Where:</p>
-  <dl>
-    <dt>&lt;length&gt;</dt>
-    <dd>
-      An absolute size as defined by CSS3 Values. [[!CSS3VAL]]
-    </dd>
-    <dt>&lt;percentage&gt;</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>&lt;fraction&gt;</dt>
-    <dd>
-      A non-negative <a href="http://www.w3.org/TR/css3-values/#dimension">dimension</a>
-      [[!CSS3VAL]] with the unit identifier ''fr''. Each ''&lt;fraction&gt;''
-      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> &lt; <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>&lt;length&gt;</var>
+  must have exactly that height.
+
+  <li>Each column with a width specified as
+  a <var>&lt;length&gt;</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>&lt;row-height&gt;</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>&lt;col-width&gt;</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>&lt;col-width&gt;</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>
+&lt;style type="text/css"&gt;
+  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}
+&lt;/style&gt;
+&lt;p id=logo&gt;&lt;img src=...
+&lt;p id=motto&gt;Making Web pages since 1862
+&lt;p id=date&gt;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>&lt;string&gt;</var> [ /
-       <var>&lt;track-size&gt;</var> ]? ]+ ]
-       <var>&lt;track-size&gt;</var>*
+       <var>&lt;row-height&gt;</var> ]? ]+ ]
+       <var>&lt;col-width&gt;</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>&lt;string&gt;</var> values. The value of 'grid-rows'
+  is the list of <var>&lt;row-height&gt;</var> values, with any
+  omitted ones set to 'fit-content'. And the value of 'grid-columns'
+  is the list of <var>&lt;col-width&gt;</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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC