WD-css3-layout-20100429 84.9 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard
  http://microformats.org/wiki/rel-license">
  <title>CSS Template Layout Module</title>
  <link href=default.css rel=stylesheet type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Template Layout Module</h1>

   <h2 class="no-num no-toc" id=w3c-working-draft-29-april-2010>W3C Working
    Draft 29 April 2010</h2>

   <dl>
    <dt>This version:

    <dd><a href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">
     http://www.w3.org/TR/2010/WD-css3-layout-20100429</a>

    <dt>Latest version:

    <dd><a href="http://www.w3.org/TR/css3-layout">
     http://www.w3.org/TR/css3-layout</a>

    <dt>Previous version:

    <dd><a href="http://www.w3.org/TR/2009/WD-css3-layout-20090402">
     http://www.w3.org/TR/2009/WD-css3-layout-20090402</a>

    <dt>Editors:

    <dd class=vcard><span class=fn>Bert Bos</span> (<span
     class=org>W3C</span>) <a class=email
     href="mailto:bert@w3.org">bert@w3.org</a>

    <dd class=vcard><span class=fn>César Acebal</span> (<span
     class=org>University of Oviedo</span>)
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> © 2010 <a href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and
    Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    src=diagram.png>

   <p class=caption>A grid with four slots defined by ‘<code
    class=css>display: "aaaaaaa" "bccccdd"</code>’.
  </div>

  <p>CSS is a simple, declarative language for creating style sheets that
   specify the rendering of HTML and other structured documents. This
   specification is part of <em>level 3 of CSS</em> (“CSS3”) and
   contains features to describe layouts at a high level, meant for tasks
   such as the positioning and alignment of “widgets” in a graphical user
   interface or the layout grid for a page or a window, in particular when
   the desired visual order is different from the order of the elements in
   the source document. Other CSS3 modules contain properties to specify
   fonts, colors, text alignment, list numbering, tables, etc.

  <p>The features in this module are described together for easier reading,
   but are usually not implemented as a group. CSS3 modules often depend on
   other modules or contain features for several media types. Implementers
   should look at the various “profiles” of CSS, which list consistent
   sets of features for each type of media.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text “css3-layout” in the subject, preferably like this:
   “[<!---->css3-layout<!---->] <em>…summary of comment…</em>”

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>Changes from the previous draft, apart from editorial changes, include:
   a clarification about using the (proposed) ‘<code
   class=property>gr</code>’ unit inside a template specification; the
   definition of the intrinsic height of a ‘<code class=css>.</code>’
   slot; and the addition of an open issue about setting writing modes on
   individual slots.

  <p>This draft is related to the drafts about positoning with grid units
   (‘<code class=property>gr</code>’) <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>, flexible <abbr
   title="Graphical User Interfaces">GUIs</abbr> <a href="#CSS3-FLEXBOX"
   rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>, and tables <a
   href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>. The CSS
   Working Group is considering combining some or all of these into a single
   specification with all matrix-based layouts.

  <p>The section on <a href="#cr-exit-criteria">“CR exit criteria”</a>
   lists some conditions for this specification to become a W3C
   Recommendation.

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#dependencies"><span class=secno>1 </span>Dependencies on
    other modules</a>

   <li><a href="#introduction"><span class=secno>2 </span>Introduction</a>

   <li><a href="#declaring-templates-the-display-property"><span
    class=secno>3 </span>Declaring templates: the ‘<code
    class=property>display</code>’ property</a>

   <li><a href="#colwidth"><span class=secno>4 </span>Computing the width of
    the slots</a>

   <li><a href="#rowheight"><span class=secno>5 </span>Computing the height
    of the slots</a>

   <li><a href="#position"><span class=secno>6 </span>Flowing content into
    the template: the ‘<code class=property>position</code>’ property</a>


   <li><a href="#slot-pseudo"><span class=secno>7 </span>The ‘<code
    class=css>::slot()</code>’ pseudo-elements</a>

   <li><a href="#vertical-alignment"><span class=secno>8 </span>Vertical
    alignment</a>

   <li><a href="#paged"><span class=secno>9 </span>Page-based templates and
    other templates in paged media</a>

   <li><a href="#stacking-order"><span class=secno>10 </span>Stacking
    order</a>

   <li><a href="#floating-elements-inside-templates"><span class=secno>11
    </span>Floating elements inside templates</a>

   <li><a href="#gr-unit"><span class=secno>12 </span>Definition of the
    ‘<code class=css>gr</code>’ unit in a template element</a>

   <li><a href="#cr-exit-criteria"><span class=secno>13 </span>CR exit
    criteria</a>

   <li><a href="#history"><span class=secno>14 </span>History</a>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=dependencies><span class=secno>1 </span>Dependencies on other
   modules</h2>

  <p>This CSS3 module depends on the following other CSS3 modules:

  <ul>
   <li><cite>CSS syntax module</cite> <a href="#CSS3SYN"
    rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> – <dfn
    id=interactive>interactive</dfn> vs <dfn
    id=non-interactive>non-interactive</dfn> media.

   <li><cite>CSS values and Units module</cite> <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> – <a
    href="/TR/css3-values#strings"> <dfn
    id=ltstringgt><var>&lt;string&gt;</var></dfn></a> and <a
    href="/TR/css3-values#ltlengthgt"> <dfn
    id=ltlengthgt><var>&lt;length&gt;</var></dfn></a>.

   <li><cite>CSS box module</cite> <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> – properties <dfn
    id=width>width</dfn>, <dfn id=height>height</dfn>, <dfn
    id=float>float</dfn>, <dfn id=display>display</dfn> and <dfn
    id=overflow>overflow</dfn>

   <li><cite>CSS text layout</cite> <a href="#CSS3TEXTLAYOUT"
    rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{!CSS3TEXTLAYOUT}}--></a> –
    properties <dfn id=direction>direction</dfn> and <dfn
    id=block-flow>block-flow</dfn>

   <li><cite>CSS positioning</cite> <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a> – property <dfn
    id=z-index>z-index</dfn>

   <li><cite>CSS paged media</cite> <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a> – properties <dfn
    id=page-break-before>page-break-before</dfn>, <dfn
    id=page-break-after>page-break-after</dfn> and <dfn id=page>page</dfn>;
    <a href="/TR/css3-page#page-area0"><dfn id=page-area>page area</dfn></a>
    (in particular its width &amp; height).

   <li><cite>CSS background and borders</cite> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> – property <dfn
    id=background>background</dfn> <span class=issue>and <dfn
    id=box-shadow>box-shadow</dfn>?</span>

   <li><cite>CSS tables</cite> <a href="#CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a> – property <dfn
    id=vertical-align>vertical-align</dfn>. <span class=issue>[or Box
    Module?]</span>
  </ul>

  <p>It has non-normative (informative) references to the following other
   CSS3 modules:

  <ul>
   <li><cite>Selectors</cite> <a href="#SELECT"
    rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
  </ul>

  <p>See <a
   href="http://www.w3.org/TR/CSS21/about.html#property-defs">section 1.4.2
   of CSS level 2</a> <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> for the grammar and other
   notations that this specification uses in property definitions.

  <h2 id=introduction><span class=secno>2 </span>Introduction</h2>

  <p><em>(This section is not normative.)</em>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    src=diagram.png>

   <p class=caption>Four regions, called a, b, c and d, each receive a part
    of a document
  </div>

  <p class=mtb>The styling of a Web page, a form or a graphical user
   interface can roughly be divided in two parts: (1) defining the overall
   “grid” of the page or window and (2) specifying the fonts, indents,
   colors, etc., of the text and other objects. The two are not completely
   separate, of course, because indenting or coloring a text influences the
   perceived grid as well. Nevertheless, when one separates the parts of a
   style that should change when the window gets bigger from the parts that
   stay the same, one often finds that the grid changes (room for a sidebar,
   extra navigation bar, big margins, larger images…), while fonts, colors,
   indents, numbering styles, and many other things don't have to change,
   until the size of the window becomes extreme.

  <p>The properties in this specification work by associating a <em>layout
   policy</em> with an element. Rather than letting an element lay out its
   descendants in their normal order as inline text or as blocks of text (the
   policies available in CSS level 1), the policy defined in this module,
   called <em>template-based positioning,</em> gives an element an invisible
   grid for aligning descendant elements.

  <p>Because layouts on the Web have to adapt to different window and paper
   sizes, the rows and columns of the grid can be made fixed or flexible in
   size.

  <p>The typical use cases for these properties include:

  <ul>
   <li>Complex Web pages, with multiple navigation bars in fixed positions,
    areas for advertisements, etc.

   <li>Complex forms, where the alignment of labels and form fields may be
    easier with the properties of this module than with the properties for
    tables and margins.

   <li>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
    complex ways and have to stay aligned (and not wrap, for example) when
    the window is resized.

   <li>Paged displays (e.g., printed media) where each page is divided in
    fixed areas for different kinds of content.
  </ul>

  <p>Template-based positioning is an alternative to absolute positioning,
   which, like absolute positioning, is especially useful for aligning
   elements that don't have simple relationships in the source (parent-child,
   ancestor-descendant, immediate sibling). But in contrast to absolute
   positioning, the elements are not positioned with the help of horizontal
   and vertical coordinates, but by mapping them into slots in a table-like
   template. The relative size and alignment of elements is thus governed
   implicitly by the rows and columns of the template. A template doesn't
   allow elements to overlap, but it provides layouts that adapt better to
   different widths.

  <p>The mapping is done with the ‘<a href="#position0"><code
   class=property>position</code></a>’ property, which specifies in this
   case into which slot of the template the element goes. The template itself
   is specified on the ‘<a href="#display0"><code
   class=property>display</code></a>’ property of some ancestor of the
   elements to remap.

  <div class=example>
   <p>In this example, the four children of an element are assigned to four
    slots (called a, b, c and d) in a 2×2 template. (All mark-up examples in
    this specification are HTML fragments, unless otherwise stated.)

   <div class=sidefigure>
    <p><img alt="Image: sample rendering" src=aapje.png>

    <p class=caption>Each element occupies one slot. In this template, all
     slots have the same size.
   </div>

   <pre>
&lt;style type="text/css"&gt;
  dl { display: "ab"
                "cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
&lt;/style&gt;
&lt;dl&gt;
  &lt;dt id=sym1&gt;A
  &lt;dd id=lab1&gt;A is een aapje
  &lt;dt id=sym2&gt;B
  &lt;dd id=lab2&gt;B is de bakker
&lt;/dl&gt;
</pre>
  </div>

  <div class=example>
   <p>Templates can also help with device-independence. This example uses
    Media Queries <a href="#MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to change the overall
    layout of a page from 3-column layout for a wide screen to a 1-column
    layout for a narrow screen. It assumes the page has been marked-up with
    logical sections with IDs.

   <pre>
@media all
{
  body { display: "aaa"
                  "bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { position: c }
  #body { position: d }
}
@media all and (max-width: 500px)
{
  body { display: "a"
                  "b"
                  "c" }
  #head { position: a }
  #nav { position: b }
  #adv { display: none }
  #body { position: c }
}</pre>
  </div>

  <div class=example>
   <p>Elements can be positioned this way, but not made to overlap, unless
    with negative margins. Here is how the <a
    href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
    “zunflower” design</a> of the Zen Garden could be done:

   <pre>
#container { display: "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 }
</pre>
  </div>

  <div class=example>
   <p>Template-based positioning borrows some concepts from table layout, in
    particular the idea of aligning elements in rows and columns, so that
    they constrain each other's size. But there are also differences. This
    example shows some of them. Assume this document fragment:

   <pre>
&lt;div class=group>
 &lt;div>aa aa aa aa aa aa&lt;/div>
 &lt;div>bbb&lt;/div>
 &lt;div class=menu>ccccc&lt;/div>
&lt;/div>
</pre>

   <p>We can lay it out as three columns, as the following illustrations
    show. The style sheet would contain the following.

   <pre>
.group {display: table}
.group > div {display: table-cell}
</pre>

   <div class=figure>
    <p><img alt="[Three unequal cells]" src=table1.png>

    <p class=caption>Example of rendering with a table.
   </div>

   <p>We can also use a template, in which case the style sheet would contain
    this:

   <pre>
.group {display: "abc"}
.group > div {position: a}
.group > div + div {position: b}
.group > div + div + div {position: c}
</pre>

   <p>By default, the table is as wide as needed to fit its contents. To make
    sure it is as wide as its containing block, we need to add

   <pre>.group {display: table; width: 100%}</pre>

   <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>

   <p>(See <a href="#CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> for the definition of
    the ‘<a href="#width"><code class=property>width</code></a>’
    property.) The columns of the template are by default all the same size.
    The columns of the table satisfy certain constraints, but the exact size
    is not defined. We can make them all the same by adding a rule (see <a
    href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>):

   <pre>.group {display: table; width: 100%; table-layout: fixed}</pre>

   <div class=figure>
    <p><img alt="[Three equal cells]" src=table2.png>

    <p class=caption>Example of rendering with equal columns.
   </div>

   <p>In both styles, we can set a column to a certain size:

   <pre>div.menu {width: 3em}</pre>

   <p>resp.,

   <pre>.group {display: "abc" * * 3em}</pre>

   <div class=figure>
    <p><img alt="[Two equal cells, third is 3em wide]" src=table3.png>

    <p class=caption>Example of rendering with a fixed third column and the
     other two columns of equal width.
   </div>

   <p>If there is an unknown number of columns (children of the div.group
    element), the style sheet for the table model will automatically take
    them into account. The style sheet for the template model, however,
    creates a template of exactly three columns and can't handle tables with
    an unknown number of columns. The extra elements will be added into the
    default slot (in this case the ‘<code class=css>a</code>’ slot).

   <p>In both models, elements can have borders, but only in the table model
    can borders be collapsed, which makes setting borders a little easier in
    the table model:

   <pre>
.group {display: table; border-collapse: collapse}
.group > div {border: solid}
</pre>

   <p>resp.,

   <pre>
.group > div {border: solid; border-left: none}
.group > div:first-child {border-left: solid}
</pre>

   <p>In the template model, the order of the elements is explicit, and thus
    it is possible to reverse the order of the columns:

   <pre>
.group > div {position: c}
.group > div + div {position: b}
.group > div + div + div {position: a}
</pre>

   <div class=figure>
    <p><img alt="[Different contents for the cells]" src=table4.png>

    <p class=caption>Example of rendering with the contents of the three
     columns reversed: the third element is shown in the first slot and the
     first element in the third slot.
   </div>

   <p>In the table model, the order of the rows and columns is given by the
    document source and thus can't be changed.
  </div>

  <div class=example>
   <p>This example shows a way to move notes to the end of a section.
    “Notes” in this example refers to elements in HTML with a class of
    “note”. A fragment of HTML such as

   <pre>
&lt;div class=section>
  &lt;p>The balubious coster of the fifth secter&lt;span
    class=note> The sixth secter coster is a difter
    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
  &lt;p>…
&lt;/div>
</pre>

   <p>with this style sheet

   <pre>
div.section {
    display: "@" available
             "F" available}
.note {
    position: F;
    content: counter(note) ".\A0" contents;
    counter-increment: note;
    font-size: smaller}
.note::before {
    content: counter(note);
    position: @;
    vertical-align: super;
    font-size: larger}
</pre>

   <p>results in a rendering similar to this:

   <div class=figure>
    <p><img alt="Same text, with the SPAN replaced by “(1)” and it
     content moved to the end." src=footnotes.png>

    <p class=caption>Rendering of a text with footnotes.
   </div>
  </div>

  <h2 id=declaring-templates-the-display-property><span class=secno>3
   </span>Declaring templates: the ‘<a href="#display0"><code
   class=property>display</code></a>’ property</h2>

  <table class=propdef-extra>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=display0>display</dfn>

    <tr>
     <td><em>New value:</em>

     <td>inline? [ <a href="#ltstringgt"><var>&lt;string&gt;</var></a> [ / <a
      href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> ]? ]+ <a
      href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>*

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Computed value:</em>

     <td>specified value
  </table>

  <p>An element with this ‘<a href="#display0"><code
   class=property>display</code></a>’ is similar to a table element, in
   that its content is laid out in rows and columns. The two main differences
   are that the number of rows and columns doesn't depend on the content, but
   is fixed by the value of the property; and that the order of the
   descendants in the source document may be different from the order in
   which they appear in the rendered template.

  <p>If the keyword ‘<code class=css>inline</code>’ is present, the
   element is an <em>inline-level</em> element, otherwise it is a
   <em>block-level</em> element <a href="#CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>.

  <p class=note>Note that ‘<a href="#display0"><code
   class=property>display</code></a>’ is extended to apply to ‘<a
   href="#page"><code class=css>@page</code></a>’ rules as well and that it
   has a different default there, viz., ‘<code class=css>"@"</code>’. See
   <a href="#paged">“Templates in paged media”</a> below.
   <!-- If display becomes a shorthand for display-model and
display-role, explain that the former gets the template (and the
latter is inline or block depending on whether the inline
keyword is present). -->


  <p>Each string consist of one or more letters (see <a
   href="#ltlettergt"><var>&lt;letter&gt;</var></a> below), at signs
   (“@”), periods (“.”) and spaces. Each string represents one row in
   the template, each character other than a space represents one column in
   that row. Spaces 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>(at sign) default slot for content.

   <dt>.

   <dd>(period) white-space.
  </dl>

  <p>Multiple identical letters in adjacent rows or columns form a single
   <dfn id=slot>slot</dfn> that spans those rows and columns. Ditto for
   multiple “@”s. Uppercase and lowercase are considered to be the same
   letter (i.e., the template is case-insensitive).

  <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 (“.”) (that will thus not contain any elements).

  <p>Each slot (letter or “@”) acts as a block element for its contents.

  <div class=syntax>
   <p>Each <dfn id=ltrow-heightgt><var>&lt;row-height&gt;</var></dfn> sets
    the height of the preceding row. The default is ‘<code
    class=css>auto</code>’. The values can be as follows:

   <dl>
    <dt><a href="#ltlengthgt"><var class=rhs>&lt;length&gt;</var></a>

    <dd>An explicit height for that row. Negative values make the template
     illegal. If the length is expressed in ‘<code class=css>gr</code>’
     units, these refer to the inherited grid, not the grid defined by the
     template itself (see <a href="#gr-unit">“Definition of the ‘<code
     class=css>gr</code>’ unit in a template element”</a>).

    <dt class=rhs>auto

    <dd>The row's height is determined by its contents. See the <a
     href="#rowheight">algorithm</a> below.

    <dt class=rhs>*

    <dd>(asterisk) All rows with an asterisk will be of equal height. See the
     <a href="#rowheight">algorithm</a> below.
   </dl>
  </div>
  <!-- /syntax -->

  <div class=syntax>
   <p>Each <dfn id=ltcol-widthgt><var>&lt;col-width&gt;</var></dfn> sets the
    width of a column. If there are more <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>s then columns, the
    last ones are ignored. If there are fewer, the missing ones are assumed
    to be ‘<code class=css>*</code>’. Each <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> can be one of the
    following:

   <dl>
    <dt><a href="#ltlengthgt"><var class=rhs>&lt;length&gt;</var></a>

    <dd>An explicit width for that column. Negative values make the template
     illegal.

    <dt class=rhs>*

    <dd>(asterisk.) All columns with a ‘<code class=css>*</code>’ have
     the same width. See the <a href="#colwidth">algorithm</a> below.

    <dt class=rhs>max-content,

    <dt class=rhs>min-content

    <dd>The column's width is determined by its contents. See the <a
     href="#colwidth">algorithm</a> below.

    <dt class=rhs>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 [ <a
     href="#ltlengthgt"><var>&lt;length&gt;</var></a> | 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 ‘<code
     class=css>minmax(<var>p</var>,<var>q</var>)</code>’ is treated as
     ‘<code class=css>minmax(<var>p</var>,<var>p</var>)</code>’.

    <dt class=rhs>fit-content

    <dd>Equivalent to ‘<code class=css>minmax(min-content,
     max-content)</code>’.
   </dl>
  </div>
  <!-- /syntax -->

  <p class=note>Note that it is legal to specify no widths at all. In that
   case, all columns have the same width.

  <p>The orientation of the template is independent of the writing mode
   (‘<a href="#direction"><code class=property>direction</code></a>’ and
   ‘<a href="#block-flow"><code class=property>block-flow</code></a>’
   properties): the first string is the topmost row and the first symbol in
   each string is the leftmost column.

  <div class=example>
   <pre>&lt;style type="text/css"&gt;
  div { display: ".aa..bb." }
  p.left { position: a }
  p.right { position: b }
&lt;/style&gt;
&lt;div&gt;
  &lt;p class=left&gt;Left column
  &lt;p class=right&gt;Right column
&lt;/div&gt;</pre>
  </div>

  <p>An element with a template value for its ‘<a href="#display0"><code
   class=property>display</code></a>’ property is called a <dfn
   id=template-element.>template element.</dfn> An element's <dfn
   id=template-ancestor>template ancestor</dfn> is defined (recursively) as
   follows:

  <ul>
   <li>if the element has ‘<code class=css>position: fixed</code>’,
    ‘<code class=css>position: absolute</code>’, a value of ‘<a
    href="#float"><code class=property>float</code></a>’ that is not
    ‘<code class=css>none</code>’ or the element is the root element,
    than it has no template ancestor.

   <li>else, if the element's parent has a template as its ‘<a
    href="#display0"><code class=property>display</code></a>’, then that
    parent is the element's template ancestor.

   <li>else, the element's template ancestor is the same as its parent's
    template ancestor.
  </ul>

  <h2 id=colwidth><span class=secno>4 </span>Computing the width of the slots</h2>

  <p>First, the <dfn id=intrinsic-minimum-and-intrinsic-preferre
   title="intrinsic minimum width|intrinsic preferred width">intrinsic
   minimum and intrinsic preferred widths</dfn> are defined as follows:

  <ul>
   <li>
    <p>A column with a <a
     href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> of a given <a
     href="#ltlengthgt"><var>&lt;length&gt;</var></a> has intrinsic minimum
     and intrinsic preferred widths both equal to that <a
     href="#ltlengthgt"><var>&lt;length&gt;</var></a>.

   <li>
    <p>A column with a <a
     href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> of ‘<code
     class=css>*</code>’ has an infinite intrinsic preferred width. Its
     intrinsic minimum width is 0.

   <li>
    <p>A column with a <a
     href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> of ‘<code
     class=css>min-content</code>’ has an intrinsic minimum width and
     intrinsic preferred width that are both equal to the largest of the
     intrinsic minimum widths of all the slots in that column:

    <ul>
     <li>The intrinsic minimum width of a “.” is 0.

     <li>The intrinsic minimum width of a letter or “@” is 0 if that slot
      spans two or more columns; otherwise, it is the <em>intrinsic
      minimum</em> width as defined by <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>. For the purpose of
      that definition, the slot is considered as a block with a ‘<a
      href="#block-flow"><code class=property>block-flow</code></a>’ of
      ‘<code class=css>tb</code>’ with its contents as its children.
      <span class=issue>Should the block progression direction be a
      property?</span>
    </ul>

   <li>
    <p>A column with a <a
     href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> of ‘<code
     class=css>max-content</code>’ has an intrinsic minimum width and
     intrinsic preferred width that are both equal to the largest of the
     intrinsic preferred widths of all the slots in that column:

    <ul>
     <li>The intrinsic preferred width of a “.” is 0.

     <li>The intrinsic preferred width of a letter or “@” is the
      intrinsic preferred width as defined by <a href="#CSS3BOX"
      rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>. For the purpose of
      that definition, the slot (which may span several columns) is
      considered as a block with a ‘<a href="#block-flow"><code
      class=property>block-flow</code></a>’ of ‘<code
      class=css>tb</code>’ with its contents as its children. <span
      class=issue>Should the block progression direction be a
      property?</span>
    </ul>

   <li>
    <p>A column with a <a
     href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> of ‘<code
     class=css>minmax(<var>p</var>,<var>q</var>)</code>’ has an intrinsic
     minimum width equal to <var>p</var> and an intrinsic preferred width
     equal to <var>q</var>.
  </ul>

  <p>Next, the <dfn id=layout-algorithm>layout algorithm</dfn> distinguishes
   between elements with and without an a-priori known content width.

  <p class=note>The width isn't known a-priori, if, e.g., ‘<a
   href="#width"><code class=property>width</code></a>’ is ‘<code
   class=css>auto</code>’ and the element is floating, absolutely
   positioned, inline-block or a child of a block with vertical writing mode.


  <ul>
   <li>
    <p>If the element has an a-priori width:

    <ul>
     <li>If the sum of the <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em title="intrinsic
      minimum width">intrinsic minimum widths</em></a> of the columns is
      larger than the element's width, each column is set to its <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em>intrinsic minimum
      width</em></a> and the contents will overflow (see ‘<a
      href="#overflow"><code class=property>overflow</code></a>’).

     <li>If the sum of the <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em title="intrinsic
      minimum width">intrinsic minimum widths</em></a> of the columns is less
      than or equal to the element's width, the columns are widened until the
      total width is equal to the element's width, as follows: all columns
      get the same width, except that no column or span of columns may be
      wider than its <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em>intrinsic
      preferred width.</em></a> If the columns cannot be widened enough, the
      template is left or right aligned in the element's content area,
      depending on whether ‘<a href="#direction"><code
      class=property>direction</code></a>’ is ‘<code
      class=css>ltr</code>’ or ‘<code class=css>rtl</code>’,
      respectively.
    </ul>

    <p class=note>Note: In a future update of CSS, columns might get a
     property to allow them some flexibility to become wider than their
     intrinsic preferred width under certain conditions or by a certain
     amount.

   <li>
    <p>If the element doesn't have an a-priori width:

    <ul>
     <li>If the sum of the <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em title="intrinsic
      minimum width">intrinsic minimum widths</em></a> of the columns is
      wider than the <em>initial containing block,</em> each column is set to
      its <a href="#intrinsic-minimum-and-intrinsic-preferre"><em>intrinsic
      minimum width.</em></a> The element's <em>used width</em> is the sum of
      the widths of the columns.

     <li>If the sum of the <a
      href="#intrinsic-minimum-and-intrinsic-preferre"><em title="intrinsic
      minimum width">intrinsic minimum widths</em></a> of the columns is less
      than or equal to the width of the <em>initial containing block,</em>
      the columns are widened until the total width is equal to the
      <em>initial containing block,</em> as follows: all columns get the same
      width, except that no column or span of columns may be wider than its
      <em>maximum intrinsic width.</em> The element's <em>used width</em> is
      the sum of the widths of the columns.
    </ul>
  </ul>

  <p>An extra step may be necessary in paged media if a page break occurs
   inside a template (only in the case of an <a
   href="#element-based-template."><em>element-based template,</em></a> see
   <a href="#element-based-page-break">below</a>). If the template, after
   computing the width and height, is too big to fit on the current page, and
   if a suitable break point exists, the part of the template after that
   break point is put on the next page. The width of the containing block on
   that page may be different if that page has different margins from the
   current page (see <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>) and thus the width and
   height of that part of the template must be recalculated in the new
   context.

  <p class=note>Note that the widths of the columns can be completely
   determined before laying out any of the contents as long as there are no
   columns with a <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>
   of ‘<code class=css>min-content</code>’ or ‘<code
   class=css>max-content</code>’.

  <h2 id=rowheight><span class=secno>5 </span>Computing the height of the
   slots</h2>

  <p>The height of the template is the smallest possible under the following
   constraints:

  <ol>
   <li>Rows with a height set to <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> have that height.

   <li>No row has a negative height.

   <li>All rows with a height set to ‘<code class=css>*</code>’ are the
    same height.

   <li>Every sequence of one or more rows of which at least one has a height
    set to ‘<code class=css>auto</code>’ is at least as high as every
    letter or “@” slot that spans exactly that sequence of rows.

   <li>If the computed value of the element's ‘<a href="#height"><code
    class=property>height</code></a>’ is ‘<code class=css>auto</code>’,
    then every sequence of one or more rows of which at least one has a
    height set to ‘<code class=css>*</code>’ is at least as high as every
    letter or “@” slot that spans exactly that sequence of rows.

   <li>The whole template is at least as high as the computed value of the
    element's ‘<a href="#height"><code class=property>height</code></a>’,
    unless that value is ‘<code class=css>auto</code>’, or unless all
    rows have a height set to <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a>.
  </ol>

  <p>If the template is higher than the element's ‘<a href="#height"><code
   class=property>height</code></a>’, the element overflows, see ‘<a
   href="#overflow"><code class=property>overflow</code></a>’.

  <p class=note>Note: In a future update of CSS, rows might get a property to
   specify how the height of that row is adjusted in case the above
   calculation yields a template that is less tall than the element itself.

  <p>The height of a slot is measured as if the slot had one <dfn
   id=anonymous-block title="anonymous block of a slot">anonymous block</dfn>
   as a child that contains all the slot's contents, and both the slot and
   the anonymous block have a ‘<a href="#block-flow"><code
   class=property>block-flow</code></a>’ of ‘<code class=css>tb</code>’
   and the anonymous block's height is computed as a <em>flow root</em> (see
   “Auto heights for flow roots” in <a href="#CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>). Roughly, this means the
   height is from the top margin edge of the topmost element to the bottom
   margin edge of the bottommost element or of the bottommost float. <span
   class=issue>Should the block progression direction be a property?</span>

  <p>The intrinsic height of a ‘<code class=css>.</code>’ slot is 0.

  <div class=example>
   <p>This example divides the window in three rows and three columns,
    separated by 1em of white space. The middle row and the middle column are
    flexible, the others are fixed at a specific size. The first column is
    5em wide, the last one 10em.

   <pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    display: "a   .   b   .   c"  /2em
             ".   .   .   .   ."  /1em
             "d   .   e   .   f"
             ".   .   .   .   ."  /1em
             "g   .   h   .   i"  /2em
             5em 1em  *  1em 10em}
  #logo {position: a}
  #motto {position: b}
  #date {position: c}
  #main {position: e}
  #adv {position: f}
  #copy {position: g}
  #about {position: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...</pre>
  </div>

  <p class=issue>[Add example with three columns, first two as narrow as
   possible, third one taking up all remaining space.]

  <h2 id=position><span class=secno>6 </span>Flowing content into the
   template: the ‘<a href="#position0"><code
   class=property>position</code></a>’ property</h2>

  <table class=propdef-extra>
   <tbody>
    <tr>
     <td><em>Name:</em>

     <td><dfn id=position0>position</dfn>

    <tr>
     <td><em>New value:</em>

     <td><a href="#ltlettergt"><var>&lt;letter&gt;</var></a> | same

    <tr>
     <td><em>Percentages:</em>

     <td>N/A

    <tr>
     <td><em>Computed value:</em>

     <td>‘<a href="#ltlettergt"><code
      class=css><var>&lt;letter&gt;</var></code></a>’ or ‘<code
      class=css>static</code>’; see text
  </table>

  <p>This value of the ‘<a href="#position0"><code
   class=property>position</code></a>’ property specifies into which row
   and column of a template the element is placed. The <dfn
   id=ltlettergt>&lt;letter&gt;</dfn> must be a single letter, with category
   Lu, Ll or Lt in Unicode <a href="#UNICODE"
   rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>), or a “@” symbol.

  <dl>
   <dt><a href="#ltlettergt"><var>&lt;letter&gt;</var></a>

   <dd>The element is taken out of the flow of its parent and put into the
    specified slot in its <a href="#template-ancestor"><em>template
    ancestor.</em></a> If there is no slot of that name, the computed value
    is ‘<code class=css>static</code>’.

   <dt>same

   <dd>A value of ‘<code class=css>same</code>’ instead of a letter
    computes to the same letter as the most recent element with a letter as
    position that has the same <em title="element's template
    ancestor">template ancestor</em>. If there is no such element, the value
    computes to ‘<code class=css>static</code>’.
  </dl>

  <p id=containing-block>The <em>containing block</em> of an element with one
   of these values for ‘<a href="#position0"><code
   class=property>position</code></a>’ is the slot in the template into
   which it is flowed.

  <p>Multiple elements may be put into the same slot. They will be laid-out
   according to their ‘<a href="#display0"><code
   class=property>display</code></a>’ property in the order they occur in
   the source document.

  <p>The content of a <a href="#template-element."><em>template
   element</em></a> is put in the slot marked with “@”s. If there is no
   such slot, the content is put in the first (leftmost) slot on the first
   row that doesn't consist of only “.”.

  <div class=example>
   <p>A common markup in HTML for illustrations with captions is as follows:

   <pre>
&lt;div class=figure>
 &lt;p>&lt;img src="paul.jpg" alt="...">
 &lt;p class=caption>A pond in a playground in Amsterdam
&lt;/div>
</pre>

   <p>The caption can be put above the image by using a template as follows:

   <pre>
div.figure {display: "aaa"
                     ".b."
                     * min-content *}
div.figure p {position: b}
div.figure p.caption {position: a; text-align: center}
</pre>

   <p>The caption can be wider than the image and the image will be centered.


   <p>When the figure is floating, it is probably better to not let the
    caption become wider than the image (unless the caption cannot be made
    narrow enough):

   <pre>
div.figure {float: right; display: "a" "b" min-content}
div.figure p {position: b}
div.figure p.caption {position: a; text-align: center}
</pre>
  </div>
  <!--
<div class=example>
<p>The FIG element, that was once proposed for HTML, has an attribute
that points to an image, a CAPTION child and some fallback text. The
template below uses “@” to indicate where the image (or the fallback)
goes, in relation to the caption.

<pre>
/* &lt;FIG SRC=...&gt;&lt;CAPTION&gt;...&lt;/&gt; Fallback&lt;/&gt; */
FIG {
  /* See Generated Content Module */
  content: attr(SRC, url), normal;
  /* Caption may be wider than image */
  display: ".@."
           "xxx"
           * min-content * }
CAPTION { position: x }</pre>
</div>
-->

  <div class=example>
   <p>In this example, a form is laid out on a grid, with two labels and two
    input boxes and a submit and a reset button:

   <pre>
form {
  border: thin solid;
  display: "aaaa.bbbb"
           "........."/1em
           "cccc.dddd"
           "........."/1em
           "...ee..ff" }
label[for=minv] { position: a }
input#minv { position: b; display: block }
label[for=maxv] { position: c }
input#maxv { position: d; display: block }
input[type=submit] { position: e; display: block }
input[type=reset] { position: f; display: block }
</pre>

   <p>Here is the fragment of HTML that the style is applied to:

   <pre>
&lt;form action="./"&gt;
  &lt;label for=minv&gt;Enter minimum value:&lt;/label&gt;
  &lt;input id=minv name=minv&gt;
  &lt;label for=maxv&gt;Enter maximum value:&lt;/label&gt;
  &lt;input id=maxv name=maxv&gt;
  &lt;input type=submit value="OK"&gt;
  &lt;input type=reset value="Reset"&gt;
&lt;/form&gt;
</pre>

   <p>The addition of ‘<code class=css>display: block</code>’ causes the
    form controls to use the width computation of blocks, in other words:
    they will be as wide as their containing block, which in this case means
    that they will be as wide as the slot they are assigned to. Without it,
    they would be inline elements and just be left-aligned in their slots.

   <div class=figure>
    <p><img alt="Image simulating the layout of the example" src=form.png>

    <p class=caption>Possible rendering of the example.
   </div>
  </div>

  <div class=example>
   <p>This example shows that templates can be nested. The body has two
    columns. The #content element that goes into the second column has itself
    another template, into which the various “modules” are placed.

   <div class=figure>
    <p><img alt="[Screendump with nested templates]" src=table5.png>

    <p class=caption>Possible rendering of the nested templates. (The borders
     are added for clarity, they don't occur in the style rules below. The
     red border is the inner template.)
   </div>

   <p>For clarity, the inner template uses different letters for the slots
    than the outer template. This is not required.

   <pre>
&lt;style type="text/css">
body {
     display: "a   b"
              10em *;
}
#nav {
     position: a;
}
#content {
     position: b;
     display: "c   .   d   .   e   "
              ".   .   .   .   .   "/1em
              ".   .   f   .   .   "
               *  1em  *  1em  *;
}
.module.news {
     position: c;
}
.module.sports {
     position: d;
}
.module.personal {
     position: e;
}
#foot {
     position: f;
}
&lt;/style>
&lt;body>
&lt;ul id="nav">
     &lt;li>navigation&lt;/li>
&lt;/ul>
&lt;div id="content">
    &lt;div class="module news">
         &lt;h3>Weather&lt;/h3>
         &lt;p>There will be weather&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Football&lt;/h3>
         &lt;p>People like football.&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Chess&lt;/h3>
         &lt;p>There was a brawl at the chess tournament&lt;/p>
    &lt;/div>
    &lt;div class="module personal">
         &lt;h3>Your Horoscope&lt;/h3>
         &lt;p>You're going to die (eventually).&lt;/p>
    &lt;/div>
    &lt;p id="foot">Copyright some folks&lt;/p>
&lt;/div>

&lt;/body>
</pre>
  </div>

  <div class=example>
   <p>This example shows the use of ‘<code class=css>same</code>’ to put
    <code>DD</code> elements in the same slot as the preceding
    <code>DT</code>.

   <pre>
...
DL {display: "a.b.c"  * 2em * 2em *}
DT.mineral {position: a}
DT.animal {position: b}
DT.plant {position: c}
DD {position: same; margin-left: 1em}
...
<b>&lt;DL></b>
 <b>&lt;DT class=animal></b>falcon
 <b>&lt;DD></b>This bird of prey...
 <b>&lt;DT class=animal></b>rabbit
 <b>&lt;DD></b>Local restaurants...
 <b>&lt;DT class=mineral></b>granite
 <b>&lt;DD></b>This rock occurs...
 <b>&lt;DT class=plant></b>olive
 <b>&lt;DD></b>The fruit of...
 <b>&lt;DT class=mineral></b>limestone
 <b>&lt;DD></b>A rock composed of...
 <b>&lt;DT class=plant></b>pine
 <b>&lt;DD></b>The western half...
<b>&lt;/DL></b>
</pre>

   <div class=figure>
    <p><img alt=screendump src=granite.png>

    <p class=caption>Possible rendering of the <code>DL</code> list, with
     items sorted into three columns.
   </div>
   <!-- .figure --></div>
  <!-- .example -->

  <h2 id=slot-pseudo><span class=secno>7 </span>The ‘<a href="#slot"><code
   class=css>::slot()</code></a>’ pseudo-elements</h2>

  <p>The slots of a <a href="#template-element."><em>template
   element</em></a> can be individually addressed with the <dfn
   id=lsquoslotrsquo-pseudo-element.>‘<code class=css>slot()</code>’
   pseudo-element.</dfn>

  <div class=example>
   <p>For example, the following sets the color and vertical alignment of
    some of the slots in a template:

   <pre>
body { display: "aaa"
                "bcd" }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
</pre>
  </div>

  <p>A ‘<code class=css>::slot(<var>X</var>)</code>’ pseudo-element
   selects the slot with name <var>X</var> (a letter or “@”) of the
   subject of a selector. If that subject is not a <a
   href="#template-element."><em>template element,</em></a> or if it has no
   such slot, the pseudo-element selects nothing. (I.e., these cases are
   legal selectors, they just happen to match nothing.)

  <p>Only the following properties apply to the ‘<a href="#slot"><code
   class=css>slot()</code></a>’ pseudo-element:

  <ul>
   <li>All background-* properties (including the ‘<a
    href="#background"><code class=property>background</code></a>’
    shorthand).

   <li>‘<a href="#vertical-align"><code
    class=property>vertical-align</code></a>’

   <li>The ‘<a href="#overflow"><code class=property>overflow</code></a>’
    property.

   <li class=issue>The ‘<a href="#block-flow"><code
    class=property>block-flow</code></a>’ and ‘<a href="#direction"><code
    class=property>direction</code></a>’ properties?

   <li class=issue>The ‘<a href="#box-shadow"><code
    class=property>box-shadow</code></a>’ property?
  </ul>

  <p>The background of a slot is drawn immediately on top of the background
   of the template element itself.

  <h2 id=vertical-alignment><span class=secno>8 </span>Vertical alignment</h2>

  <p>The ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’ property of a ‘<a
   href="#slot"><code class=css>::slot()</code></a>’ pseudo-element can be
   used to align elements vertically in a slot. The effect is as if the <a
   href="#anonymous-block"><em title="anonymous block of a slot">hypothetical
   anonymous block</em></a> that contains the slot's contents is positioned
   as follows:

  <dl>
   <dt>bottom

   <dd>The content of the slot is aligned to the bottom of the slot: the
    bottom margin edge of the anonymous block coincides with the bottom of
    the slot.

   <dt>middle

   <dd>The content of the slot is vertically centered in the slot: the
    distance between the top margin edge of the anonymous block and the top
    of the slot is equal to the distance between the bottom margin edge of
    the anonymous block and the bottom of the slot. <span class=note>(Note
    that if the content overflows the slot, it will overflow both at the top
    and at the bottom.)</span>

   <dt>baseline

   <dd>The anonymous block that encloses the content is placed as high as
    possible under two constraints:
    <ol>
     <li>The top margin edge of the anonymous block may not be higher than
      the top edge of the slot.

     <li>The topmost baseline in the content may not be higher than the
      topmost baseline of content in any other slot in the same row that also
      has ‘<code class=css>vertical-align: baseline</code>’. Baselines of
      content inside floats are not taken into account. Slots that span
      several rows are considered to occur in their topmost row.
    </ol>
  </dl>

  <p>For all other values, the content is top aligned: the top margin edge of
   the anonymous box coincides with the top edge of the slot.

  <h2 id=paged><span class=secno>9 </span>Page-based templates and other
   templates in paged media</h2>

  <p>A template can also be attached to a page, rather than an element. Such
   a template is called a <dfn id=page-based-template>page-based
   template</dfn> as opposed to an <dfn
   id=element-based-template.>element-based template.</dfn>

  <p>The difference between page-based layout templates and element-based
   ones is that the size of a slot in a page-based layout template only
   depends on the template and the page size, never on the intrinsic size of
   the content.

  <p>Another difference is that content that overflows a slot may cause a
   page break: the rest of the content is put on another page. See <a
   href="#page-break">below.</a>

  <p>The syntax of a page-based template is the same as that of an
   element-based one, but the declaration appears in an ‘<a
   href="#page"><code class=css>@page</code></a>’ rule and any <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> or <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> that is neither
   ‘<code class=css>*</code>’ nor a <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> is treated as if it were
   ‘<code class=css>*</code>’.

  <p class=note>Although the occurrence of keywords, such as ‘<code
   class=css>fit-content</code>’ or ‘<code class=css>auto</code>’, is
   valid and well defined, a UA, especially an editor, may want to issue a
   warning, because those keywords don't have any useful function in
   page-based templates.

  <div class=example>
   <pre>
@page :first { display: "abc" "def" }
@page { display: "def" }

body {position: e}
h1 {position: b}
</pre>
  </div>

  <p>The default ‘<a href="#display0"><code
   class=property>display</code></a>’ value of a page is ‘<a
   href="#display0"><code class=css>display: "@"</code></a>’.

  <div class=example>
   <p>The following rule is typically not needed, because it is the default:

   <pre>@page { display: "@" }</pre>
  </div>

  <p>The height of the slots in a template is computed as in the section <a
   href="#rowheight">“Computing the height of the slots,”</a> except that
   the <a href="#page-area"><em title="page area">page area's</em></a> height
   <a href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a> is
   used instead of the element's height. Similarly, the width of the slots is
   computed as in the section <a href="#colwidth">“Computing the width of
   the slots,” </a> but with the page area's width replacing the element's
   width.

  <p class=note>Note that certain rules in those sections are never applied,
   because the page area's width and height are always known a-priori and the
   width and height of slots is always a <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> or ‘<code
   class=css>*</code>’.

  <p id=page-break>If a slot of a page-based template on <a
   href="#non-interactive"><em>non-interactive</em></a> media has an ‘<a
   href="#overflow"><code class=property>overflow</code></a>’ property of
   ‘<code class=css>visible</code>’, then content that overflows that
   slot in the block progression direction (i.e., below the slot in the case
   of horizontal text) causes a page break and is continued on the next page.
   <span class=issue>[What happens in non-interactive media with an ‘<a
   href="#overflow"><code class=property>overflow</code></a>’ of ‘<code
   class=css>scroll</code>’ or ‘<code class=css>auto</code>’?]</span>

  <p>For page breaking purposes, each slot is considered as a page and the
   page break properties on the elements in that slot determine where the
   content for that slot is broken. Content after the page break is put in
   the slot of the same name on the next page that has such a slot. If there
   is no such page <span class=issue>the content after the page break is not
   displayed? displayed in the default slot?</span>

  <p class=note>Note that this may happen if the template for the first page
   (‘<code class=css>@page :first</code>’) uses a letter that occurs in
   no other @page rule. Possibly also if a page template is bound to a
   “named page” <a href="#CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> and that named page is
   not allowed to repeat. (At the time of writing, this is only a proposal in
   the GCPM Module.)

  <p class=note>Note that an element <var>A</var> that appears later in the
   document than an element <var>B</var> may thus be displayed on an earlier
   page than element <var>B</var>, because their respective slots are broken
   across pages in different ways.

  <p>Because of limitations of a device (e.g., limited memory), it may be
   that a UA has to print a page (force page breaks) even though some slots
   aren't filled yet.

  <div class=example>
   <p>This example shows how the first page may have a different layout from
    the other pages. The slot ‘<code class=css>a</code>’ only occurs on
    the first page. If the content for that slot (in this case: all H1
    elements) is too long, the remaining content of that slot <span
    class=issue>will not be displayed.</span> The slot ‘<code
    class=css>@</code>’ occurs on normal pages and all its content can thus
    be displayed by adding additional pages.

   <pre>
@page :first { display: "a" "@" }
@page { display: "@" /* This is the default */ }
h1 {position: a}
</pre>
  </div>

  <p id=element-based-page-break>Element-based templates in paged media may
   be broken across pages, subject to the page break properties. In addition
   to the break points listed in the Paged Media module <a href="#CSS3PAGE"
   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>, a page break may occur
   between two rows in a template, if there is a possible break point at the
   same height or higher in all slots that span those two rows; and a page
   break may occur inside a row if there is a possible break point in all
   slots in that row.

  <p class=issue>Try to be more precise?

  <p>If ‘<a href="#page-break-before"><code
   class=property>page-break-before</code></a>’ or ‘<a
   href="#page-break-after"><code
   class=property>page-break-after</code></a>’ is ‘<code
   class=css>right</code>’, ‘<code class=css>left</code>’ or ‘<code
   class=css>always</code>’ on an element inside a slot in an element-based
   template, the value is treated as ‘<code class=css>auto</code>’
   instead.

  <p>The ‘<a href="#page"><code class=property>page</code></a>’ property
   does not apply to elements inside a slot of an element-based template.

  <p>Any other forced page break (see section 5.5 of Paged Media <a
   href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>)
   causes a new page to be created and all content in the document after this
   page break will be put in slots on the new page or on later pages: slots
   on any previous pages will not be further filled.

  <div class=example>
   <p>A slide presentation can be made with a template for each page (i.e.,
    slide) and forced page break between the slides:

   <pre>
@page	{ display: "a" / 5em
	           "@" / *
	           "b" / auto }
h1	{ page-break-before: always;
	  position: a }
p.note	{ position: b }
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>Topic one
<b>&lt;/ul></b>
<b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>More topics
<b>&lt;/ul></b>
<b>&lt;p class=note></b>Note the note
</pre>
  </div>

  <div class=example>
   <p>The document in the example above doesn't have an element that
    corresponds to a slide; a slide simply starts at an H1 and ends before
    the next H1. But if there is a DIV around each slide (as is the case in
    many slide formats in practice), the same effect can also be achieved
    without page-based templates, by using the ‘<code
    class=css>vh</code>’ unit <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>:

   <pre>
div.slide {height: 100vh; display: "a"/5em "@" "b"/intrinsic;
    page-break-before: always}
h1 {position: a}
p.note {position: b}
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>Topic one
 <b>&lt;/ul></b>
<b>&lt;/div></b>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>More topics
 <b>&lt;/ul></b>
 <b>&lt;p class=note></b>Note the note
<b>&lt;/div></b>
</pre>
  </div>

  <div class=example>
   <p>Both page-based and element-based templates can be used in the same
    document.

   <pre>
@page { display: "a@" }
:lang(fr} {position: a}
div.special {display: "abc" "abd"}
</pre>
  </div>

  <div class=example>
   <p>Here is a page as one might find in a newspaper. It combines a layout
    template with multicolumn layout.

   <div class=figure>
    <p><img alt="5-column newspaper page with some blocks of text that span
     several columns" src=newspaper.png>

    <p class=caption>The front page of a newspaper, with the first parts of
     several stories that are continued on other pages and headings and
     images that span several columns.
   </div>

   <pre>
@page :first {
  display: "A  A  A  A  A  A  A  A  A" / 5cm
           ".  .  .  .  .  .  .  .  ." / 0.25cm
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  D  D  D  D  D  D  D" / *
           "B  .  D  D  D  D  D  D  D" / *
           "B  .  E  E  E  .  F  F  F" / *
           "B  .  E  E  E  .  F  F  F" / *
           "B  .  E  E  E  .  F  F  F" / *
            * 3em * 3em * 3em * 3em *
}
h1 {position: a; border-bottom: thick; margin-bottom: 1.5em}
#toc {position: b; margin-right: -1.5em; border-right: thin;
  padding-right: 1.5em}
#leader {position: c; columns: 4; column-gap: 3em}
#art1 {position: d; columns: 4; column-gap: 3em; border-top: thin}
#art2 {position: e; columns: 2; column-gap: 3em}
#art3 {position: f; columns: 2; column-gap: 3em}
</pre>
  </div>

  <p class=issue>If a slot on a page is full and the content continues on the
   next page, it may be useful to insert something like “continued on page
   X.” This is useful at any page break, but more important if there are
   multiple “flows” of content on each page. Maybe a page-break-content
   property? ‘<code class=css>page-break-content: "▶ continued on p. "
   targetcounter(???, page)</code>’ or extend text-overflow from <a
   href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>?

  <p class=issue>How do you set the ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’ property of a slot in a page?
   Does the ‘<a href="#slot"><code class=css>::slot()</code></a>’
   pseudo-element apply? ‘<code class=css>@page :first :slot(A)
   {vertical-align: bottom}</code>’

  <h2 id=stacking-order><span class=secno>10 </span>Stacking order</h2>

  <p>An element with a computed value of a letter for its ‘<a
   href="#position0"><code class=property>position</code></a>’ is a
   <em>positioned element</em> (see <a href="#CSS3POS"
   rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a>) and thus the ‘<a
   href="#z-index"><code class=property>z-index</code></a>’ property
   applies to it. The general rules for <a href="/TR/CSS21/zindex">stacking
   contexts</a> <span class=issue>[ref in CSS3?]</span> apply.

  <p class=note>Note that an element can only have such a computed value if
   it has an ancestor that is a <a href="#template-element."><em>template
   element.</em></a>

  <div class=example>
   <p>This example uses ‘<a href="#z-index"><code
    class=property>z-index</code></a>’ and negative margins to make the
    element in the middle slot partly overlap the other slots:

   <pre>
body { display: "a.b"
                ".c."
                "d.e";
       height: 240px;
       width: 240px }
::slot(a) { background: #0C0 }
::slot(b) { background: #C00 }
::slot(d) { background: #00C }
::slot(e) { background: #A0A }
#c { background: #FD0; height: 120px; position: c;
     margin: -20px; z-index: 1 }
</pre>

   <div class=figure>
    <p><img alt="Five colored rectangles" src=overlap.png>

    <p class=caption>Rendering of the above example.
   </div>
  </div>

  <h2 id=floating-elements-inside-templates><span class=secno>11
   </span>Floating elements inside templates</h2>

  <p>An element may be positioned inside a template (computed value of <a
   href="#ltlettergt"><var>&lt;letter&gt;</var></a> for its ‘<a
   href="#position0"><code class=property>position</code></a>’ property)
   and be a floating element at the same time (computed value of its ‘<a
   href="#float"><code class=property>float</code></a>’ property is other
   than ‘<code class=css>none</code>’). The following cases must be
   distinguished:

  <ul>
   <li>Page-based floats – In paged media (see <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>), if the value of
    ‘<a href="#float"><code class=property>float</code></a>’ specifies
    that the element floats to the top or bottom of the page (in a horizontal
    writing mode) or the left or right of the page (in a vertical writing
    mode), the ‘<a href="#position0"><code
    class=property>position</code></a>’ property doesn't apply.

   <li>Normal floats – In other cases, the element floats normally within
    its containing block, which in this case is its slot in the template (as
    defined <a href="#containing-block">above</a>).
  </ul>

  <h2 id=gr-unit><span class=secno>12 </span>Definition of the ‘<code
   class=css>gr</code>’ unit in a template element</h2>

  <p>The Grid Positioning Module <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a> defines a ‘<code
   class=css>gr</code>’ unit that is usable with certain properties that
   position or size boxes. A <a href="#template-element."><em>template
   element</em></a> defines an <em>implicit grid</em> (in the terminology of
   that module) for use with the ‘<code class=css>gr</code>’ unit. The
   vertical grid lines are formed by the left and right content edges of the
   template element and by the edges between the columns of the template. The
   horizontal grid lines are formed by the top and bottom content edges of
   the template element and by the edges between the rows of the template.
   The top content edge and the left content edge have the number 0.

  <p class=note>In other words, a template with <var>n</var> columns and
   <var>m</var> rows defines <var>n</var> + 1 vertical grid lines numbered 0
   to <var>n</var> and <var>m</var> + 1 horizontal grid lines numbered 0 to
   <var>m</var>.

  <div class=example>
   <p>For example, with the following style sheet

   <pre>
div {
  display: "abc"
           "def";
  position: relative}
p {
  position: f}
#p1 {
  position: absolute;
  top: 1gr;
  left: 2gr}
</pre>

   <p>and this document fragment

   <pre>
&lt;div>
 &lt;p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 &lt;p id=p1>Position me.
&lt;/div>
</pre>

   <p>the “p1” element will be positioned with its top left corner
    against the top left corner of slot f. But note that it is not part of
    the content of slot f, it overlaps with it.
  </div>

  <h2 id=cr-exit-criteria><span class=secno>13 </span>CR exit criteria</h2>

  <p>For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd>each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd>passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd>a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

  <p>The specification will remain Candidate Recommendation for at least six
   months.

  <p>A <a href="/Style/CSS/Test/">test suite</a> will be developed during the
   Candidate Recommendation phase of this specification.

  <h2 id=history><span class=secno>14 </span>History</h2>

  <p><em>(This section is not normative.)</em>

  <p class=mtb>The following types of use cases were considered for
   template-based layout.

  <ol>
   <li>
    <p>Standard Web pages.

   <li>
    <p>Grids and other table-like layouts. This includes grid layouts, frame
     layouts and table-like subdivision of a rectangular area.

   <li>
    <p>A layout structure with “flex”ing information. The flexing is
     represented by constraints that specify how the cells are to relate to
     one another: which cells are to be allowed to grow or shrink and how
     much. There may also be a priority ordering, which determines, based on
     the size of the allowed display window, which cells shrink, which grow
     and under which conditions.

   <li>
    <p>Layout structures with absolutely positioned (fixed-size) elements;
     for example a block of text into which several illustrations intrude at
     fixed positions within the block. This is like a float with respect to
     tightly wrapping the text around the intrusion, but the position of the
     intrusion is determined by the layout structure, not the content flowed
     into that structure.

    <p>An example of this is a multicolumn layout with one or more
     “absolutely positioned floats” that intrude on the columns (see <a
     href="#intrusion">figure</a>).

    <div class=figure id=intrusion>
     <p><img alt="An image that partially overlaps two columns makes the text
      wrap around it on both sides." src=cutout.svg>

     <p class=caption>An image (or a “pull quote”) is placed centered on
      the page and intrudes on two areas.
    </div>

   <li>
    <p>Multiple, disconnected, fixed-size areas on a page that are chained
     together, each one receiving the content that doesn't fit in the
     previous slot. In combination with page breaks, this may give a layout
     as often seen in newspapers: the first few lines of each story on the
     first page, the rest of the story in other areas on subsequent pages.
     (It will probably need a way to conditionally insert“continued on
     page 7” or similar text.)
  </ol>

  <p>For comparing proposals for template-based layouts, the working group
   identified four important aspects of each proposal:

  <ol>
   <li>
    <p>the physical layout structures – the way of structuring the
     “cells” (slots) into which content is flowed. This includes a way to
     identify the various layout containers.

   <li>
    <p>the binding mechanism – the way to specify that a given element (and
     its descendants) are to be placed in a given layout cell.

   <li>
    <p>the property distribution mechanism – the way to put properties onto
     the layout structure and the cells within it.

   <li>
    <p>the flexing mechanism – the way to describe how the layout structure
     should adapt itself to the higher level container (window) in which it
     is placed. This includes statements about which cells should grow and
     when they should grow.
  </ol>

  <p>In this specification, these aspects are as follows:

  <ol>
   <li>
    <p>A character matrix is used to show the layout structure and the cells
     are named by the character used to show where they are positioned.

   <li>
    <p>The binding of content to cells is handled by the ‘<a
     href="#position0"><code class=property>position</code></a>’ property
     which identifies a cell to which the content is bound.

   <li>
    <p>The shape, size and flexibility of the layout are specified with the
     character matrix. Some properties (background, border and vertical
     alignment) are attached to individual slots.

   <li>
    <p>There is limited “flexing” information. The choice is between
     fixed size, a fraction of the available size or the content's intrinsic
     size. (The latter is further subject to min/max sizes specified on that
     content.) It is not possible to say, e.g., that some column can only
     become wider if all other columns are at their maximum size.
  </ol>

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>The first ideas for describing a template in CSS date from 1996 and are
   described in <a href="/TR/NOTE-layout"><cite>Frame-based layout via Style
   Sheets</cite></a> by Bert Bos, Dave Raggett and Håkon Wium Lie. The idea
   was revived in 2005 on the request of W3C's Device Independence Working
   Group and benefited especially from discussions with Rhys Lewis and Rotan
   Hanrahan from that group.

  <p>This specification was further influenced by ideas about form layout by
   <a
   href="http://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0077.html">
   Dave Raggett [member-only link]</a> and an early write-up of the features
   of <a href="http://www.mozilla.org/projects/xul/xul.html"> XUL</a> by <a
   href="http://lists.w3.org/Archives/Member/w3c-css-wg/2002JanMar/0432.html">
   Ian Hickson [member-only link].</a>

  <p><a href="http://transcendingcss.com/support/">Andy Clarke,</a> <a
   href="http://creatingsexystylesheets.com/">Jina Bolton</a> and <a
   href="http://lawver.net/">Kevin Lawver</a> provided use cases, examples
   and requirements. The analysis in the <a href="#history">History</a>
   section is a slightly shortened version of work by Steve Zilles.

  <p>César Acebal built the first <a
   href="http://transcendingcss.com/support/almcss.zip"> prototype.</a>
   Andrew Fedoniouk built <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Mar/0278.html">
   the second.</a> A <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Apr/0383.html">
   third prototype</a> was made by Alexis Deveria.

  <h2 class=no-num id=references>References</h2>

  <p id=normative-references>Normative references: <!--begin-normative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3BG>[CSS3BG]

   <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
    href="http://www.w3.org/TR/2009/WD-css3-background-20091015"><cite>CSS
    Backgrounds and Borders Module Level 3.</cite></a> 15 October 2009. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-background-20091015">http://www.w3.org/TR/2009/WD-css3-background-20091015</a>
    </dd>
   <!---->

   <dt id=CSS3BOX>[CSS3BOX]

   <dd>Bert Bos. <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
    model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>Melinda Grant; Håkon Wium Lie. <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
    </dd>
   <!---->

   <dt id=CSS3POS>[CSS3POS]

   <dd>Bert Bos. <cite>CSS3 Positioning Module.</cite> (forthcoming). W3C
    Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
    module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
    </dd>
   <!---->

   <dt id=CSS3TBL>[CSS3TBL]

   <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
    W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3TEXT>[CSS3TEXT]

   <dd>Paul Nelson; Elika J. Etemad. <a
    href="http://www.w3.org/TR/2007/WD-css3-text-20070306"><cite>CSS Text
    Level 3.</cite></a> 6 March 2007. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-text-20070306">http://www.w3.org/TR/2007/WD-css3-text-20070306</a>
    </dd>
   <!---->

   <dt id=CSS3TEXTLAYOUT>[CSS3TEXTLAYOUT]

   <dd>Elika J. Etemad; Paul Nelson. <cite>CSS3 Text Layout Module.</cite>
    (forthcoming). W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>Chris Lilley; Håkon Wium Lie. <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
    Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
    in progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
    </dd>
   <!---->

   <dt id=UNICODE>[UNICODE]

   <dd>The Unicode Consortium. <a
    href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html"><cite>The
    Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
    Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
    from time to time by the publication of new versions URL: <a
    href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <p id=other-references>Other references: <!--begin-informative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2009/CR-CSS2-20090908"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 8 September
    2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2009/CR-CSS2-20090908">http://www.w3.org/TR/2009/CR-CSS2-20090908</a>
    </dd>
   <!---->

   <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]

   <dd>L. David Baron. <a
    href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723"><cite>Flexible
    Box Layout Module.</cite></a> 23 July 2009. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723">http://www.w3.org/TR/2009/WD-css3-flexbox-20090723</a>
    </dd>
   <!---->

   <dt id=CSS3GCPM>[CSS3GCPM]

   <dd>Håkon Wium Lie. <a
    href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070504"><cite>CSS3 module:
    Generated Content for Paged Media.</cite></a> 4 May 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070504">http://www.w3.org/TR/2007/WD-css3-gcpm-20070504</a>
    </dd>
   <!---->

   <dt id=CSS3GRID>[CSS3GRID]

   <dd>Alex Mogilevsky; Markus Mielke. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
    </dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>Daniel Glazman; et al. <a
    href="http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090423"><cite>Media
    Queries.</cite></a> 23 April 2009. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090423">http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090423</a>
    </dd>
   <!---->

   <dt id=SELECT>[SELECT]

   <dd>Tantek Çelik; et al. <a
    href="http://www.w3.org/TR/2009/WD-css3-selectors-20090310"><cite>Selectors
    Level 3.</cite></a> 10 March 2009. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-selectors-20090310">http://www.w3.org/TR/2009/WD-css3-selectors-20090310</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>‘<code class=css>slot()</code>’ pseudo-element., <a
    href="#lsquoslotrsquo-pseudo-element." title="‘slot()’
    pseudo-element."><strong>7</strong></a>

   <li><var>&lt;col-width&gt;</var>, <a href="#ltcol-widthgt"
    title="&lt;col-width&gt;"><strong>3</strong></a>

   <li><var>&lt;length&gt;</var>, <a href="#ltlengthgt"
    title="&lt;length&gt;"><strong>1</strong></a>

   <li>&lt;letter&gt;, <a href="#ltlettergt"
    title="&lt;letter&gt;"><strong>6</strong></a>

   <li><var>&lt;row-height&gt;</var>, <a href="#ltrow-heightgt"
    title="&lt;row-height&gt;"><strong>3</strong></a>

   <li><var>&lt;string&gt;</var>, <a href="#ltstringgt"
    title="&lt;string&gt;"><strong>1</strong></a>

   <li>anonymous block of a slot, <a href="#anonymous-block" title="anonymous
    block of a slot"><strong>5</strong></a>

   <li>background, <a href="#background"
    title=background><strong>1</strong></a>

   <li>block-flow, <a href="#block-flow"
    title=block-flow><strong>1</strong></a>

   <li>box-shadow, <a href="#box-shadow"
    title=box-shadow><strong>1</strong></a>

   <li>direction, <a href="#direction" title=direction><strong>1</strong></a>


   <li>display, <a href="#display" title=display><strong>1</strong></a>, <a
    href="#display0" title=display><strong>3</strong></a>

   <li>element-based template., <a href="#element-based-template."
    title="element-based template."><strong>9</strong></a>

   <li>float, <a href="#float" title=float><strong>1</strong></a>

   <li>height, <a href="#height" title=height><strong>1</strong></a>

   <li>interactive, <a href="#interactive"
    title=interactive><strong>1</strong></a>

   <li>intrinsic minimum width, <a
    href="#intrinsic-minimum-and-intrinsic-preferre" title="intrinsic minimum
    width"><strong>4</strong></a>

   <li>intrinsic preferred width, <a
    href="#intrinsic-minimum-and-intrinsic-preferre" title="intrinsic
    preferred width"><strong>4</strong></a>

   <li>layout algorithm, <a href="#layout-algorithm" title="layout
    algorithm"><strong>4</strong></a>

   <li>non-interactive, <a href="#non-interactive"
    title=non-interactive><strong>1</strong></a>

   <li>overflow, <a href="#overflow" title=overflow><strong>1</strong></a>

   <li>page, <a href="#page" title=page><strong>1</strong></a>

   <li>page area, <a href="#page-area" title="page
    area"><strong>1</strong></a>

   <li>page-based template, <a href="#page-based-template" title="page-based
    template"><strong>9</strong></a>

   <li>page-break-after, <a href="#page-break-after"
    title=page-break-after><strong>1</strong></a>

   <li>page-break-before, <a href="#page-break-before"
    title=page-break-before><strong>1</strong></a>

   <li>position, <a href="#position0" title=position><strong>6</strong></a>

   <li>slot, <a href="#slot" title=slot><strong>3</strong></a>

   <li>template ancestor, <a href="#template-ancestor" title="template
    ancestor"><strong>3</strong></a>

   <li>template element., <a href="#template-element." title="template
    element."><strong>3</strong></a>

   <li>vertical-align, <a href="#vertical-align"
    title=vertical-align><strong>1</strong></a>

   <li>width, <a href="#width" title=width><strong>1</strong></a>

   <li>z-index, <a href="#z-index" title=z-index><strong>1</strong></a>
  </ul>
  <!--end-index-->
  <!--
<h2 class="no-num" id="property-index">Property index</h2>
< ! - - properties - - >
-->
  <!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->