- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Feb 2012 20:38:35 +0000
- To: public-css-commits@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><style type="text/css">
-<!-- --> #grid {
-<!-- --> display: grid;
-<!-- --> grid-columns: 150px 1fr;
-<!-- --> grid-rows: 50px 1fr 50px
-<!-- --> }
-<!-- --></style></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"><style type="text/css">
+ #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 }
+</style>
+
+<div id="grid">
+ <div id="title">Game Title</div>
+ <div id="score">Score</div>
+ <div id="stats">Stats</div>
+ <div id="board">Board</div>
+ <div id="controls">Controls</div>
+</div></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"><style type="text/css">
+ @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" }
+</style>
+
+<div id="grid">
+ <div id="title">Game Title</div>
+ <div id="score">Score</div>
+ <div id="stats">Stats</div>
+ <div id="board">Board</div>
+ <div id="controls">Controls</div>
+</div></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"><style type="text/css">
+ #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 }
+</style>
+
+<div id="grid">
+ <div id="lower-label">Lower Label</div>
+ <div id="upper-label">Upper Label</div>
+ <div id="track">Track</div>
+ <div id="lower-fill">Lower Fill</div>
+ <div id="upper-fill">Upper Fill</div>
+ <div id="thumb">Thumb</div>
+</div></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"><style type="text/css">
@@ -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"><style type="text/css">
/* 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><style type="text/css">
+<!-- --> #grid {
+<!-- --> display: grid;
+<!-- --> grid-columns: 150px 1fr;
+<!-- --> grid-rows: 50px 1fr 50px
+<!-- --> }
+<!-- --></style></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><percentage></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><fraction></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><slot></var> | <var><integer></var>
- <var><integer></var> [ / <var><integer></var>
- <var><integer></var>? ]?
+ <td>auto | <var><identifier></var> | <var><grid-column></var> / <var><grid-row></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
+ (<identifier>) 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 | <identifier> | <integer> [to? <integer> ]?</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 | <identifier> | <integer> [to? <integer> ]?</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><identifier></var>''</dt>
+ <dd>
+ Use the track occupied by the named slot, as assigned by the
+ grid template.
+ </dd>
+ <dt>''<var><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><integer</var> <var><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><integer</var> to <var><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"><style type="text/css">
+ #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 }
+</style>
+<div id="grid">
+ <div id="A">A</div>
+ <div id="B">B</div>
+</div></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>‘start’ | ‘end’ | ‘center’ |
+ ‘stretch’
+
+ <td>‘stretch’
+
+ <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 | <track-size>+
Received on Tuesday, 14 February 2012 20:38:38 UTC