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

csswg/css3-layout new.src.html,1.1,1.2

From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 14 Feb 2012 00:37:16 +0000
To: public-css-commits@w3.org
Message-Id: <E1Rx6OS-0007XA-6M@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv28946

Modified Files:
	new.src.html 
Log Message:
Some more text, some examples adapted to the new syntaxes

Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- new.src.html	13 Feb 2012 15:22:02 -0000	1.1
+++ new.src.html	14 Feb 2012 00:37:14 -0000	1.2
@@ -41,7 +41,7 @@
     <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
 
   <dt>Editor's draft:
-    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</var></a>
+    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
 
   <dt>Previous version:
     <dd><a href="http://www.w3.org/PreviousVersionURI">
@@ -169,7 +169,7 @@
 
 <p>The mapping is done with the 'position' property, which specifies
 in this case into which slot of the template the element goes. The
-template itself is specified on the 'display' property of some
+template itself is specified on the 'grid' property of some
 ancestor of the elements to remap.
 
 <div class=example>
@@ -186,8 +186,8 @@
 
 <pre>
 &lt;style type="text/css"&gt;
-  dl { display: "ab"
-                "cd" }
+  dl { grid: "ab"
+             "cd" }
   #sym1 { position: a }
   #lab1 { position: b }
   #sym2 { position: c }
@@ -212,8 +212,8 @@
 <pre>
 @media all
 {
-  body { display: "aaa"
-                  "bcd" }
+  body { grid: "aaa"
+               "bcd" }
   #head { position: a }
   #nav { position: b }
   #adv { position: c }
@@ -221,9 +221,9 @@
 }
 @media all and (max-width: 500px)
 {
-  body { display: "a"
-                  "b"
-                  "c" }
+  body { grid: "a"
+               "b"
+               "c" }
   #head { position: a }
   #nav { position: b }
   #adv { display: none }
@@ -238,7 +238,7 @@
 “zunflower” design</a> of the Zen Garden could be done:
 
 <pre>
-#container { display: "abc" }
+#container { grid: "abc" }
 #intro { position: a; margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
 #supportingText { position: b; box-shadow: 0.5em 0.5em 0.5em }
 #linkList { position: c }
@@ -277,7 +277,7 @@
 contain this:
 
 <pre>
-.group {display: "abc"}
+.group {grid: "abc"}
 .group > div {position: a}
 .group > div + div {position: b}
 .group > div + div + div {position: c}
@@ -291,7 +291,7 @@
 <p>That is not needed for the template, but, on the other hand, if we
 want the template to fit its contents, we would need to say so:
 
-<pre>.group {display: "abc"; width: fit-content}</pre>
+<pre>.group {grid: "abc"; width: fit-content}</pre>
 
 <p>(See [[!CSS3BOX]] for the definition of the 'width' property.) The
 columns of the template are by default all the same size. The columns
@@ -313,7 +313,7 @@
 
 <p>resp.,
 
-<pre>.group {display: "abc" * * 3em}</pre>
+<pre>.group {grid: "abc" * * 3em}</pre>
 
 <div class=figure>
   <p><img src="table3.png" alt="[Two equal cells, third is 3em wide]"
@@ -383,8 +383,8 @@
 <p>with this style sheet
 <pre>
 div.section {
-    display: "@" available
-             "F" available}
+    grid: "*" available
+          "F" available}
 .note {
     position: F;
     content: counter(note) ".\A0" contents;
@@ -392,7 +392,7 @@
     font-size: smaller}
 .note::before {
     content: counter(note);
-    position: @;
+    position: *;
     vertical-align: super;
     font-size: larger}
 </pre>
@@ -437,10 +437,10 @@
 
 <pre>
 #article {
-  display: "A A 4"
-           "A A 4"
-           "1 1 4"
-           "2 3 4";
+  grid: "A A 4"
+        "A A 4"
+        "1 1 4"
+        "2 3 4";
   chains: 1 2 3 4 }
 </pre>
 
@@ -489,8 +489,8 @@
             </p>
             <pre class="example">&lt;style type="text/css"&gt;
     #grid { 
-        display: grid; 
-        grid-columns: 150px 1fr;
+<!--         display: grid; 
+-->        grid-columns: 150px 1fr;
         grid-rows: 50px 1fr 50px
     }
 &lt;/style&gt;</pre>
@@ -595,8 +595,8 @@
             </p>
             <pre class="example">&lt;style type="text/css"&gt;
     #grid { 
-        display: grid; 
-        grid-columns: 150px 1fr; /* two columns */
+<!--        display: grid; 
+-->        grid-columns: 150px 1fr; /* two columns */
         grid-rows: 50px 1fr 50px /* three rows  */
     }
 &lt;/style&gt;</pre>
@@ -613,8 +613,8 @@
             </p>
             <pre class="example">&lt;style type="text/css"&gt;
     #grid { 
-        display: grid; 
-        grid-columns: 150px 1fr;
+<!--        display: grid; 
+-->        grid-columns: 150px 1fr;
         grid-rows: 50px 1fr 50px
     }
 
@@ -624,8 +624,8 @@
     <pre class="example">&lt;style type="text/css"&gt;
     /* equivalent layout to the prior example, but using named lines */
     #grid { 
-        display: grid; 
-        grid-columns: 150px "item1-start" 1fr "item1-end";
+<!--        display: grid; 
+-->        grid-columns: 150px "item1-start" 1fr "item1-end";
         grid-rows: "item1-start" 50px 1fr 50px "item1-end"
     }
 
@@ -647,8 +647,8 @@
             <pre class="example">&lt;style type="text/css"&gt;
     /* using the template syntax */
     #grid  { 
-        display: grid; 
-        grid-template: "ad"
+<!--        display: grid; 
+-->        grid-template: "ad"
                        "bd"
                        "cd";
         grid-columns: 150px 1fr;
@@ -667,9 +667,6 @@
         </div>
         
     <!--End Section: Core Concepts of the Grid-->
-    </div>
-
-    <div id="grid-declaration" class="section">
 
 <p class=issues>Add slots.
 
@@ -678,20 +675,39 @@
 <h2 id=display>
 Declaring a grid template</h2>
 
-<p class=issue>If any one of : 'grid-template', grid-rows' and
-'grid-columns' is not its intial value, the element is a template
-element.
+<p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
+for its descendants) if it generates a
+a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" >block
+container box</a> [[!CSS21]] and one or more of the following is true:
+
+<ul>
+<li>The element's 'grid-template' is not ''none''.
+<li>The element's 'grid-rows' is not ''auto''.
+<li>The element's 'grid-columns' is not ''auto''.
+</ul>
+
+<p>These properties are defined below.
+
+<p class=note>Block containers are, informally, elements that can have
+block elements as children, such as blocks, inline blocks or table
+cells, but not inline elements or replaced elements.
 
 <p class=issue>What if an element has both 'columns' and
-'grid-template', is it a grid or a column element? (or does the column
-apply to the default slot?)
+'grid-template', is it a grid element or a column element? (or do the
+columns apply to the default slot?)
 
-<p class=issue>Use 'fr' unit (as in css3-grid-align)instead of '* (as
+<p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
 in css3-layout).
 
+
+
 <h3>Declaring a template: 'grid-template'</h3>
 
-  <table class=propdef>
+<p>The 'grid-template' property assigns a grid to an element, defines
+named slots in the grid, and can also designate a slot as the default
+slot.
+
+<table class=propdef>
     <tr>
       <th>Name:
       <td><dfn>grid-template</dfn>
@@ -703,7 +719,9 @@
       <td>none
     <tr>
       <th>Applies to:
-      <td><em>block containers</em> [link to CSS 2.1]
+      <td><a
+      href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
+      >block container elements</a> [[!CSS21]]
     <tr>
       <th>Inherited:
       <td>no
@@ -722,30 +740,65 @@
     <tr>
       <th>Canonical order:
       <td><abbr title="follows order of property value definition">per
-		grammar<abbr>
+		grammar</abbr>
   </table>
 
-<p>Use '*' (instead of '@' as in css3-layout) for the default slot.
+<p>Each string consist of one or more asterisks (“*”), letters,
+periods (“.”), spaces and tabs. Each string represents one row in the
+template, each symbol other than a space or tab represents one
+column in that row. Spaces and tabs have no meaning. They may be added
+for readability.
+
+<p>The symbols in the template have the following meaning
+<dl>
+  <dt>a letter
+    <dd>slot for content.
+  <dt>*
+    <dd>(asterisk) default slot for content.
+  <dt>.
+    <dd>(period) white-space.
+</dl>
+
+<p>Multiple identical letters in adjacent rows or columns form a
+single <dfn>slot</dfn> that spans those rows and columns. Ditto for
+multiple “*”s. Uppercase and lowercase letters are considered to be
+different letter (i.e., the template is case-sensitive).
+
+<p class=issue>Or case-insensitive? Case-sensitivity gives more choice
+for letters, but it means that 'position: a' and 'POSITION: A' do not
+mean the same thing.
+
+<p>Non-rectangular slots and multiple slots with the same
+letter are illegal. A template without any letter or
+“*” is illegal. A template with more than one “*” slot is illegal. 
+These errors cause the declaration to be ignored.
+
+<p class=note>Note: non-rectangular and disconnected regions
+may be permitted in a future update of CSS.
+
+<p>Rows with fewer columns than other rows are implicitly padded with
+periods (“.”).
+
+<p>Each slot (letter or “*”) acts as a block element for its
+contents.
 
 <p class=issue>Should it be possible to make grid template
 orientation/direction relative to writing mode?
 
-<p class=issue>Define what happens if template and
-grid-rows/grid-columns have different number of rows/columns. Template
-wins?
+
 
 <h3>Specifying the widths of columns: 'grid-columns'</h3>
 
 <p>The 'grid-columns' property specifies the sizes of the columns of a
-	grid.
+grid.
 
-  <table class=propdef>
+<table class=propdef>
     <tr>
       <th>Name:
       <td><dfn>grid-columns</dfn>
     <tr>
       <th><a href="#values">Value</a>:
-      <td>auto | <var>&lt;track-list&gt;</var>
+      <td>auto | <var>&lt;track-size&gt;</var>+
     <tr>
       <th>Initial:
       <td>auto
@@ -753,7 +806,7 @@
       <th>Applies to:
       <td><a
       href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
-      >block containers</a>
+      >block container elements</a> [[!CSS21]]
     <tr>
       <th>Inherited:
       <td>no
@@ -772,34 +825,110 @@
     <tr>
       <th>Canonical order:
       <td><abbr title="follows order of property value definition">per
-		grammar<abbr>
-  </table>
+		grammar</abbr>
+</table>
 
 <p>Where
 
 <pre class=prod>
-<var>&lt;track-list&gt;</var> = <var>&lt;track-size&gt;</var>+
-<var>&lt;track-size&gt;</var> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> |
+<var>&lt;track-size&gt;</var> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * |
   <var>&lt;fraction&gt;</var> | <var>&lt;minmax&gt;</var> | min-content | max-content
 <var>&lt;minmax&gt;</var> = minmax( <var>&lt;track-size&gt;</var> , <var>&lt;track-size&gt;</var> )
 </pre>
 
-<p>If the value is 'auto' and 'grid-template' is not 'none', the
-effect is as if as many '1fr' are specified as needed. If...
+<p>Each <dfn><var>&lt;track-size&gt;</var></dfn> 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>Each <var>&lt;track-size&gt;</var> can be one of the following:
+
+<dl>
+  <dt><var>&lt;length&gt;</var>
+
+  <dd>An explicit width for that column. Negative values are illegal.
+
+  <dt><var>&lt;fraction&gt;</var>
+
+  <dd>(A non-negative number followed by 'fr'.) A fraction of the
+  remaining space, see <a href="#fraction-values-fr" >Fraction
+  values</a> below.
+
+  <dt>*
+
+  <dd>(Asterisk.) All columns with a width of '*' have the same width.
+
+  <dt><var>&lt;percentage&gt;</var>
+
+  <dd>Expresses a size as a percentage of the a-priori
+  width. <span class=issue>When the width of the <span>grid
+  element</span> is dependent on content, the result is
+  undefined.</span>
+
+  <dt>max-content,
+  <dt>min-content
+
+  <dd>The column's width is determined by its contents. See the
+  <a href="#colwidth">algorithm</a> below.
+
+  <dt>minmax(<var>p</var>,<var>q</var>)
+
+  <dd>The column's width is constrained to be greater than or equal
+  to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
+  and <var>q</var> stand for [ <var>&lt;length&gt;</var> | max-content
+  | min-content | * ]. There may be white space around the <var>p</var>
+  and <var>q</var>. If <var>q</var> &lt; <var>p</var>,
+  then <var>q</var> is ignored and
+  ''minmax(<var>p</var>,<var>q</var>)'' is treated as
+  'minmax(<var>p</var>,<var>p</var>)'.
+
+  <dt>fit-content
+
+  <dd>Equivalent to 'minmax(min-content, max-content)'.
+</dl>
+
+<div class=issue>Which is easier, '1fr' or '*'? Or do we need both?
+<pre>
+grid-template: "a . c";
+grid-columns: 1fr 1em 3fr;
+</pre>
+<p>or
+<pre>
+grid-template: "a . c c c";
+grid-columns: * 1em * * *;
+</pre>
+</div>
+
+<p class=issue>Do we need percentages? It seems in practice a fraction
+of the remaining space is all that is necessary.
+
+<p class=issue>Flex?
+
 
 
 <h3>Specifying the height of rows: 'grid-rows'</h3>
 
-<p>The 'grid-columns' property specifies the sizes of the columns of a
-	grid.
+<p>The 'grid-rows' property specifies the sizes of the rows of a grid.
 
-  <table class=propdef>
+<table class=propdef>
     <tr>
       <th>Name:
       <td><dfn>grid-rows</dfn>
     <tr>
       <th><a href="#values">Value</a>:
-      <td>auto | <var>&lt;track-list&gt;</var>
+      <td>auto | <var>&lt;track-size&gt;</var>+
     <tr>
       <th>Initial:
       <td>auto
@@ -807,7 +936,7 @@
       <th>Applies to:
       <td><a
       href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
-      >block containers</a>
+      >block container elements</a> [[!CSS21]]
     <tr>
       <th>Inherited:
       <td>no
@@ -826,8 +955,9 @@
     <tr>
       <th>Canonical order:
       <td><abbr title="follows order of property value definition">per
-		grammar<abbr>
-  </table>
+		grammar</abbr>
+</table>
+
 
 <p class=issue>Flex?
 
@@ -853,8 +983,8 @@
             </ul>
             <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>
-            <br>
+
+
             <p class="issue">
                 Flex could also be allowed as a sizing function for a <a href="#grid-track">Grid Track</a>.
             </p>
@@ -878,7 +1008,6 @@
 grid-rows: (10px);
 grid-rows: calc(4em - 5px)</pre>
         <!--End Section: Grid-columns and Grid-rows Properties-->
-        </div>
 
         <div id="fraction-values-fr" class="section">
         <h4><span class="secno">6.5.1 </span>Fraction Values: 'fr'</h4>
@@ -944,9 +1073,73 @@
 
 <p class=issue>Flex?
 
+
+
+<h3>Computing the widths of the slots</h3>
+
+<p class=issue>If a slot has a 'writing-mode' of 'vertical-rl' or
+'vertical-lr', 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>Computing the height of the slots</h3>
+
+<p class=issue>If a slot has a 'writing-mode' of 'horizontal', 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>The 'grid' shorthand property</h3>
 
-<p>[Syntax with template and sizes all in one, as in css3-layout]
+<p>The 'grid' property is a shorthand for 'grid-template',
+'grid-columns' and 'grid-rows'.
+
+<table class=propdef>
+    <tr>
+      <th>Name:
+      <td><dfn>grid</dfn>
+    <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>*
+    <tr>
+      <th>Initial:
+      <td>none
+    <tr>
+      <th>Applies to:
+      <td><a
+      href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
+      >block container elements</a> [[!CSS21]]
+    <tr>
+      <th>Inherited:
+      <td>no
+    <tr>
+      <th>Animatable:
+      <td>see individual properties
+    <tr>
+      <th>Percentages:
+      <td>see individual properties
+    <tr>
+      <th>Media:
+      <td>visual
+    <tr>
+      <th>Computed&nbsp;value:
+      <td>see individual properties
+    <tr>
+      <th>Canonical order:
+      <td>N/A
+</table>
+
+<p>[Explain how a value is split into values for the three properties.]
+
 
 
 <h2 id=positioning>
@@ -957,7 +1150,7 @@
 <p class=issue>is it (row,column) or (column,row)?
 
 <p class=issue>Use negative numbers to count backwards from the last
-columns/rows.
+columns/rows?
 
 <p class=issue>What if the numbers refer to a non-existing row or
 column? Automatically created (see repeating below)? Ignored?
@@ -995,9 +1188,50 @@
     <tr>
       <th>Canonical order:
       <td><abbr title="follows order of property value definition">per
-		grammar<abbr>
+		grammar</abbr>
   </table>
 
+<div class=issue>
+<p>css3-grid-align allows to define a position either by saying how
+many rows/columns it spans, or by saying  at which row and column
+it ends. Some possible interpretations of four numbers:
+<ol>
+<li>'1 3 / 5 4' = start at column 1 row 3, span 5 columns and 4 rows
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x x . .
+x x x x x . .
+x x x x x . .
+x x x x x . .
+. . . . . . .
+</pre>
+<li>'1 3 / 5 4' = start at column 1 row 3, end with column 5 row 4
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x x . .
+x x x x x . .
+. . . . . . .
+. . . . . . .
+. . . . . . .
+</pre>
+<li>'1 3 / 5 4' = start at column 1 row 3, end <em>before</em> column
+5 row 4
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x . . .
+x x x x . . .
+. . . . . . .
+. . . . . . .
+. . . . . . .
+</pre>
+</ol>
+
+<p>Do we need only one? Which one is the easiest to remember?
+</div>
+
 <p class=issue>If an element is a descendant of an absolutely
 positioned element, does the position of this element refer to its own
 nearest grid ancestor or to the nearest grid ancestor of its
@@ -1005,6 +1239,11 @@
 positioned relative to a containing block that is higher up in the
 tree than the nearest ancestor grid)?
 
+<p class=issue>Do we need keywords such as 'position: same' (position
+into same slot as the preceding element with the same grid ancestor),
+'position: next-row' (position into the next slot below the preceding
+element with the same grid ancestor), 'position: next-column' or
+'position: next'?
 
 
 
@@ -1023,8 +1262,8 @@
 some of the slots in a template:
 
 <pre>
-body { display: "aaa"
-                "bcd" }
+body { grid: "aaa"
+             "bcd" }
 body::slot(b) { background: #FF0 }
 body::slot(c), body::slot(d) { vertical-align: bottom }
 </pre>
@@ -1040,8 +1279,8 @@
 the whole of the b slot.
 
 <pre>
-body { display: "aaa"
-                "bcd" }
+body { grid: "aaa"
+             "bcd" }
 body::slot(z) { position: 1 1 / 1 2 }
 </pre>
 </div>
@@ -1060,7 +1299,7 @@
 in combination with a descendant of such an element.
 
 <pre>
-body { display: "a b c" }          /* Make BODY a template element */
+body { grid: "a b c" }             /* Make BODY a template element */
 body::slot(a) { background: #FF0 } /* Color whole slot */
 p::slot(a) { background: #FC0 }    /* Color intersection of P and slot a */
 </pre>
@@ -1078,7 +1317,7 @@
 effect:
 
 <pre>
-DIV { display: "a b b" }                 /* Rule 1 */
+DIV { grid: "a b b" }                    /* Rule 1 */
 DIV::slot(a) { vertical-align: bottom }  /* Rule 2 */
 P::slot(a) { vertical-align: bottom }    /* Rule 3 */
 </pre>
@@ -1091,7 +1330,8 @@
 <li>* 'overflow' (see the sections on <a
 href="#vertical-align">vertical alignment</a> and <a
 href="#paged">paged media</a> below)
-<li class=issue>'block-flow' and 'direction' properties?
+<li class=issue>* 'writing-mode'
+<li class=issue>* 'direction'
 <li>* 'box-shadow'
 <li>font properties
 <li>'color'
@@ -1115,8 +1355,9 @@
 <li>* 'content' <span class=issue>Useful? Gives the first content for
 the slot, more can be added by positioning other elements in the
 slot.)</span>
-<li>* margins [to align the contents of the slot to sides or center is
+<li class=issue>* margins [to align the contents of the slot to sides or center
 	with 'auto']
+<li class=issue>* 'z-index' [if margins can be negative, slots can overlap]
 </ul>
 
 <div class=issue>
Received on Tuesday, 14 February 2012 00:37:18 UTC

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