You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2273 lines
85 KiB
2273 lines
85 KiB
<!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><string></var></dfn></a> and <a
|
|
href="/TR/css3-values#ltlengthgt"> <dfn
|
|
id=ltlengthgt><var><length></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 & 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>
|
|
<style type="text/css">
|
|
dl { display: "ab"
|
|
"cd" }
|
|
#sym1 { position: a }
|
|
#lab1 { position: b }
|
|
#sym2 { position: c }
|
|
#lab2 { position: d }
|
|
</style>
|
|
<dl>
|
|
<dt id=sym1>A
|
|
<dd id=lab1>A is een aapje
|
|
<dt id=sym2>B
|
|
<dd id=lab2>B is de bakker
|
|
</dl>
|
|
</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&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>
|
|
<div class=group>
|
|
<div>aa aa aa aa aa aa</div>
|
|
<div>bbb</div>
|
|
<div class=menu>ccccc</div>
|
|
</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>
|
|
<div class=section>
|
|
<p>The balubious coster of the fifth secter<span
|
|
class=note> The sixth secter coster is a difter
|
|
manon.</span> of The Rollow Carpug mentizes a costernica.
|
|
<p>…
|
|
</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><string></var></a> [ / <a
|
|
href="#ltrow-heightgt"><var><row-height></var></a> ]? ]+ <a
|
|
href="#ltcol-widthgt"><var><col-width></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><letter></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><row-height></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><length></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><col-width></var></dfn> sets the
|
|
width of a column. If there are more <a
|
|
href="#ltcol-widthgt"><var><col-width></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><col-width></var></a> can be one of the
|
|
following:
|
|
|
|
<dl>
|
|
<dt><a href="#ltlengthgt"><var class=rhs><length></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><length></var></a> | max-content |
|
|
min-content | * ]. There may be white space around the <var>p</var> and
|
|
<var>q</var>. If <var>q</var> < <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><style type="text/css">
|
|
div { display: ".aa..bb." }
|
|
p.left { position: a }
|
|
p.right { position: b }
|
|
</style>
|
|
<div>
|
|
<p class=left>Left column
|
|
<p class=right>Right column
|
|
</div></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><col-width></var></a> of a given <a
|
|
href="#ltlengthgt"><var><length></var></a> has intrinsic minimum
|
|
and intrinsic preferred widths both equal to that <a
|
|
href="#ltlengthgt"><var><length></var></a>.
|
|
|
|
<li>
|
|
<p>A column with a <a
|
|
href="#ltcol-widthgt"><var><col-width></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><col-width></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><col-width></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><col-width></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><col-width></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><length></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><length></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>
|
|
<style type="text/css">
|
|
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}
|
|
</style>
|
|
<p id=logo><img src=...
|
|
<p id=motto>Making Web pages since 1862
|
|
<p id=date>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><letter></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><letter></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><letter></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><letter></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>
|
|
<div class=figure>
|
|
<p><img src="paul.jpg" alt="...">
|
|
<p class=caption>A pond in a playground in Amsterdam
|
|
</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>
|
|
/* <FIG SRC=...><CAPTION>...</> Fallback</> */
|
|
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>
|
|
<form action="./">
|
|
<label for=minv>Enter minimum value:</label>
|
|
<input id=minv name=minv>
|
|
<label for=maxv>Enter maximum value:</label>
|
|
<input id=maxv name=maxv>
|
|
<input type=submit value="OK">
|
|
<input type=reset value="Reset">
|
|
</form>
|
|
</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>
|
|
<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;
|
|
}
|
|
</style>
|
|
<body>
|
|
<ul id="nav">
|
|
<li>navigation</li>
|
|
</ul>
|
|
<div id="content">
|
|
<div class="module news">
|
|
<h3>Weather</h3>
|
|
<p>There will be weather</p>
|
|
</div>
|
|
<div class="module sports">
|
|
<h3>Football</h3>
|
|
<p>People like football.</p>
|
|
</div>
|
|
<div class="module sports">
|
|
<h3>Chess</h3>
|
|
<p>There was a brawl at the chess tournament</p>
|
|
</div>
|
|
<div class="module personal">
|
|
<h3>Your Horoscope</h3>
|
|
<p>You're going to die (eventually).</p>
|
|
</div>
|
|
<p id="foot">Copyright some folks</p>
|
|
</div>
|
|
|
|
</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><DL></b>
|
|
<b><DT class=animal></b>falcon
|
|
<b><DD></b>This bird of prey...
|
|
<b><DT class=animal></b>rabbit
|
|
<b><DD></b>Local restaurants...
|
|
<b><DT class=mineral></b>granite
|
|
<b><DD></b>This rock occurs...
|
|
<b><DT class=plant></b>olive
|
|
<b><DD></b>The fruit of...
|
|
<b><DT class=mineral></b>limestone
|
|
<b><DD></b>A rock composed of...
|
|
<b><DT class=plant></b>pine
|
|
<b><DD></b>The western half...
|
|
<b></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><col-width></var></a> or <a
|
|
href="#ltrow-heightgt"><var><row-height></var></a> that is neither
|
|
‘<code class=css>*</code>’ nor a <a
|
|
href="#ltlengthgt"><var><length></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><length></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><h1></b>Slide 1 title<b></h1></b>
|
|
<b><ul></b>
|
|
<b><li></b>Topic one
|
|
<b></ul></b>
|
|
<b><h1></b>Slide 2 title<b></h1></b>
|
|
<b><ul></b>
|
|
<b><li></b>More topics
|
|
<b></ul></b>
|
|
<b><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><div class=slide></b>
|
|
<b><h1></b>Slide 1 title<b></h1></b>
|
|
<b><ul></b>
|
|
<b><li></b>Topic one
|
|
<b></ul></b>
|
|
<b></div></b>
|
|
<b><div class=slide></b>
|
|
<b><h1></b>Slide 2 title<b></h1></b>
|
|
<b><ul></b>
|
|
<b><li></b>More topics
|
|
<b></ul></b>
|
|
<b><p class=note></b>Note the note
|
|
<b></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><letter></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>
|
|
<div>
|
|
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed
|
|
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
<p id=p1>Position me.
|
|
</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><col-width></var>, <a href="#ltcol-widthgt"
|
|
title="<col-width>"><strong>3</strong></a>
|
|
|
|
<li><var><length></var>, <a href="#ltlengthgt"
|
|
title="<length>"><strong>1</strong></a>
|
|
|
|
<li><letter>, <a href="#ltlettergt"
|
|
title="<letter>"><strong>6</strong></a>
|
|
|
|
<li><var><row-height></var>, <a href="#ltrow-heightgt"
|
|
title="<row-height>"><strong>3</strong></a>
|
|
|
|
<li><var><string></var>, <a href="#ltstringgt"
|
|
title="<string>"><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:
|
|
-->
|