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

csswg/css3-layout new.html,1.5,1.6 new.src.html,1.7,1.8

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 14 Feb 2012 20:38:35 +0000
To: public-css-commits@w3.org
Message-Id: <E1RxP91-0007mA-6B@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv29809

Modified Files:
	new.html new.src.html 
Log Message:
More spec merging. Also try to combine grid positioning properties so that they cascade sanely.

Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- new.src.html	14 Feb 2012 13:43:21 -0000	1.7
+++ new.src.html	14 Feb 2012 20:38:33 -0000	1.8
@@ -392,50 +392,196 @@
   </div>
 
 <h3 id="grid-intro">
-Grid Rows and Columns</h3>
+Introduction to Grids</h3>
+    
+<h3 id="background">
+Background</h3>
+            
+  <div class="sidefigure">
+    <img class="figure" alt="FIXME" src="images/basic-form.png" />
+    <p class="caption">Application layout example requiring horizontal
+    and vertical alignment.</p>
+  </div>
+
+  <p>As websites evolved from simple documents into complex, interactive
+  applications, tools for document layout, e.g. floats, were not necessarily
+  well suited for application layout. By using a combination of tables,
+  JavaScript, or careful measurements on floated elements, authors discovered
+  workarounds to achieve desired layouts.  Layouts that adapted to the
+  available space were often brittle and resulted in counter-intuitive
+  behavior as space became constrained. As an alternative, authors of many
+  web applications opted for a fixed layout that cannot take advantage of
+  changes in the available rendering space on a screen.
+      
+  <p>The layout capabilities of the Grid address these problems. The Grid
+  provides a mechanism for authors to divide available space for layout
+  into columns and rows using a set of predictable sizing behaviors.
+  Authors can then precisely position and size the building block elements
+  of their application by referencing the <a href="#grid-line">Grid Line</a>s 
+  between the columns and rows, or by defining and referencing a
+  <a href="#grid-cell">Grid Slot</a>, which is a rectangular space covering
+  an intersection of columns and rows.  Figure 1 illustrates a basic layout
+  which can be achieved with the Grid.
 
+        
+<h3 id="space-adapt">Adapting Layouts to Available Space</h3>
   <div class="sidefigure">
-      <img class="figure" alt="Image: Grid Lines." src="images/grid-lines.png">
-      <p class="caption">Grid Lines.</p>
+    <p><img alt="FIXME" src="images/game-smaller.png" />
+    <p class="caption">Five grid items arranged according to content size
+    and available space.</p>
+  </div>
+  <div class="sidefigure">
+    <p><img alt="FIXME" src="images/game-larger.png" />
+    <p class="caption">Growth in the grid due to an increase in available
+    space.</p>
   </div>
 
-  <p><a href="#grid-element">Grid element</a>s use
-  <a href="#grid-line">Grid Line</a>s to divide their space.
-  There are two sets of <a href="#grid-line">Grid Line</a>s: one set
-  defined by the columns parallel to the
-  <a href="http://www.w3.org/TR/css3-writing-modes/#block-flow-dimensions">block flow dimension</a>,
-  and another orthogonal set defined by rows in the
-  <a href="http://www.w3.org/TR/css3-writing-modes/#inline-dimension">inline dimension</a>.
+  <p>The <i>grid element</i> can be used to intelligently
+  reflow elements within a webpage. Figure 2 represents a game with five major
+  areas in the layout: the game title, stats area, game board, score area,
+  and control area. The author's intent is to divide the space for the game
+  such that:
+  <ul>
+    <li>The stats area always appears immediately under the game title.</li>
+    <li>The game board appears to the right of the stats and title.</li>
+    <li>The top of the game title and the game board should always align.</li>
+    <li>The bottom of the game board and the stats area align when the game has reached its minimum height, 
+        but otherwise the game board will stretch to take advantage of all the screen real-estate available to it.
+    </li>
+    <li>The score area should align into the column created by the game and stats area, while the controls are centered under the board.</li>
+  </ul> 
   
-  <p>A <a href="#grid-track">Grid Track</a> is a generic term for the column or
-  row between two <a href="#grid-line">Grid Line</a>s.  Each
-  <a href="#grid-track">Grid Track</a> is assigned a sizing function, which
-  controls how wide or tall the column or row may grow, and thus how far
-  apart two <a href="#grid-line">Grid Line</a>s are. The sizing function
-  specified can be a length, a percentage of the
-  <a href="#grid-element">Grid element</a>'s size, derived from the contents
-  occupying the column or row, or a proportion of the space which remains in
-  the <a href="#grid-element">Grid element</a>. In the last case, remaining
-  space refers to the width or height of the
-  <a href="#grid-element">Grid element</a> after accounting for space already
-  consumed by columns and rows sized with a length, percentage or content.
-  The size can also be specified as a range using a minmax function, which
-  can combine any of the previously mentioned mechanisms to define a min and
-  max size for the column or row.
+  <p>As an alternative to using script to control the absolute position,
+  width, and height of all elements, the author can use the
+  <i>grid element</i>, as shown in Figure 3.
+  The following example shows how an author might achieve all the sizing,
+  placement, and alignment rules declaratively.
 
-  <div class="example">
-    <p>In the following example there are two columns and three rows.  The first column is 150px wide beginning from the starting edge of the <a href="#grid-element">Grid element</a>'s content box.  The second column uses fractional sizing, which is a function of the remaining space in the Grid.  Its size will vary as the width of the <a href="#grid-element">Grid element</a> changes.  If the used width of the <a href="#grid-element">Grid element</a> is 200px, then the second column 50px wide.  If the used width of the <a href="#grid-element">Grid element</a> is 100px, then the second column is 0px and any content positioned in the column will be overflowing the <a href="#grid-element">Grid element</a>.  Sizing occurs in a similar fashion for the rows.
-    <pre>&lt;style type="text/css"&gt;
-<!-- -->  #grid { 
-<!-- -->    display: grid; 
-<!-- -->    grid-columns: 150px 1fr;
-<!-- -->    grid-rows: 50px 1fr 50px
-<!-- -->  }
-<!-- -->&lt;/style&gt;</pre>
+  <p>Note that there are multiple ways to specify the structure of the
+  <a href="#grid-element">Grid</a> and to position and size
+  <i>grid items</i>, each optimized for different scenarios.
+  This example illustrates one that an author may use to define the position
+  and space for each <i>grid item</i> using the
+  'grid-rows' and 'grid-columns' properties of the
+  <i>grid element</i>, 
+  and the 'grid-row' and 'grid-column' properties on each
+  <i>grid item</i>.
+  </p>
+  
+  <pre class="example">&lt;style type="text/css"&gt;
+    #grid { 
+        display: grid;
+
+        /* Two columns: the first sized to content, the second receives the remaining space,   */
+        /* but is never smaller than the minimum size of the board or the game controls, which */
+        /* occupy this column. */
+        grid-columns: auto minmax(min-content, 1fr);
+
+        /* Three rows: the first and last sized to content, the middle row receives the remaining */
+        /* space, but is never smaller than the minimum height of the board or stats areas.       */
+        grid-rows: auto minmax(min-content, 1fr) auto
+    }
+
+    /* Each part of the game is positioned between grid lines by referencing the starting grid line and */
+    /* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
+    /* grid line, which establishes bounds for the part. */
+    #title    { grid-column: 1; grid-row: 1 }
+    #score    { grid-column: 1; grid-row: 3 }
+    #stats    { grid-column: 1; grid-row: 2; grid-row-align: start }
+    #board    { grid-column: 2; grid-row: 1; grid-row-span: 2 }
+    #controls { grid-column: 2; grid-row: 3; grid-column-align: center }
+&lt;/style&gt;
+
+&lt;div id="grid"&gt;
+    &lt;div id="title"&gt;Game Title&lt;/div&gt;
+    &lt;div id="score"&gt;Score&lt;/div&gt;
+    &lt;div id="stats"&gt;Stats&lt;/div&gt;
+    &lt;div id="board"&gt;Board&lt;/div&gt;
+    &lt;div id="controls"&gt;Controls&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="source-independence">
+Source Independence</h3>
+
+  <div class="sidefigure">
+    <p><img alt="FIXME" src="images/game-portrait.png" />
+    <p class="caption">An arrangement suitable for "portrait" orientation.</p>
+  </div>
+  <div class="sidefigure">
+      <p><img alt="FIXME" src="images/game-landscape.png" />
+      <p class="caption">An arrangement suitable for "landscape" orientation.</p>
   </div>
+  
+  <p>Continuing the prior example, the author also wants the game to adapt
+  to the space available on traditional computer monitors, handheld devices, 
+  or tablet computers. Also, the game should optimize the placement of the
+  components when viewed either in landscape or portrait orientation 
+  (Figures 4 and 5). By combining the CSS markup for the
+  <i>grid element</i> with
+  <a href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a>
+  [[MEDIAQ]], the author is able to use the same semantic markup, but
+  rearranged independent of its source order, to achieve the desired layout
+  in both orientations.
+
+  <p>The following example leverages the <a href="#grid-element">Grid</a>'s
+  ability to name the space which will be occupied by a
+  <i>grid item</i>.  This allows the author to avoid
+  rewriting rules for <i>grid items</i> as the
+  <a href="#grid-element">Grid</a>'s definition changes.
+
+  <pre class="example">&lt;style type="text/css"&gt;
+    @media (orientation: portrait) {
+        #grid { 
+            display: grid;
+            
+            /* The rows, columns and cells of the grid are defined visually using the grid-template property.        */
+            /* Each string is a row, and each letter a cell.  The max number of letters in any one string determines */
+            /* the number of columns. */
+            grid-template: "ta"
+                           "sa"
+                           "bb"
+                           "cc";
+            
+            /* Columns and rows created with the template property can be assigned a sizing function with the */
+            /* grid-columns and grid-rows properties. */
+            grid-columns: auto minmax(min-content, 1fr); 
+            grid-rows: auto auto minmax(min-content, 1fr) auto
+        }
+    }
+
+    @media (orientation: landscape) {
+        #grid { 
+            display: grid;
+            
+            /* Again the template property defines cells of the same name, but this time positioned differently */
+            /* to better suit a landscape orientation. */
+            grid-template: "tb"
+                           "ab"
+                           "sc";
+            
+            grid-columns: auto minmax(min-content, 1fr); 
+            grid-rows: auto minmax(min-content, 1fr) auto
+        }
+    }
+
+    /* The grid-cell property places a grid item into named region (cell) of the grid. */
+    #title    { grid-cell: "t" }
+    #score    { grid-cell: "s" }
+    #stats    { grid-cell: "a" }
+    #board    { grid-cell: "b" }
+    #controls { grid-cell: "c" }
+&lt;/style&gt;
+
+&lt;div id="grid"&gt;
+    &lt;div id="title"&gt;Game Title&lt;/div&gt;
+    &lt;div id="score"&gt;Score&lt;/div&gt;
+    &lt;div id="stats"&gt;Stats&lt;/div&gt;
+    &lt;div id="board"&gt;Board&lt;/div&gt;
+    &lt;div id="controls"&gt;Controls&lt;/div&gt;
+&lt;/div&gt;</pre>
 
 <h3 id=accessibility>
-About the Accessibility of Content Reordering</h3>
+A note on the accessibility of content reordering</h3>
   
   <p><em>(This section is not normative.)</em>
   
@@ -480,8 +626,73 @@
     meaning or operation, focusable components receive focus in an order
     that preserves meaning and operability. (Level A)
   </blockquote>
-  
-  
+
+<h3 id="intro-layering">
+Grid Layering of Elements</h3>
+
+  <div class="sidefigure">
+    <p><img alt="FIXME" src="images/control-layering-and-alignment.png" />
+    <p class="caption">A control composed of layered HTML elements.</p>
+  </div>
+
+  <p>In the example shown in Figure 6, the author is creating a custom slider 
+  control. The control has six parts. The lower and upper labels align to the
+  left and right edges of the control. The track of the slider spans the area
+  between the labels. The lower and upper fill parts touch beneath the thumb,
+  and the thumb is a fixed width and height that can be moved along the track
+  by updating the two fraction-sized columns.
+
+  <p>Prior to the <i>grid element</i>, the author would
+  have likely used absolute positioning to control the top and left coordinates, 
+  along with the width and height of each HTML element that comprises the
+  control. By leveraging the <i>grid element</i>,
+  the author can instead limit script usage to handling mouse events on the
+  thumb,  which snaps to various positions along the track as the
+  'grid-columns' property of the <i>grid element</i> is
+  updated.
+
+  <pre class="example">&lt;style type="text/css"&gt;
+    #grid { 
+        display: grid;
+
+        /* The grid-columns and rows properties also support naming grid lines which can then be used */
+        /* to position grid items.  The line names are assigned on either side of a column or row     */
+        /* sizing function where the line would logically exist. */
+        grid-columns:      
+            "start"        auto 
+            "track-start"  0.5fr 
+            "thumb-start"  auto 
+            "fill-split"   auto 
+            "thumb-end"    0.5fr 
+            "track-end"    auto
+            "end";
+    }
+
+    /* Grid-column and grid-row accept a starting and optional endling line.  Below the lines are referred to by name. */
+    /* Beyond any semantic advantage, the names also allow the author to avoid renumbering the grid-row and column     */
+    /* properties of the grid items.  This is similar to the concept demonstrated in the prior example with the        */
+    /* grid-template property during orientation changes, but grid lines can also work with layered grid items that    */
+    /* have overlapping cells of different shapes like the thumb and track parts in this example. */
+    #lower-label { grid-column: "start" }
+    #track       { grid-column: "track-start" "track-end"; grid-row-align: center }
+    #upper-label { grid-column: "track-end"; }
+    
+    /* Fill parts are drawn above the track so set z-index to 5. */
+    #lower-fill  { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 }
+    #upper-fill  { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 }
+    
+    /* Thumb is the topmost part; assign it the highest z-index value. */
+    #thumb       { grid-column: "thumb-start" "thumb-end"; z-index: 10 }
+&lt;/style&gt;
+
+&lt;div id="grid"&gt;
+    &lt;div id="lower-label"&gt;Lower Label&lt;/div&gt;
+    &lt;div id="upper-label"&gt;Upper Label&lt;/div&gt;
+    &lt;div id="track"&gt;Track&lt;/div&gt;
+    &lt;div id="lower-fill"&gt;Lower Fill&lt;/div&gt;
+    &lt;div id="upper-fill"&gt;Upper Fill&lt;/div&gt;
+    &lt;div id="thumb"&gt;Thumb&lt;/div&gt;
+&lt;/div&gt;</pre>  
 
 <h3 id="placement">
 Module interactions</h3>
@@ -516,14 +727,14 @@
   <div class="sidefigure">
     <img class="figure" alt="FIXME" src="images/grid-concepts.png">
     <p class="caption">A diagram illustrating the relationship between
-    the <a href="#grid-element">grid element</a> and its Tracks, Lines,
+    the <i>grid element</i> and its Tracks, Lines,
     Cells and Items.</p>
   </div>
 
   <p>A <dfn id="grid-element">grid element</dfn> is declared in markup by
   setting the display property of an element to ''grid'' or ''inline-grid''.
   Child elements of the Grid are termed <a href="#grid-item">grid items</a>
-  and may be positioned and sized by the <a href="#grid-element">grid element</a>
+  and may be positioned and sized by the <i>grid element</i>
   by leveraging the following logical concepts:
 
   <ul>
@@ -542,7 +753,7 @@
 
   <p><dfn id="grid-track">Grid Tracks</dfn> are the columns and rows of the
   Grid defined with the 'grid-rows' and 'grid-columns' properties on the
-  <a href="#grid-element">Grid element</a>.  Each Track is defined by
+  <i>grid element</i>.  Each Track is defined by
   declaring a sequential list of sizing functions, one for each Track. 
   Tracks define the space between <a href="#grid-line">Grid Line</a>s.
   <pre class="example">&lt;style type="text/css"&gt;
@@ -599,14 +810,14 @@
 Slots</h4>
 
   <p><dfn id="slot">Slots</dfn> are the logical space used to lay out
-  one or more <a href="#grid-item">Grid Item</a>s.
+  one or more <i>grid items</i>.
   <i>slots</i> can be defined explicitly using the 'grid-template'
   property, or anonymously by referencing a region of the Grid using the
-  'grid-row' and 'grid-column' properties on a <a href="#grid-item">Grid Item</a>.
+  'grid-row' and 'grid-column' properties on a <i>grid item</i>.
 
   <p>Whether a <i>slot</i> is created explicitly or implicitly, there
   is no difference in the layout or drawing order of the
-  <a href="#grid-item">Grid Item</a>s which are associated with that
+  <i>grid items</i> which are associated with that
   <i>slot</i>.
   <pre class="example">&lt;style type="text/css"&gt;
 /* using the template syntax */
@@ -649,11 +860,11 @@
   <dl>
     <dt><dfn id="value-def-display--grid">''grid''</dfn></dt>
     <dd>A value of grid causes an element to display as a block-level
-    <a href="#grid-element">Grid element</a>.</dd>
+    <i>grid element</i>.</dd>
   
     <dt><dfn id="value-def-display-inline-grid">''inline-grid''</dfn></dt>
     <dd>A value of inline-grid causes an element to display as an
-    inline-level <a href="#grid-element">Grid element</a>.</dd>
+    inline-level <i>grid element</i>.</dd>
   </dl>
   
 <div class="issue">
@@ -689,12 +900,56 @@
   <p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
   in css3-layout).
 
+<h3 id="grid-lines-tracks">
+Grid Lines and Tracks</h3>
+
+  <div class="sidefigure">
+      <img class="figure" alt="Image: Grid Lines." src="images/grid-lines.png">
+      <p class="caption">Grid Lines.</p>
+  </div>
+
+  <p><i>grid element</i>s use
+  <a href="#grid-line">Grid Line</a>s to divide their space.
+  There are two sets of <a href="#grid-line">Grid Line</a>s: one set
+  defined by the columns parallel to the
+  <a href="http://www.w3.org/TR/css3-writing-modes/#block-flow-dimensions">block flow dimension</a>,
+  and another orthogonal set defined by rows in the
+  <a href="http://www.w3.org/TR/css3-writing-modes/#inline-dimension">inline dimension</a>.
+  
+  <p>A <a href="#grid-track">Grid Track</a> is a generic term for the column or
+  row between two <a href="#grid-line">Grid Line</a>s.  Each
+  <a href="#grid-track">Grid Track</a> is assigned a sizing function, which
+  controls how wide or tall the column or row may grow, and thus how far
+  apart two <a href="#grid-line">Grid Line</a>s are. The sizing function
+  specified can be a length, a percentage of the
+  <i>grid element</i>'s size, derived from the contents
+  occupying the column or row, or a proportion of the space which remains in
+  the <i>grid element</i>. In the last case, remaining
+  space refers to the width or height of the
+  <i>grid element</i> after accounting for space already
+  consumed by columns and rows sized with a length, percentage or content.
+  The size can also be specified as a range using a minmax function, which
+  can combine any of the previously mentioned mechanisms to define a min and
+  max size for the column or row.
+
+  <div class="example">
+    <p>In the following example there are two columns and three rows.  The first column is 150px wide beginning from the starting edge of the <i>grid element</i>'s content box.  The second column uses fractional sizing, which is a function of the remaining space in the Grid.  Its size will vary as the width of the <i>grid element</i> changes.  If the used width of the <i>grid element</i> is 200px, then the second column 50px wide.  If the used width of the <i>grid element</i> is 100px, then the second column is 0px and any content positioned in the column will be overflowing the <i>grid element</i>.  Sizing occurs in a similar fashion for the rows.
+    <pre>&lt;style type="text/css"&gt;
+<!-- -->  #grid { 
+<!-- -->    display: grid; 
+<!-- -->    grid-columns: 150px 1fr;
+<!-- -->    grid-rows: 50px 1fr 50px
+<!-- -->  }
+<!-- -->&lt;/style&gt;</pre>
+  </div>
+
+
 <h3 id="grid-templates">
 Declaring a template: 'grid-template'</h3>
 
-  <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.
+  <p>The 'grid-template' property implicitly assigns a grid to an element
+  and defines named slots in the grid. It can also designate a slot as the
+  default slot, for unpositioned content.
 
   <table class=propdef>
     <tr>
@@ -957,9 +1212,9 @@
     <dt>&lt;percentage&gt;</dt>
     <dd>
       Expresses a size for a <a href="#grid-track">Grid Track</a> as a
-      percentage of the <a href="#grid-element">Grid element</a>'s logical
+      percentage of the <i>grid element</i>'s logical
       width (for columns) or logical height (for rows).
-      When the width or height of the <a href="#grid-element">Grid element</a>
+      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>
@@ -976,7 +1231,7 @@
     </dd>
     <dt>''min-content''
     <dd>
-      Refers to the maximum of the min sizes of <a href="#grid-item">Grid Item</a>s
+      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>
@@ -1049,7 +1304,7 @@
   an absolute length of ''0''.
 
   <p>When remaining space cannot be determined because the width or height of
-  the <a href="#grid-element">Grid element</a> is undefined, fraction-sized
+  the <i>grid element</i> is undefined, fraction-sized
   <a href="#grid-track">Grid Track</a>s
   are sized to their contents while retaining their respective proportions.
   In such cases the size of each fractional <a href="#grid-track">Grid Track</a>
@@ -1068,7 +1323,7 @@
   <p>All <a href="#grid-track">Grid Track</a>s are included in the computed
   value reported for 'grid-rows' and 'grid-columns' regardless of how the
   <a href="#grid-track">Grid Track</a>s were created, e.g. implicit tracks
-  may be created by <a href="#grid-item">Grid Item</a>s referencing a
+  may be created by <i>grid items</i> referencing a
   <a href="#grid-line">Grid Line</a> not explicitly defined by a
   'grid-rows' or grid-columns' property.
 
@@ -1139,27 +1394,39 @@
 
 
 <h2 id=positioning>
-  Positioning content into the template: the ‘position’ property</h2>
+Positioning slots</h2>
+
+  <p>All content positioned into the same slot, whether positioned by
+  name ('position: slot(a)'), by coordinates ('position: 2 3') or implicitly
+  by flowing into the default slot, forms a single flow, with content in
+  document order. The slot establishes a block formatting context and
+  becomes the containing block of the resulting content flow.
+
+  <p class=issue>css3-grid-layout defines things differently: content
+  assigned into the same slot sizes independently, and stacks in
+  the z-axis. Both behaviors are useful: how can we get both?
+
+  <p>Each <i>grid item</i> is contained by a <i>grid slot</i>, i.e.
+  the <i>slot</i> serves as the containing block for the <i>grid
+  item</i>. The slot can be a named slot created by the template,
+  or an anonymous one created by identifying the grid cells occupied
+  by the slot. Content is assigned to a slot by using the either
+  'grid-position' shorthand or the 'grid-row' and 'grid-column'
+  properties.
 
-  <p>The 'position' property is used to position elements into a slot.
-  
-  <p class=issue>is it (row,column) or (column,row)?
-  
-  <p class=issue>Use negative numbers to count backwards from the last
-  columns/rows?
-  
   <p class=issue>What if the numbers refer to a non-existing row or
   column? Automatically created (see repeating below)? Ignored?
-  
+
+<h3>
+Assigning content to a slot: the 'grid-position' property</h3>
+
   <table class=propdef-extra>
     <tr>
       <th>Name:
-      <td><dfn>position</dfn>
+      <td><dfn>grid-position</dfn>
     <tr>
       <th><a href="#values">Value</a>:
-      <td><var>&lt;slot&gt;</var> | <var>&lt;integer&gt;</var>
-      <var>&lt;integer&gt;</var> [ / <var>&lt;integer&gt;</var>
-      <var>&lt;integer&gt;</var>? ]?
+      <td>auto | <var>&lt;identifier&gt;</var> | <var>&lt;grid-column&gt;</var> / <var>&lt;grid-row&gt;</var>
     <tr>
       <th>Initial:
       <td>auto
@@ -1186,17 +1453,16 @@
       <td><abbr title="follows order of property value definition">per grammar</abbr>
   </table>
 
-  <p>All content positioned into the same slot, whether positioned by
-  name ('position: slot(a)'), by coordinates ('position: 2 3') or implicitly
-  by flowing into the default slot, forms a single flow, with content in
-  document order.
+  <p>This property assigns the element to a grid slot, either by name
+  (&lt;identifier&gt;) or by creating an anonymous slot with the given
+  row and column coordinates.
 
 <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
+<li>''1 5 / 3 4'' = start at column 1 row 3, span 5 columns and 4 rows
 <pre>
 . . . . . . .
 . . . . . . .
@@ -1206,7 +1472,7 @@
 x x x x x . .
 . . . . . . .
 </pre>
-<li>'1 3 / 5 4' = start at column 1 row 3, end with column 5 row 4
+<li>''1 to 5 / 3 to 4'' = start at column 1 row 3, end with column 5 row 4
 <pre>
 . . . . . . .
 . . . . . . .
@@ -1216,7 +1482,7 @@
 . . . . . . .
 . . . . . . .
 </pre>
-<li>'1 3 / 5 4' = start at column 1 row 3, end <em>before</em> column
+<li>''1 to 5 / 3 to 4'' = start at column 1 row 3, end <em>before</em> column
 5 row 4
 <pre>
 . . . . . . .
@@ -1245,9 +1511,104 @@
   element with the same grid ancestor), 'position: next-column' or
   'position: next'?
   
+<h3 id=coord-positioning>
+Positioning by row and column: the 'grid-row' and 'grid-column' properties</h3>
 
+  <p class="issue">Trying to combine 'grid-row/column' and 'grid-row/column-span',
+  because they should not cascade independently. (If one style rule tries
+  to place by start/end lines, and another tries to place by span, the
+  result of the cascade will be a mess.)
 
-<h2 id=slot-pseudo>The ''::slot()'' pseudo-element</h2>
+  <table id="grid-column-property" class="propdef">
+    <tr>
+      <th>Name:</th>
+      <td><dfn id="grid-column">grid-column</dfn></td>
+    <tr>
+      <th>Value:</th>
+      <td>auto | &lt;identifier&gt; | &lt;integer&gt; [to? &lt;integer&gt; ]?</td>
+    <tr>
+      <th>Initial:</th>
+      <td>auto</td>
+    <tr>
+      <th>Applies to:</th>
+      <td>Grid Item elements</td>
+    <tr>
+      <th>Inherited:</th>
+      <td>no</td>
+    <tr>
+      <th>Percentages:</th>
+      <td>n/a</td>
+    <tr>
+      <th>Media:</th>
+      <td>visual, paged</td>
+    <tr>
+      <th>Computed value:</th>
+      <td>see text</td>
+  </table>
+
+  <table id="grid-row-property" class="propdef">
+    <tr>
+      <th>Name:</th>
+      <td><dfn id="grid-row">grid-row</dfn></td>
+    <tr>
+      <th>Value:</th>
+      <td>auto | &lt;identifier&gt; | &lt;integer&gt; [to? &lt;integer&gt; ]?</td>
+    <tr>
+      <th>Initial:</th>
+      <td>auto</td>
+    <tr>
+      <th>Applies to:</th>
+      <td>Grid Item elements</td>
+    <tr>
+      <th>Inherited:</th>
+      <td>no</td>
+    <tr>
+      <th>Percentages:</th>
+      <td>n/a</td>
+    <tr>
+      <th>Media:</th>
+      <td>visual, paged</td>
+    <tr>
+      <th>Computed value:</th>
+      <td>see text</td>
+  </table>
+
+  <p>The 'grid-column' and 'grid-row' properties allow creating a slot
+  by independently assigning its row(s) and column(s). Values have the
+  following meanings:
+
+  <dl>
+    <dt>''<var>&lt;identifier&gt;</var>''</dt>
+    <dd>
+      Use the track occupied by the named slot, as assigned by the
+      grid template.
+    </dd>
+    <dt>''<var>&lt;integer</var>''</dt>
+    <dd>
+      Given a specified integer <var>N</var>, position the slot to
+      occupy the <var>N</var>th track.
+    </dd>
+    <dt>''<var>&lt;integer</var> <var>&lt;integer</var>''</dt>
+    <dd>
+      Given the two specified integers <var>N</var> and <var>M</var>,
+      position the slot starting at the <var>N</var>th grid line and
+      spanning <var>M</var> tracks.
+    </dd>
+    <dt>''<var>&lt;integer</var> to <var>&lt;integer</var>''</dt>
+    <dd>
+      Given the two specified integers <var>N</var> and <var>M</var>,
+      position the slot starting at the <var>N</var>th grid line and
+      spanning until the <var>M</var>th grid line.
+      <p class=issue>Or should this be "position the slot to occupy
+      all the tracks from the <var>N</var>th to the <var>M</var>th,
+      inclusive"?</p>
+    </dd>
+  </dl>
+
+  <p>'grid-row' and 'grid-column' values that refer to an undefined
+  line or slot will compute to ''auto''.
+
+<h2 id=slot-pseudo>Styling named slots: the ''::slot()'' pseudo-element</h2>
 
   <p>The slots of a <i>template element</i> can be individually
   addressed with the <dfn>''::slot()''</dfn> pseudo-element.
@@ -1264,8 +1625,7 @@
   </div>
 
   <p class=issue>The ''::slot()'' pseudo-element can also be used to
-  create slots that overlap with other slots and to create alternative
-  (alias) names for slots.
+  create slots that overlap with other slots.
 
   <div class="example issue">
     <p>For example, the following creates a slot that overlaps two other
@@ -1276,32 +1636,21 @@
   <pre>
 <!-- -->body { grid: "aaa"
 <!-- -->             "bcd" }
-<!-- -->body::slot(z) { position: 1 1 / 1 2 }</pre>
+<!-- -->body::slot(foo) { position: 1 1 / 1 2 }</pre>
   </div>
 
   <p>If a '::slot()' pseudo-element refers to a name that already exists
-  in the element's grid element, than any 'position' property on that
+  in the element's grid template, than any 'position' property on that
   pseudo-element is ignored.
   
   <p>If a '::slot()' pseudo-element defines a new slot that coincides
   exactly with another slot in the element's grid element, then it is in
   fact the same slot, and the new name is an alias for that
-  slot. <span class=issue>Unless it has a different 'z-index'?</span>
+  slot. <span class=issue>Unless it has a different 'z-index'? Or are
+  slots independent, even if they have the same position?</span>
   
-  <p>Only the following properties apply to the ''slot()''
-  pseudo-element. Those marked with a * apply only to the ''slot()''
-  pseudo-element of a template element.
-
-  <div class=example>
-    <p>For example, if P is a child of DIV, then the 2nd rule below
-    specifies the alignment of content in slot a, but the 3rd rule has no
-    effect:
-    
-    <pre>
-<!-- -->DIV { grid: "a b b" }                    /* Rule 1 */
-<!-- -->DIV::slot(a) { vertical-align: bottom }  /* Rule 2 */
-<!-- -->P::slot(a) { vertical-align: bottom }    /* Rule 3 */</pre>
-  </div>
+  <p>Only the following properties apply to the '':slot()''
+  pseudo-element:
 
   <ul>
     <li>background properties
@@ -1338,23 +1687,209 @@
   <p class=note>Note that slots can have borders and padding, but no
   margins (cf. table cells). <span class=issue>[still true?]</span>
 
-<h2 id=vertical-align>
-Alignment of elements in a slot</h2>
+<h2 id=slot-layout>
+Layout within a slot</h2>
 
   <p class=issue>Can use the margins of the '::slot()'' pseudo, or
   re-use the 'vertical-align' property (bottom, top, middle, baseline),
   or a new property ('flex-align'?) [Using 'margin' means there needs to
   be another property if baseline alignment is required.]
 
+  <div class="sidefigure">
+    <div class="figure">
+      <p><img alt="FIXME" src="images/horizontal-tb-dir-ltr.png" />
+      <p class="caption">Latin-based language row and column orientation.</p>
+    </div>
+    <div class="figure">
+      <p><img alt="FIXME" src="images/horizontal-tb-dir-rtl.png" />
+      <p class="caption">Arabic language row and column orientation.</p>
+    </div>    
+    <div class="figure">
+      <p><img alt="FIXME" src="images/vertical-rl.png" />
+      <p class="caption">East Asian language row and column orientation.</p>
+    </div>
+  </div>
+
+  <p>A <i>grid item</i>'s alignment within its Cell can
+  be controlled by using the 'grid-column-align' and 'grid-row-align'
+  properties. Alignment refers to the logical edges of the
+  <i>grid item</i>'s <i>slot</i>.
 
+  <p>The <dfn>start</dfn> edge of a column is defined by the inline base
+  direction. The <dfn>start</dfn> edge of a row is defined by block flow
+  direction.  The alignment values refer to the edge of the <i>grid item</i>'s
+  slot against which the <i>grid item</i> will align one of its edges. 
+  Which edge of the <i>grid item</i> actually aligns against the specified
+  edge of the Cell is dependent on whether the <i>grid item</i> shares the
+  same inline text direction and block flow direction as the <i>grid element</i>.
+  All descriptions below assume that the <i>grid item</i> shares the same
+  inline text direction and block flow direction as the <i>grid element</i>.  
+  Refer to the <a href="http://www.w3.org/TR/css3-writing-modes/">CSS Writing
+  Modes Module Level 3</a> for more details about the relationship between
+  parent and child elements with differing writing-modes, and for the
+  definitions of inline direction and block flow direction.
+  [[!CSS3-WRITING-MODES]]
 
+  <div class=example>
+    <p>The next three figures illustrate the placement and orientation of
+    the <i>grid element</i>'s rows, columns, and <i>grid items</i> using
+    different writing modes on the <i>grid element</i>. In each of the
+    figures, the markup shown in the following example is used to place
+    <i>grid item</i> A in column 1, row 1, and <i>grid item</i> B in
+    column 2, row 2. 
+    <i>Grid item</i> A is aligned in each figure to the starting edges of
+    its row and column.  
+    <i>Grid item</i> B is aligned in each figure to the ending edges of
+    its row and column.
+    <pre class="example">&lt;style type="text/css"&gt;
+    #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
+    #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
+    #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end }
+&lt;/style&gt;
 
+&lt;div id="grid"&gt;
+    &lt;div id="A"&gt;A&lt;/div&gt;
+    &lt;div id="B"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+  </div>
 
+<h3 id=alignment>
+Alignment</h3>
 
+  <table id="grid-column-align-property" class="propdef">
+    <tr>
+        <th>Name:</th>
+        <td><dfn id="grid-column-align">grid-column-align</dfn></td>
+    </tr>
+    <tr>
+        <th>Value:</th>
+        <td>'start' | 'end' | 'center' | 'stretch'</td>
+    </tr>
+    <tr>
+        <th>Initial:</th>
+        <td>'stretch'</td>
+    </tr>
+    <tr>
+        <td>Applies to:</td>
+        <td>Grid Item elements</td>
+    </tr>
+    <tr>
+        <td>Inherited:</td>
+        <td>no</td>
+    </tr>
+    <tr>
+        <td>Percentages:</td>
+        <td>n/a</td>
+    </tr>
+    <tr>
+        <td>Media:</td>
+        <td>visual, paged</td>
+    </tr>
+    <tr>
+        <td>Computed value:</td>
+        <td>specified value</td>
+    </tr>
+  </table>
+  <dl>
+    <dt><dfn>''start''</dfn>
+    <dd>
+      Aligns the starting edge of the <i>grid item</i>'s margin box
+      to the starting edge of the <i>grid item</i>'s column.
+    </dd>
+    <dt><dfn>''end''</dfn>
+    <dd>
+      Aligns the end edge of the <i>grid item</i>'s margin box to the
+      end edge of the <i>grid item</i>'s column.
+    </dd>
+    <dt><dfn>''center''</dfn>
+    <dd>
+      Places the center of the <i>grid item</i>'s margin box at the
+      center of the the <i>grid item</i>'s column.
+    </dd>
+    <dt><dfn>''stretch''</dfn>
+    <dd>
+      Ensures that the <i>grid item</i>'s margin box is equal to the
+      size of the <i>grid item</i>'s column.
+    </dd>
+  </dl>
 
+  <table id="grid-row-align-property" class="propdef">
+    <tr>
+        <td>Name:</td>
+        <td><dfn id="grid-row-align">grid-row-align</dfn></td>
+    </tr>
+    <tr>
+        <th>Value:</th>
+        <td>'start' | 'end' | 'center' | 'stretch'</td>
+    </tr>
+    <tr>
+        <td>Initial:</td>
+        <td>'stretch'</td>
+    </tr>
+    <tr>
+        <td>Applies to:</td>
+        <td>Grid Item elements</td>
+    </tr>
+    <tr>
+        <td>Inherited:</td>
+        <td>no</td>
+    </tr>
+    <tr>
+        <td>Percentages:</td>
+        <td>n/a</td>
+    </tr>
+    <tr>
+        <td>Media:</td>
+        <td>visual, paged</td>
+    </tr>
+    <tr>
+        <td>Computed value:</td>
+        <td>specified value</td>
+    </tr>
+  </table>
+  <dl>
+    <dt><dfn>''start''</dfn>
+    <dd>
+      Aligns the starting edge of the <i>grid item</i>'s margin box
+      to the starting edge of the <i>grid item</i>'s row.
+    </dd>
+    <dt><dfn>''end''</dfn>
+    <dd>
+      Aligns the end edge of the <i>grid item</i>'s margin box to the
+      end edge of the <i>grid item</i>'s row.
+    </dd>
+    <dt><dfn>''center''</dfn>
+    <dd>
+      Places the center of the <i>grid item</i>'s margin box at the
+      center of the the <i>grid item</i>'s row.
+    </dd>
+    <dt><dfn>''stretch''</dfn>
+    <dd>
+      Ensures that the <i>grid item</i>'s margin box is equal to the
+      size of the <i>grid item</i>'s row.
+    </dd>
+  </dl>
 
+<h3 id=sizing>
+Calculating the Size of Grid Items</h3>
 
+  <p>The values ''start'', ''end'', and ''center'' all cause the
+  <i>grid item</i> to produce a box sized shrink-to-fit for its
+  cell in accordance with the
+  <a href="http://www.w3.org/TR/css3-box/#shrink-to-fit">CSS3 Box Model</a>.
+  Note that percentage lengths specified on a <i>grid item</i>
+  resolve against the dimensions of the <i>grid slot</i> (i.e.
+  the slot serves as the containing block for the <i>grid item</i>).
+  Percentages specified for margin-top, padding-top, margin-bottom,
+  and padding-bottom resolve against the height of the grid cell,
+  rather than the width of the grid slot. 
+  If the <i>min-content</i> size of the <i>grid item</i>'s box is
+  greater than the size of its slot, it will overflow the bounds
+  of its slot in a direction determined by its alignment.
 
+  <p>A value of ''stretch'' causes the <i>grid item</i>'s to take
+  the <i>fill-available</i> size. Note that this calculation is
+  symmetric for both the width and height of the <i>grid item</i>.
 
 <h2 id="conformance">
 Conformance</h2>

Index: new.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- new.html	14 Feb 2012 13:43:21 -0000	1.5
+++ new.html	14 Feb 2012 20:38:33 -0000	1.6
@@ -166,16 +166,27 @@
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
     <ul class=toc>
-     <li><a href="#grid-intro"><span class=secno>1.1. </span> Grid Rows and
-      Columns</a>
+     <li><a href="#grid-intro"><span class=secno>1.1. </span> Introduction to
+      Grids</a>
 
-     <li><a href="#accessibility"><span class=secno>1.2. </span> About the
-      Accessibility of Content Reordering</a>
+     <li><a href="#background"><span class=secno>1.2. </span> Background</a>
[...1477 lines suppressed...]
+    <tr>
+     <th><a class=property href="#grid-row-align">grid-row-align</a>
+
+     <td>&lsquo;start&rsquo; | &lsquo;end&rsquo; | &lsquo;center&rsquo; |
+      &lsquo;stretch&rsquo;
+
+     <td>&lsquo;stretch&rsquo;
+
+     <td>Grid Item elements
+
+     <td>no
+
+     <td>n/a
+
+     <td>visual, paged
+
+    <tr>
      <th><a class=property href="#grid-rows">grid-rows</a>
 
      <td>auto | &lt;track-size&gt;+
Received on Tuesday, 14 February 2012 20:38:38 UTC

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