WD-css3-content-20030514 94.7 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--*- Mode: Text; fill-column: 95 -*-->

<html lang="en">
<head>
<meta content="text/html" http-equiv="Content-Type">

<title>CSS3 Generated and Replaced Content Module</title>

<link href="default.css" rel="stylesheet" type="text/css">

<style type="text/css">
   .green { color: green; }
   .navy { color: navy; }
   .purple { color: purple; }
  </style>

<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
type="text/css">
<!-- TODO:
 !
 ! * place 'property' into marked up property elements
 ! * similarly with '::pseudo' and examples
 ! * http://lists.w3.org/Archives/Member/w3c-css-wg/2003JanMar/0170.html
 ! * string-set and co
 ! * need to increment the footnote, endnote and section-note counters
 ! * cross references, as in http://www.w3.org/Style/Group/2001/MO-css3-page-20010205
 !
 !-->

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

<h1 id="css3-generated">CSS3 Generated and Replaced Content Module</h1>

<h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 14 May 2003</h2>

<dl>
<dt>This version:

<dd><a
href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a>

<dt>Latest version:

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

<dt>Previous version:

<dd><a
href="http://www.w3.org/TR/1998/REC-CSS2-19980512/generate.html">http://www.w3.org/TR/1998/REC-CSS2-19980512/generate.html</a>

<dt>Editors:

<dd>Ian Hickson, <a href="mailto:ian@hixie.ch">ian@hixie.ch</a>
</dl>
<!--begin-include "../copyright.inc"-->
<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a>
&copy; 2003 <a href="http://www.w3.org/"><abbr title="World Wide Web
Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of
Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><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>,
<a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> and <a
href="http://www.w3.org/Consortium/Legal/copyright-software">software
licensing</a> rules apply.
<!--end-include-->
<hr title="Separator for header">
</div>

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

<p>This CSS3 Module describes how to insert and move content around a
document, in order to create footnotes, endnotes, section notes. Inserted
content can also introduce counters and strings, which can be used for
running headers and footers, section numbering, and lists. Finally,
techniques for declaring replaced images, as well as scaling and cropping
them using CSS, are described.

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

<p>This is a working draft of a CSS level 3 module. It
aspires to eventually become a CSS3 Recommendation.

<p>This document is written in the context of the CSS working group which is
part of the <a href="http://www.w3.org/Style/">style activity</a> (see <a
href="http://www.w3.org/Style/Activity">summary</a>).

<p>Comments on, and discussions of this draft can be sent on 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>). W3C Members can also
send comments directly to the CSS working group.

<p>This is a working draft and may therefore be updated, replaced or rendered
obsolete by other W3C documents at any time. It is inappropriate to use W3C
Working Drafts as reference material or to cite them as other than "work in
progress". Its publication does not imply endorsement by the W3C membership
or the <a href="http://www.w3.org/Style/Group">CSS Working Group</a> (<a
href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).

<p>Patent disclosures relevant to CSS may be found on the Working Group's
public <a href="http://www.w3.org/Style/CSS/Disclosures">patent disclosure
page.</a>

<p>To find the latest version of this working draft, please follow the
"Latest version" link above, or visit the list of W3C <a
href="http://www.w3.org/TR/">Technical Reports</a>.

<p>This document may be available in translations in the future. The English
version of this specification is the only normative version.

<h3 class="no-num" id="crec">Candidate Recommendation Exit Criteria</h3>

<p>For this specification to exit the CR stage, the following conditions must
be met:

<ol>
<li>
<p>There must be at least two interoperable implementations implementing all
the features. For the purposes of this criterion, we define the following
terms:

<dl>
<dt>feature

<dd>
<p>a section, subsection, assertion, or other testable aspect of the
specification.

<dt>interoperable

<dd>
<p>passing the respective test case(s) in the 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 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>
<p>a user agent which:

<ol>
<li>implements the feature.

<li>is available (i.e. publicly downloadable or available through some other
public point of sale mechanism). This is the "show me" requirement.

<li>is shipping (i.e. development, private or unofficial versions are
insufficient).

<li>is not experimental (i.e. is intended for a wide audience and could be
used on a daily basis).
</ol>
</dl>

<li>
<p>A minimum of six months of the CR period must have elapsed. This is to
ensure that enough time is given for any remaining major errors to be caught.

<li>
<p>Features will be dropped if two or more interoperable implementations are
not found by the end of the CR period.

<li>
<p>Features will also be dropped if sufficient and adequate tests (by
judgment of the working group) have not been produced for those features by
the end of the CR period.
</ol>

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

<ul class="toc">
<li><a href="#status">Status of this document</a>
<ul class="toc">
<li><a href="#crec">Candidate Recommendation Exit Criteria</a>
</ul>

<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>
<ul class="toc">
<li><a href="#conformance"><span class="secno">2.1. </span>Conformance
Requirements</a>
</ul>

<li><a href="#terminology"><span class="secno">3. </span>Terminology</a>

<li><a href="#pseudo-elements"><span class="secno">4.
</span>Pseudo-elements</a>
<ul class="toc">
<li><a href="#syntax"><span class="secno">4.1. </span>Syntax</a>

<li><a href="#inserting"><span class="secno">4.2. </span>Inserting content
into an element: the '::before' and '::after' pseudo-elements</a>
<ul class="toc">
<li><a href="#nesting"><span class="secno">4.2.1. </span>Nesting '::before'
and '::after' pseudo-elements</a>

<li><a href="#inserting0"><span class="secno">4.2.2. </span>Inserting
multiple '::before' and '::after' pseudo-elements</a>
</ul>

<li><a href="#wrapping"><span class="secno">4.3. </span>Wrapping elements in
pseudo-elements with '::outside'</a>
<ul class="toc">
<li><a href="#mixing"><span class="secno">4.3.1. </span>Mixing '::outside'
with '::before' and '::after'</a>
</ul>

<li><a href="#inserting1"><span class="secno">4.4. </span>Inserting new
content later in the document tree with '::alternate'</a>
<ul class="toc">
<li><a href="#mixing0"><span class="secno">4.4.1. </span>Mixing '::alternate'
with '::outside', '::before', and '::after'</a>
</ul>

<li><a href="#block"><span class="secno">4.5. </span>Block markers: The
'::marker' pseudo-element</a>

<li><a href="#line-markers"><span class="secno">4.6. </span>Line markers: The
'::line-marker' pseudo-element</a>
</ul>

<li><a href="#moving"><span class="secno">5. </span>Moving content to later
in the document: the 'move-to' property</a>

<li><a href="#the-display"><span class="secno">6. </span>The 'display'
property</a>

<li><a href="#specifying"><span class="secno">7. </span>Specifying quotes
with the <span class="propinst-quotes">'quotes'</span> property</a>
<ul class="toc">
<li><a href="#inserting2"><span class="secno">7.1. </span>Inserting quotes
with the 'content' property</a>
</ul>

<li><a href="#counters"><span class="secno">8. </span>Automatic counters and
numbering: the 'counter-increment' and 'counter-reset' properties</a>
<ul class="toc">
<li><a href="#nested"><span class="secno">8.1. </span>Nested counters and
scope</a>

<li><a href="#counter"><span class="secno">8.2. </span>Counter styles</a>

<li><a href="#counters0"><span class="secno">8.3. </span>Counters in elements
with 'display: none'</a>

<li><a href="#reserved"><span class="secno">8.4. </span>Reserved Counter
Names</a>
</ul>

<li><a href="#strings"><span class="secno">9. </span>Named strings</a>

<li><a href="#counter0"><span class="secno">10. </span>'@counter' and
'@string'</a>
<ul class="toc">
<li><a href="#counter1"><span class="secno">10.1. </span>'@counter'</a>

<li><a href="#string"><span class="secno">10.2. </span>'@string'</a>

<li><a href="#page-policy"><span class="secno">10.3. </span>Determining which
counter or string-set value to use: the 'page-policy' property</a>
</ul>

<li><a href="#inserting3"><span class="secno">11. </span>Inserting and
replacing content with the <span class="propinst-content">'content'</span>
property</a>

<li><a href="#replacedContent"><span class="secno">12. </span>Replaced
content</a>
<ul class="toc">
<li><a href="#the-crop"><span class="secno">12.1. </span>The 'crop'
property</a>

<li><a href="#intrinsic"><span class="secno">12.2. </span>Intrinsic
dimensions</a>
</ul>

<li><a href="#examples"><span class="secno">13. </span>Examples</a>
<ul class="toc">
<li><a href="#footnote"><span class="secno">13.1. </span>Footnote
elements</a>

<li><a href="#footnote0"><span class="secno">13.2. </span>Footnote
attributes</a>

<li><a href="#styling"><span class="secno">13.3. </span>Styling footnotes</a>

<li><a href="#multiple"><span class="secno">13.4. </span>Multiple styles on
one element</a>

<li><a href="#section"><span class="secno">13.5. </span>Section notes</a>

<li><a href="#top-floats"><span class="secno">13.6. </span>Top floats</a>
</ul>

<li><a href="#test-suite"><span class="secno">14. </span>Test suite</a>

<li><a href="#profiles"><span class="secno">15. </span>Profiles</a>

<li><a href="#acknowledgments">Acknowledgments</a>

<li><a href="#references">References</a>
<ul class="toc">
<li><a href="#normative-references">Normative references</a>

<li><a href="#other-references">Other references</a>
</ul>

<li><a href="#index">Index</a>

<li><a href="#property-index">Property 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>CSS3 module: syntax</cite> <a href="#CSS3SYN"
rel="biblioentry">[CSS3SYN]</a>

<li><cite>CSS3 module: values and units</cite> <a href="#CSS3VAL"
rel="biblioentry">[CSS3VAL]</a>

<li><cite>CSS3 module: selectors</cite> <a href="#SELECT"
rel="biblioentry">[SELECT]</a>

<li><cite>CSS3 module: lists</cite> <a href="#CSS3LIST"
rel="biblioentry">[CSS3LIST]</a>

<li><cite>CSS3 module: block box model</cite> <a href="#CSS3BOX"
rel="biblioentry">[CSS3BOX]</a>

<li><cite>CSS3 module: inline box model</cite> <a href="#CSS3LINE"
rel="biblioentry">[CSS3LINE]</a>

<li><cite>CSS3 module: paged media</cite> <a href="#CSS3PAGE"
rel="biblioentry">[CSS3PAGE]</a>
</ul>
<!--=======================================================================-->

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

<p>In some cases, authors may want user agents to render content that does
not come from the document tree. One familiar example of this is a numbered
list; the author does not want to mark the numbers up explicitly, he or she
wants the user agent to generate them automatically. Counters and markers are
used to achieve these effects.

<pre>
ol { counter-reset: item; }
li { display: list-item; counter-increment: item; }
li::marker { content: counter(item, decimal) '.'; }
</pre>

<p>A simpler way to write this is:

<pre>
li { display: list-item; list-style: decimal; }
</pre>

<p>Similarly, authors may want the user agent to insert the word "Figure"
before the caption of a figure, or "Chapter 7" on a line before the seventh
chapter title.

<pre>
figure > caption::before { content: "Figure: "; }
chapter:nth-child(7) > title::before { content: "Chapter 7\A"; }
</pre>

<p>The last example could also be written in a more generic way using
counters:

<pre>
chapter { counter-increment: chapter; }
chapter > title::before { content: "Chapter " counter(chapter) "\A"; }
</pre>

<p>Another common effect is replacing elements with images or other
multimedia content. Since not all user agents support all multimedia formats,
fallbacks may have to be provided.

<pre>
/* Replace &lt;logo&gt; elements with the site's logo, using a format
 * supported by the UA */
logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }

/* Replace &lt;figure&gt; elements with the referenced document, or,
 * failing that, with either the contents of the alt attribute or the
 * contents of the element itself if there is no alt attribute */
figure[alt] { content: attr(href, url), attr(alt); }
figure:not([alt]) { content: attr(href, url), contents; }
</pre>

<p>Authors may also wish to move content to a later position in a document,
for instance placing images at the bottom (or top) of the page.

<pre>
img { move-to: page-top; } /* move images to page-top */
@page { padding-top: 10em; } /* leave a gap at the top of the page */
body:after { /* place a box at the top of each page */
  position: fixed; top: 0; left: 0; right: 0; height: 10em;
  content: pending(page-top); /* insert the images moved to page-top */
}
</pre>

<p>In some cases, content may be inserted, alternate content moved to a later
place in the flow, and a list marker inserted next to this alternate content.
For example, footnotes or endnotes.

<pre>
a[href]::after {
  counter-increment: footnote-number;
  content: counter(footnote-number, footnotes);
}
a[href]::after::alternate {
  display: list-item;
  content: attr(href);
  move-to: footnotes;
}
a[href]::after::alternate::marker {
  content: counter(footnote-number, footnotes);
}
@page {
  counter-reset: footnote-number;
  @footnote {
    content: pending(footnotes);
  }
}
</pre>

<p>Using initial values, the last example can also be written as:

<pre>
a[href]::after { content: footnote; }
a[href]::after::alternate { content: attr(href); }
</pre>

<p>For simpler cases, e.g. where an element is simply to be used as an
endnote directly, only a single declaration is required.

<pre>
p.note { content: endnote; }
</pre>

<p>The initial values of the other properties are set up so that the result
is as expected.

<p>Another effect commonly requested by authors is that of line numbering.
This module introduces the '::line-marker' pseudo-element that is attached to
the front of every line box, which can be used for this purpose.

<pre>
pre { counter-reset: line; }
pre::line-marker { counter-increment: line; content: counter(line) "."; }
</pre>

<p>This pseudo-element can also be used to simulate the indentation style
found in e-mail communication:

<pre>
blockquote { margin: 0; padding: 0 0 0 2em; } <!-- replace 'em' with 'ch' XXX -->
blockquote > blockquote { margin-left: -1em; }
blockquote::line-marker { width: 2em; text-align: left; content: ">"; }
</pre>

<p>Generated content based on the <code>cite</code> and <code>datetime</code>
attributes can create introductions or citations on the fly as well.

<h3 id="conformance"><span class="secno">2.1. </span>Conformance Requirements</h3>

<p>Finally, in this document, requirements are expressed using the key words
"MUST", "MUST NOT", "REQUIRED", "SHALL" and "SHALL NOT". Recommendations are
expressed using the key words "SHOULD", "SHOULD NOT" and "RECOMMENDED". "MAY"
and "OPTIONAL" are used to indicate optional features or behavior. These
keywords are used in accordance with <a href="#RFC2119"
rel="biblioentry">[RFC2119]</a>. For legibility these keywords are used in
lowercase form.
<!--=======================================================================-->

<h2 id="terminology"><span class="secno">3. </span>Terminology</h2>

<p>This module introduces several pseudo-elements and allows them to nest in
certain predefined ways. In order to explain the relationships between these
nested pseudo-elements, three new terms have been coined.

<dl>
<dt><dfn id="superior">superior parent</dfn>

<dd> A pseudo-element's superior parent is the element or pseudo-element to
which it is associated. e.g. the superior parent of the pseudo-element
matched by '::before::after' is the pseudo-element matched by '::before', and
<em>that</em> pseudo-element's superior parent is the element itself. The
suporior parent of an '::outside(<var>n</var>)' pseudo-element is the
'::outside(<var>n-1</var>)' pseudo-element. Note that an element never has a
superior parent, and a pseudo-element always has exactly one.

<dt><dfn id="superior0">superior siblings</dfn>

<dd> The '::before' or '::after' pseudo-elements that have lower numeric
arguments. e.g. '::before(2)' is a superior sibling of '::before(5)'. Only
'::before' and '::after' pseudo-elements with numeric arguments greater than
1 have superior siblings.

<dt><dfn id="superior1">superior</dfn>

<dd> Any element or pseudo-element that is either a superior parent or
superior sibling.
</dl>

<p class="issue">These terms are horrible, but they were the only ones I
could think of that didn't confusingly clash with DOM terminology. Example of
the horridness of the terms: the superior parent of an '::outside'
pseudo-element is its rendering tree child, whose rendering hree sibling
'::before' has the '::outside' pseudo-element as its superior parent.

<p class="issue">We need a term which means "element or pseudo-element".
<!--=======================================================================-->

<h2 id="pseudo-elements"><span class="secno">4. </span>Pseudo-elements</h2>

<p>At the heart of generated content lies pseudo-elements. Pseudo-elements
create abstractions about the document tree beyond those specified by the
document language. For instance, document languages do not offer mechanisms
to access the first letter or first line of an element's content. CSS
pseudo-elements allow style sheet designers to refer to this otherwise
inaccessible information. Pseudo-elements also provide style sheet designers
a way to assign style to content that does not exist in the source document.

<h3 id="syntax"><span class="secno">4.1. </span>Syntax</h3>

<p>Certain combinations of multiple pseudo-elements per selector are allowed.
All pseudo-elements must appear in a single chain at the end of the selector,
with no intervening combinators.

<p>The pseudo-element part of the selector consists of an optional set of
"structural" pseudo-elements, optionally followed by a single formatting
pseudo-element.

<p>The structural pseudo-elements are alternating sets of an '::outside'
pseudo-element and one or more '::before', '::after', or '::alternate'
pseudo-elements. (So basically any number of '::outside', '::before',
'::after', and '::alternate' pseudo-elements, so long as no two '::outside'
pseudo-elements are adjacent, as that is meaningless.)

<p>The formatting pseudo-elements are '::first-line', '::first-letter',
'::marker', '::line-marker', and '::selection'. Only one of these may occur,
and if present, it must be the last pseudo-element in the chain.

<p>The allowed order for pseudo-elements is formally described by the
following pseudo-BNF grammar:

<pre>
pseudo-elements := structural-pseudo-elements? formatting-pseudo-element?

structural-pseudo-elements :=
  ( '::outside'? [ '::before' | '::after' | '::alternate' ] )* '::outside'?

formatting-pseudo-element :=
  '::first-line' | '::first-letter' | '::marker' | '::line-marker' | '::selection'
</pre>

<p>The '::outside', '::before', and '::after' pseudo-elements have two forms,
'::outside', '::before', and '::after' and '::outside(<var>n</var>)',
'::before(<var>n</var>)', and '::after(<var>n</var>)', where <var>n</var> is
an integer. If the parameter part is omitted then '1' is implied. For
example, '::before(1)' is the same as '::before'.

<p>For compatability with previous levels of CSS, the '::before', '::after',
'::first-line' and '::first-letter' pseudo-elements do not require two
colons. This does not apply to any other pseudo-element. Authors are
encouraged to use the new two-colon forms.
<!--=======================================================================-->

<h3 id="inserting"><span class="secno">4.2. </span>Inserting content into an
element: the '::before' and '::after' pseudo-elements</h3>

<p>The '::before' and '::after' pseudo-elements are used to insert content
immediately before and immediately after the content of an element (or other
pseudo-element). The 'content' propety is used to specify the content to
insert.

<div class="example">
<p>For example, the following rule replaces the content of
<code>&lt;abbr&gt;</code> elements with the contents of the element's
<code>title</code> attribute:

<pre>
abbr { content: attr(title); }
</pre>

<p>The following rule inserts the string "Note: " before the content of every
P element whose "class" attribute has the value "note":

<pre>
P.note:before { content: "Note: " }
</pre>
</div>

<p>The formatting objects (e.g., boxes) generated by an element include
generated content. So, for example, changing the above style sheet to:

<pre class="example">
P.note:before { content: "Note: " }
P.note        { border: solid green }
</pre>

<p>...would cause a solid green border to be rendered around the entire
paragraph, including the initial string.

<p>Typically, the '::before' and '::after' pseudo-elements inherit any
inheritable properties from the element in the document tree to which they
are attached. In the general case, they inherit their properties from their
superior parent.

<p>For a '::before' or '::after' pseudo-element to be generated, all of the
elements and pseudo-elements leading to it must be generated, and the
pseudo-element must not have its 'content' property set to 'inhibit' or its
'display' property set to 'none'. Note that for '::before' and '::after'
pseudo-elements, the initial value of 'content' computes to 'inhibit'.

<p>Using a '::before' pseudo-element in the context of the anonymous table
elements works exactly as if an actualy element had been introduced. For
example:

<pre>
.example::before { content: "D" }
</pre>

<pre>
&lt;table&gt;
 &lt;tr&gt;
  &lt;td&gt;A&lt;/td&gt; &lt;td&gt;B&lt;/td&gt; &lt;td&gt;C&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr class="example"&gt;
             &lt;td&gt;E&lt;/td&gt; &lt;td&gt;F&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</pre>

<p>An anonymous table cell box is generated around the '::before' content in
this case, resulting in a 3&times;2 table.

<h4 id="nesting"><span class="secno">4.2.1. </span>Nesting '::before' and
'::after' pseudo-elements</h4>

<p>The selector '::before::before' represents a pseudo-element contained at
the start of a pseudo-element contained at the start of an element.

<p>For example, the following rules:

<pre>
div { content: 'A' }
div::before { content: 'B'; }
div::before::before { content: 'C'; }
</pre>

<p>...would result in the following rendering objects:

<pre>
,-----------------------.
| ,---------.           |
| | ,---.   |           |
| | | C | B | A         |
| | `---'   |           |
| `---------'           |
`-----------------------'
</pre>

<h4 id="inserting0"><span class="secno">4.2.2. </span>Inserting multiple
'::before' and '::after' pseudo-elements</h4>

<p>In contrast with the previous section, the selector '::before(2)'
represents a pseudo-element before another, both of which are contained at
the start of an element.

<p>For example, the following rules:

<pre>
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
</pre>

<p>...would result in the following rendering objects:

<pre>
,-----------------------.
| ,---. ,---.           |
| | C | | B | A         |
| `---' `---'           |
`-----------------------'
</pre>

<p>The '::before' selector is exactly equivalent to '::before(1)'.

<p>A pseudo-element only exists if all the elements and pseudo-elements
leading up to it exist. For instance, in the following example, only one
pseudo-element is generated, the first one:

<pre>
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: inhibit; }
div::before(3) { content: 'C'; }
</pre>

<p>It would result in the following rendering objects:

<pre>
,-----------------------.
| ,---.                 |
| | B | A               |
| `---'                 |
`-----------------------'
</pre>
<!--=======================================================================-->

<h3 id="wrapping"><span class="secno">4.3. </span>Wrapping elements in
pseudo-elements with '::outside'</h3>

<p>An '::outside' pseudo-element is one that is generated immediately outside
the pseudo-element's <span><a href="#superior1">superior</a></span>.

<p>When given a parameter, '::outside(<var>n</var>)' represents an
<var>n</var>th pseudo-element generated immediately around the
<var>n-1</var>th pseudo-element.

<p>For example, the following rules:

<pre>
div { display: block; border: dashed; }
div::outside { display: block; border: dashed; }
div::outside(2) { display: block; border: dashed; }
</pre>

<p>...would result in the following rendering objects:

<pre>
,-----------------------.   &lt;-- border of ::outside(2)
| ,-------------------. |   &lt;-- border of ::outside
| | ,---------------. | |   &lt;-- border of DIV
| | | DIV           | | |
| | `---------------' | |
| `-------------------' |
`-----------------------'
</pre>

<p>A similar result would be achieved by using three nested DIV elements
(except of course that would require changing the document source, which is
not always possible).

<p>One difference between using elements and using pseudo-elements is that
the pseudo-elements inherit from the elements (or pseudo-elements) that
generate them, not from those they are contained within.

<p>For example, if we assume the following rules:

<pre>
   div { display: block; border: green solid; }
   div::outside(1) { display: block; border: inherit; }
   div::outside(2) { display: block; border: red solid; }
</pre>

<p>...then the outermost border (from the '::outside(2)') will be red, but
the middle border (from '::outside(1)') will be the same colour as the inner
most border (from the element itself), namely green.

<p>For an '::outside' pseudo-element to be generated, all of the elements and
pseudo-elements leading to it must be generated, and the pseudo-element
itself must not have its 'display' property set to 'none'. Note that the
initial value of 'display' computes to 'none' on '::outside' pseudo-elements.

<p>It is possible to float an element and then give it an '::outside'
pseudo-element, in which case the pseudo-element is in-flow, not floated.

<p>For example:

<pre>
  p { float: right; color: green; }
  p::outside { display: inline; border: solid; }
</pre>

<p>...results in an empty inline element with a solid green border being
placed in the flow at the point where the float is taken out of flow.

<p>When an element is moved with the 'move-to' property, however, '::outside'
pseudo-elements are moved too.

<p>The 'content' property does not apply to '::outside' pseudo-elements.

<h4 id="mixing"><span class="secno">4.3.1. </span>Mixing '::outside' with
'::before' and '::after'</h4>

<p>An '::outside' pseudo-element can have any number of '::before' or
'::after' pseudo-elements of its own. They are inserted before and after the
'::outside' pseudo-element's contents (the element or pseudo-element that
generated the '::outside' pseudo-element).

<p>For example, the following rules:

<pre>
span                     { content: "span"; }
span::before             { content: "B";    }
span::outside(1)         { display: inline; }
span::outside(1)::before { content: "A";    }
span::outside(2)         { display: inline; }
span::outside(2)::after  { content: "C";    }
</pre>

<p>...would result in the following rendering objects (including construction
lines for clarity):

<pre>
,--------------------------------.   &lt;-- border of ::outside(2)
| ,----------------------.       |   &lt;-- border of ::outside(1)
| | ,---. ,-+---+------. | ,---. |   &lt;-- border of span, ::before,
| | | A | | | B | span | | | C | |          and ::after boxes
| | `---' `-+---+------' | `---' |
| `----------------------'       |
`--------------------------------'
</pre>

<p>This can be used to leave markers in the flow, as in:

<pre>
  note { float: right; }
  note::outside { display: inline; }
  note::outside::before { content: " (see sidebar) "; }
</pre>

<p>Care must be taken when styling cases like this. If the note element was
given a smaller 'font-size' or a different 'color', then, by default, the
generated in-flow text would end up inheriting it.
<!--=======================================================================-->

<h3 id="inserting1"><span class="secno">4.4. </span>Inserting new content
later in the document tree with '::alternate'</h3>

<p>This pseudo-element is created by setting its 'move-to' property to an
identifier. It is rendered at the next occurrence of 'pending()' in a
'content' property.

<p>In other respects it is just like a normal pseudo-element.

<p>Note that '::alternate' pseudo-elements inherit from their associated
pseudo-element or element, not from the element in which they are inserted.
(The same applies to any content moved using 'move-to'). This is discussed in
the section on the '<a href="#pending-inheritance">pending()</a>' value

<p>For an '::alternate' pseudo-element to be generated, all of the elements
and pseudo-elements leading to it must be generated, and the pseudo-element
must not have its 'display' property set to 'none', its 'content' property
set to 'inhibit', or its 'move-to' property set to 'here'. Note that on
'::alternate' pseudo-elements the initial value of 'move-to' is 'here' and
the initial value of 'content' is 'inhibit'.

<h4 id="mixing0"><span class="secno">4.4.1. </span>Mixing '::alternate' with
'::outside', '::before', and '::after'</h4>

<p>An '::alternate' pseudo-element can have any number of '::outside',
'::before', or '::after' pseudo-elements of its own, and each of these four
structural pseudo elements can have an '::alternate' pseudo-element of its
own.

<p>For example, the following rules:

<pre>
span                     { content: "span"; color: green; }
span::alternate          { content: "alternate1"; move-to: example1; }
span::alternate::before  { content: "before1"; }
span::after              { content: "after1" pending(example1); color: navy; }
span::after::alternate   { content: "alternate2"; move-to: example2; }
span::after(2)           { content: "after2" pending(example2); color: purple; }
</pre>

<p>...would result in the following rendering objects (including construction
lines for clarity):

<pre>
,----------------------------------------------------------------------.
|      ,-----------------------------------.                           |
|      |        ,------------------------. | ,-----------------------. |
|      |        | ,---------.            | | |        ,------------, | |
| <span class="green">span</span> | <span class="navy">after1</span> | | <span class="green">before1</span> | <span class="green">alternate1</span> | | | <span class="purple">after2</span> | <span class="navy">alternate2</span> | | |
|      |        | `---------'            | | |        `------------' | |
|      |        `------------------------' | '-----------------------' |
|      `-----------------------------------'                           |
`----------------------------------------------------------------------'
</pre>
<!--=======================================================================-->

<h3 id="block"><span class="secno">4.5. </span>Block markers: The '::marker'
pseudo-element</h3>

<p>For a '::marker' pseudo-element to be generated, its <span><a
href="#superior">superior parent</a></span> must have a computed 'display'
value of 'list-item'.

<p>For further details on the rendering model for list markers, see the CSS3
Lists module.
<!-- XXX once that is CR, the text can move over to here for further
tweaks as necessary. -->
<!--=======================================================================-->

<h3 id="line-markers"><span class="secno">4.6. </span>Line markers: The
'::line-marker' pseudo-element</h3>

<p>The '::line-marker' pseudo-element is positioned in exactly the same way
as the '::marker' pseudo-element, but appears on every line, not just the
first.

<p>Line boxes are responsible for generating '::line-marker' pseudo-elements.
For each line, one such marker is created for every block ancestor in the
current formatting context. (Formatting contexts are created by the root
element, floats, positioned content, cells, and inline-blocks. See the CSS3
Box Model module for more information. <a href="#CSS3BOX"
rel="biblioentry">[CSS3BOX]</a>) In addition, the '::line-marker'
pseudo-element itself must have a 'content' property that has a computed
value other than 'none' or 'inhibit'.
<!-- XXX need examples. Also, show overlap of nested blocks' ::marker,
::line-marker, etc. -->
<!--=======================================================================-->

<h2 id="moving"><span class="secno">5. </span>Moving content to later in the
document: the 'move-to' property</h2>

<table class="propdef" id="name-">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="move-to">move-to</dfn>

<tr>
<td><em>Value:</em>

<td>normal | here | &lt;identifier&gt;

<tr>
<td><em>Initial:</em>

<td>normal

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, and ::alternate

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>all

<tr>
<td><em>Computed&nbsp;value:</em>

<td>The specified value unless that is 'normal', as per the prose below.
</table>

<p>The 'move-to' property causes the element or pseudo-element to be removed
from the flow and reinserted at a later point in the document. The content is
reinserted using the 'pending()' <!-- XXX link --> value of the 'content'
property.

<p>This property applies to all elements as well as the '::before',
'::after', and '::alternate' pseudo-elements. The '::alternate'
pseudo-element in fact exists exclusively for the purpose of being moved by
this property, e.g. in the creation of footnotes.

<dl>
<dt><dfn id="normal">normal</dfn>

<dd>
<p>For '::alternate' pseudo-elements, if the superior parent uses the
'footnote' counter in its 'content' property then the computed value of
'move-to' is 'footnotes'.

<p>For '::alternate' pseudo-elements, if the superior parent uses the
'endnote' counter in its 'content' property then the computed value of
'move-to' is 'endnotes'.

<p>For '::alternate' pseudo-elements, if the superior parent uses the
'section-note' counter in its 'content' property then the computed value of
'move-to' is 'section-notes'.

<p>Otherwise the computed value of the move-to property is 'here'.

<dt><dfn id="here">here</dfn>

<dd>The element or pseudo-element is not moved. This value inhibits the
creation of '::alternate' pseudo-elements and any pseudo-elements that have
such a pseudo-element as a superior.

<dt>&lt;identifier&gt;

<dd>The element is not displayed at the current location, but at the next
occurrence of 'pending(&lt;identifier&gt;)' (where the identifiers match),
with all other elements moved to that point, in document order. If at the end
af the document (after the '::after' pseudo-elements of the root element)
there are outstanding elements, then they are all inserted in document order
at that point.
</dl>

<p>Note that elements and pseudo-elements that have been moved using
'move-to' still inherit from their associated pseudo-element or element, and
not from the element in which they are inserted. This is discussed in the
section on the '<a href="#pending-inheritance">pending()</a>'. value
<!--=======================================================================-->

<h2 id="the-display"><span class="secno">6. </span>The 'display' property</h2>

<table class="propdef" id="name-0">
<tbody>
<tr>
<td><em>Name:</em>

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

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

<td>normal

<tr>
<td><em>Initial:</em>

<td>normal

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, ::alternate, and ::outside

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>all

<tr>
<td><em>Computed&nbsp;value:</em>

<td>The specified value unless that is 'normal', as described below.
</table>

<p>Note: all values apply to the four pseudo-elements listed. Thus you can
create entire tables, insert rubies, or generate other complex layouts using
only generated content. This differs from CSS2 which only allowed a limited
subset of values to apply to each pseudo-element.

<dl>
<dt><dfn id="normal0">normal</dfn>

<dd>
<p>For elements, '::before', and '::after', computes to 'inline'.

<p>For '::alternate': if the superior parent's 'content' property uses the
'footnote', 'endnote', or 'section-note' property then it computes to
'list-item', otherwise it computes to 'block'. Note that if the 'move-to'
property doesn't compute to an identifier then the '::alternate'
pseudo-element isn't generated in the first place and therefore the value of
'display' is not relevant. In those cases, 'normal' still computes as
described above but the result does not affect layout.

<p>For '::outside', computes to 'none'. This prevents the generation of the
pseudo-element, but does not stop the pseudo-element's superior parent from
being generated (as it would if the '::outside' pseudo-element was replaced
by a real element in an attempt to produce the same layout).

<dt><dfn id="none">none</dfn>

<dt>

<dd>
<p>On elements, this inhibits the element, including any children and any
pseudo-elements which have this element as a superior parent, from being
rendered, anywhere.

<p>On pseudo-elements, this inhibits the creation of the element and
furthermore prevents the creation of any pseudo-elements which have this
pseudo-element as a superior.

<dt><dfn id="list-item">list-item</dfn>

<dd>
<p>To declare a list item, the <span class="property"><a
href="#display">'display'</a></span> property should be set to 'list-item'.
This, in addition to generating a '::marker' pseudo-element and enabling the
properties described in the Lists module, causes that element to increment
the list item counter 'list-item'. (This does not affect the specified or
computed values of the counter properties.)

<p>The 'list-item' counter is a real counter, and can be directly affected
using the <span class="property"><a
href="#counter-increment">'counter-increment'</a></span> and <span
class="property"><a href="#counter-reset">'counter-reset'</a></span>
properties. It can also be used in the 'counter()' and 'counters()' function
forms.

<p class="issue">The CSS3 box module may define other <span
class="property"><a href="#display">'display'</a></span> values which
generate a list marker. These should also affect the 'list-item' counter.
</dl>

<p>Note that the new list marker model makes the 'marker' display type
redundant. That display type is therefore obsolete in the CSS3 Lists model.

<p>Note that while this property doesn't apply to '::marker' pseudo-elements,
they only get generated if thir superior parent has a computed 'display'
value of 'list-item', and they are always rendered as if they had an
'inline-block' display type.

<p>Similarly, while this property applies to '::before', '::after',
'::alternate', '::outside' those pseudo-elements only get generated if they
have no superiors with computed values of 'display' that are 'none' or
superiors with computed values of 'content' that are 'inhibit'.
<!--=======================================================================-->

<h2 id="specifying"><span class="secno">7. </span><a
name="quotes-specify">Specifying quotes</a> with the <span
class="propinst-quotes"><a href="#quotes">'quotes'</a></span> property</h2>

<table class="propdef" id="name-1">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="quotes">quotes</dfn>

<tr>
<td><em>Value:</em>

<td>foo | bar

<tr>
<td><em>Initial:</em>

<td>text

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, and @footnote areas

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>visual

<tr>
<td><em>Computed&nbsp;value:</em>

<td>specified value
</table>

<p>This property specifies quotation marks for any number of embedded
quotations. Values have the following meanings:

<dl>
<dt><dfn id="none0">none</dfn>

<dd>The 'open-quote' and 'close-quote' values of the 'content' property
produce no quotations marks, as if they were 'no-open-quote' and
'no-close-quote' respectively.

<dt>[ &lt;string&gt; &lt;string&gt; ]+

<dd>Values for the 'open-quote' and 'close-quote' values of the 'content'
property are taken from this list of pairs of quotation marks (opening and
closing). The first (leftmost) pair represents the outermost level of
quotation, the second pair the first level of embedding, etc. The user agent
must apply the appropriate pair of quotation marks according to the level of
embedding.
</dl>

<div class="example">
<p>For example, applying the following style sheet:

<pre class="example">
/* Specify pairs of quotes for two levels in two languages */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "+" ";" "&lt;" "&gt;" }

/* Insert quotes before and after Q element content */
q::before { content: open-quote }
q::after  { content: close-quote }
</pre>

<p>to the following HTML fragment:

<pre class="html-example">
&lt;HTML lang="en"&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Quotes&lt;/TITLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;&lt;Q&gt;Quote me!&lt;/Q&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

<p>would allow a user agent to produce:

<pre class="ascii-art">
"Quote me!"
</pre>

<p>while this HTML fragment:

<pre class="html-example">
&lt;HTML lang="no"&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Quotes&lt;/TITLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;&lt;Q&gt;Tr&oslash;ndere gr&aring;ter n&aring;r &lt;Q&gt;Vinsjan p&aring; kaia&lt;/Q&gt; blir deklamert.&lt;/Q&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

<p>would produce:

<pre class="ascii-art">
+Tr&oslash;ndere gr&aring;ter n&aring;r &lt;Vinsjan p&aring; kaia&gt; blir deklamert.;
</pre>
</div>

<div class="note">
<p><em>Note.</em> While the quotation marks specified by 'quotes' in the
previous examples are conveniently located on computer keyboards, high
quality typesetting would require different ISO 10646 characters. The
following informative table lists some of the ISO 10646 quotation mark
characters:

<table>
<tbody>
<tr>
<th colspan="2">Codepoint

<th>Description

<tr>
<td>&#x0022;

<td>U+0022

<td>QUOTATION MARK (the ASCII double quotation mark)

<tr>
<td>&#x0027;

<td>U+0027

<td>APOSTROPHE (the ASCII single quotation mark)

<tr>
<td>&#x2039;

<td>U+2039

<td>SINGLE LEFT-POINTING ANGLE QUOTATION MARK

<tr>
<td>&#x203A;

<td>U+203A

<td>SINGLE RIGHT-POINTING ANGLE QUOTATION MARK

<tr>
<td>&#x00AB;

<td>U+00AB

<td>LEFT-POINTING DOUBLE ANGLE QUOTATION MARK

<tr>
<td>&#x00BB;

<td>U+00BB

<td>RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK

<tr>
<td>&#x2018;

<td>U+2018

<td>LEFT SINGLE QUOTATION MARK (single high-6)

<tr>
<td>&#x2019;

<td>U+2019

<td>RIGHT SINGLE QUOTATION MARK (single high-9)

<tr>
<td>&#x201C;

<td>U+201C

<td>LEFT DOUBLE QUOTATION MARK (double high-6)

<tr>
<td>&#x201D;

<td>U+201D

<td>RIGHT DOUBLE QUOTATION MARK (double high-9)

<tr>
<td>&#x201E;

<td>U+201E

<td>DOUBLE LOW-9 QUOTATION MARK (double low-9)
</table>
</div>

<h3 id="inserting2"><span class="secno">7.1. </span>Inserting quotes with the
'content' property</h3>

<p>Quotation marks are inserted in appropriate places in a document with the
'open-quote' and 'close-quote' values of the 'content' property. Each
occurrence of 'open-quote' or 'close-quote' is replaced by one of the strings
from the value of 'quotes', based on the depth of nesting.

<p>'Open-quote' refers to the first of a pair of quotes, 'close-quote' refers
to the second. Which pair of quotes is used depends on the nesting level of
quotes: the number of occurrences of 'open-quote' in all generated text
before the current occurrence, minus the number of occurrences of
'close-quote'. If the depth is 0, the first pair is used, if the depth is 1,
the second pair is used, etc. If the depth is greater than the number of
pairs, the last pair is repeated.

<p>Note that this quoting depth is independent of the nesting of the source
document or the formatting structure.

<p>Some typographic styles require open quotation marks to be repeated before
every paragraph of a quote spanning several paragraphs, but only the last
paragraph ends with a closing quotation mark. In CSS, this can be achieved by
inserting "phantom" closing quotes. The keyword 'no-close-quote' decrements
the quoting level, but does not insert a quotation mark.

<div class="example">
<p>The following style sheet puts opening quotation marks on every paragraph
in a BLOCKQUOTE, and inserts a single closing quote at the end:

<pre>
BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }
</pre>

<p>This relies on the last paragraph being marked with a class "last", since
there are no selectors that can match the last child of an element.
</div>

<p>For symmetry, there is also a <span class="index-def" id="no-open-quote0"
title="no-open-quote"><a href="#no-open-quote"></a><a class="value-def"
name="value-def-no-open-quote">'no-open-quote'</a></span> keyword, which
inserts nothing, but increments the quotation depth by one.

<div class="note">
<p> <em>Note.</em> If a quotation is in a different language than the
surrounding text, it is customary to quote the text with the quote marks of
the language of the surrounding text, not the language of the quotation
itself.
</div>

<div class="example">
<p>For example, French inside English:

<blockquote>
<p>The device of the order of the garter is &#8220;Honi soit qui mal y
pense.&#8221;
</blockquote>
English inside French:
<blockquote>
<p>Il disait: +&nbsp;Il faut mettre l'action en &#8249;&nbsp;fast
forward&nbsp;&#8250;.;
</blockquote>

<p>A style sheet like the following will set the 'quotes' property so that
'open-quote' and 'close-quote' will work correctly on all elements. These
rules are for documents that contain only English, French, or both. One rule
is needed for every additional language. Note the use of the child combinator
(">") to set quotes on elements based on the language of the surrounding
text:

<pre>
:lang(fr) > * { quotes: "+" ";" "\2039" "\203A" }
:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }
</pre>

<p>The quotation marks for English are shown here in a form that most people
will be able to type. If you can type them directly, they will look like
this:

<pre>
:lang(fr) > * { quotes: "+" ";" "&#8249;" "&#8250;" }
:lang(en) > * { quotes: "&#8220;" "&#8221;" "&#8216;" "&#8217;" }

</pre>
</div>
<!--=======================================================================-->

<h2 id="counters"><span class="secno">8. </span>Automatic counters and
numbering: the 'counter-increment' and 'counter-reset' properties</h2>

<p>Automatic numbering in CSS2 is controlled with two properties,
'counter-increment' and 'counter-reset'. The <span class="index-def"
id="counters1" title="counters">counters</span> defined by these properties
are used with the 'counter()' and 'counters()' functions of the the 'content'
property.

<table class="propdef" id="name-2">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="counter-increment">counter-increment</dfn>

<tr>
<td><em>Value:</em>

<td>[ &lt;identifier&gt; &lt;integer&gt;? ]+ | none

<tr>
<td><em>Initial:</em>

<td>note

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, @footnote areas, and @page context

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>alll

<tr>
<td><em>Computed&nbsp;value:</em>

<td>specified value
</table>

<table class="propdef" id="name-3">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="counter-reset">counter-reset</dfn>

<tr>
<td><em>Value:</em>

<td>[ &lt;identifier&gt; &lt;integer&gt;? ]+ | none

<tr>
<td><em>Initial:</em>

<td>note

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, @footnote areas, and @page context

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>alll

<tr>
<td><em>Computed&nbsp;value:</em>

<td>specified value
</table>

<p>The 'counter-increment' property accepts one or more names of counters
(identifiers), each one optionally followed by an integer. The integer
indicates by how much the counter is incremented for every occurrence of the
element. The default increment is 1. Zero and negative integers are allowed.

<p>The 'counter-reset' property also contains a list of one or more names of
counters, each one optionally followed by an integer. The integer gives the
value that the counter is set to on each occurrence of the element. The
default is 0.

<p>If 'counter-increment' refers to a counter that is not in the <a
href="#scope">scope (see below</a>) of any 'counter-reset', the counter is
assumed to have been reset to 0 by the root element.

<div class="example">
<p>This example shows a way to number chapters and sections with "Chapter 1",
"1.1", "1.2", etc.

<pre>
H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
</pre>
</div>

<p>If an element or pseudo-element resets or increments a counter and also
uses it (in its 'content' property), the counter is used <em>after</em> being
reset or incremented.

<p>If an element or pseudo-element both resets and increments a counter, the
counter is reset first and then incremented.

<p>The 'counter-reset' property follows the cascading rules. Thus, due to
cascading, the following style sheet:

<pre class="example">
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
</pre>

<p>will only reset 'imagenum'. To reset both counters, they have to be
specified together:

<pre class="example">
H1 { counter-reset: section -1 imagenum 99 }
</pre>

<h3 id="nested"><span class="secno">8.1. </span><a name="scope">Nested
counters and scope</a></h3>

<p>Counters are "self-nesting", in the sense that re-using a counter in a
child element automatically creates a new instance of the counter. This is
important for situations like lists in HTML, where elements can be nested
inside themselves to arbitrary depth. It would be impossible to define
uniquely named counters for each level.

<div class="example">
<p>Thus, the following suffices to number nested list items. The result is
very similar to that of setting 'display:list-item' and 'list-style: inside'
on the LI element:

<pre>
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
</pre>
</div>

<p>The self-nesting is based on the principle that every element or
pseudo-element that has a 'counter-reset' for a counter X, creates a fresh
counter X, the <dfn id="scope1">scope</dfn> of which is the element or
pseudo-element, its following siblings, and all the descendants of the
element or pseudo-element and its following siblings.

<p>In the example above, an OL will create a counter, and all children of the
OL will refer to that counter.

<div class="html-example">
<p>If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup> instance
of the "item" counter, and by "(" and ")" the beginning and end of a scope,
then the following HTML fragment will use the indicated counters. (We assume
the style sheet as given in the example above).

<pre>
&lt;OL&gt;               &lt;!-- (set item[0] to 0          --&gt;
  &lt;LI&gt;item         &lt;!--  increment item[0] (= 1)   --&gt;
  &lt;LI&gt;item         &lt;!--  increment item[0] (= 2)   --&gt;
    &lt;OL&gt;           &lt;!--  (set item[1] to 0         --&gt;
      &lt;LI&gt;item     &lt;!--   increment item[1] (= 1)  --&gt;
      &lt;LI&gt;item     &lt;!--   increment item[1] (= 2)  --&gt;
      &lt;LI&gt;item     &lt;!--   increment item[1] (= 3)  --&gt;
        &lt;OL&gt;       &lt;!--   (set item[2] to 0        --&gt;
          &lt;LI&gt;item &lt;!--    increment item[2] (= 1) --&gt;
        &lt;/OL&gt;      &lt;!--   )                        --&gt;
        &lt;OL&gt;       &lt;!--   (set item[3] to 0        --&gt;
          &lt;LI&gt;     &lt;!--    increment item[3] (= 1) --&gt;
        &lt;/OL&gt;      &lt;!--   )                        --&gt;
      &lt;LI&gt;item     &lt;!--  increment item[0] (= 3)   --&gt;
  &lt;LI&gt;item         &lt;!--  increment item[0] (= 4)   --&gt;
&lt;/OL&gt;              &lt;!-- )                          --&gt;
&lt;OL&gt;               &lt;!-- (reset item[4] to 0        --&gt;
  &lt;LI&gt;item         &lt;!--  increment item[4] (= 1)   --&gt;
  &lt;LI&gt;item         &lt;!--  increment item[4] (= 2)   --&gt;
&lt;/OL&gt;              &lt;!-- )                          --&gt;
</pre>
</div>

<p>The 'counters()' function generates a string composed of the values of all
counters with the same name, separated by a given string.

<div class="example">
<p>

<p>The following style sheet numbers nested list items as "1", "1.1",
"1.1.1", etc.

<pre>
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</pre>
</div>

<h3 id="counter"><span class="secno">8.2. </span><a
name="counter-styles">Counter styles</a></h3>

<p>By default, counters are formatted with decimal numbers, but all the
styles available for the 'list-style-type' property are also available for
counters. The notation is:

<pre>
counter(<var>name</var>)
</pre>

<p>for the default style, or:

<pre>
counter(<var>name</var>, &lt;'list-style-type'&gt;)
</pre>

<p>All the styles are allowed, including the glyph types such as 'disc',
'circle', and 'square'. The 'none' value is also allowed, and causes the
counter to generate nothing.

<div class="example">
<pre>
H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) } /* inserts nothing */
</pre>
</div>

<h3 id="counters0"><span class="secno">8.3. </span>Counters in elements with
'display: none'</h3>

<p>An element that is not displayed ('display' set to 'none') cannot
increment or reset a counter.

<div class="example">
<p>For example, with the following style sheet, H2s with class "secret" do
not increment 'count2'.

<pre>
H2.secret {counter-increment: count2; display: none}
</pre>
</div>

<p>Elements with <span class="propinst-visibility">'visibility'</span> set to
'hidden', on the other hand, <em>do</em> increment counters.

<h3 id="reserved"><span class="secno">8.4. </span>Reserved Counter Names</h3>

<p>The 'list-item', 'section-note', 'endnote', and 'footnote' counters are
not reserved. They are ordinary counters that happen to be incremented and
used by other properties as well as the counter properties.

<p>The 'total-pages' counter, however, is reserved. Resetting or increasing
this counter has no effect. See the Paged Media module <a href="#CSS3PAGE"
rel="biblioentry">[CSS3PAGE]</a> for more information on this counter.
<!--=======================================================================-->

<h2 id="strings"><span class="secno">9. </span>Named strings</h2>

<p>CSS3 introduces 'named strings', which are the textual equivalent of
counters and which have a distinct namespace from counters. Named strings
follow the same nesting rules as counters. The 'string-set' property accepts
values similar to the 'content' property, including the extraction of the
current value of counters.

<p>Named strings are a convenient way to pull metadata out of the document
for insertion into headers and footers. In HTML, for example, META elements
contained in the document HEAD can set the value of named strings. In
conjunction with attribute selectors, this can be a powerful mechanism:

<pre>
META[author] { string-set: author attr(author); }
HEAD &gt; TITLE { string-set: title contents; }
@page:left {
  @top {
    text-align: left;
    vertical-align: middle;
    content: string(title);
  }
}
@page:right {
  @top {
    text-align: right;
    vertical-align: middle;
    content: string(author);
  }
}
</pre>

<p class="issue">This section is missing a property definition.
<!-- XXX -->

<p class="issue">This section is missing a definition of the string()
function.
<!-- XXX -->

<div class="example">
<p>The following example captures the contents of H1 elements, which
represent chapter names in this hypothetical document.

<pre>H1 { string-set: chapter contents; }</pre>

<p>When an H1 element is encountered, the 'chapter' string is set to the
element's textual contents, and the previous value of 'chapter', if any, is
overwritten.
</div>
<!--=======================================================================-->

<h2 id="counter0"><span class="secno">10. </span>'@counter' and '@string'</h2>

<p>It's possible that the page in question itself contains multiple elements
that set counters or increment strings. Should the formatter use the value at
the start of the page or at the end of the page? To address this question,
authors may use @counter or @string declaration blocks and the 'page-policy'
property, which applies only to strings and counters.

<p class="issue">What about counter-policy and string-policy
<!-- XXX what about them?
anyone remember what they were supposed to be? -->

<h3 id="counter1"><span class="secno">10.1. </span>'@counter'</h3>

<p>This 'list-style-type' property can be used with an '@counter' rule to
change the counter's default counter style. This is typicially used to
change, for example, the footnote style:

<pre>
@counter footnote {
   list-style-type: super-decimal;
}
</pre>

<p>The default list style types for counters is 'decimal' except for the
'footnote' counter which defaults to 'footnotes'.

<p class="issue">Syntax still to come.

<h3 id="string"><span class="secno">10.2. </span>'@string'</h3>

<p class="issue">Syntax still to come.

<h3 id="page-policy"><span class="secno">10.3. </span>Determining which
counter or string-set value to use: the 'page-policy' property</h3>

<table class="propdef" id="namepage-policy">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="page-policy0">page-policy</dfn>

<tr>
<td><em>Value:</em>

<td>start | first | last

<tr>
<td><em>Initial:</em>

<td>start

<tr>
<td><em>Applies to:</em>

<td>@counter and @string blocks

<tr>
<td><em>Inherited:</em>

<td>N/A

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>paged

<tr>
<td><em>Computed&nbsp;value:</em>

<td>specified value
</table>

<p>'page-policy' determines which page-based occurance of a given element is
applied to a counter or string value:

<dl>
<dt>start

<dd>Takes the value of the counter or string at the beginning of the page
(before applying style to the elements of the page, but after applying it to
the @page context itself).

<dt>first

<dd>Takes the value after the first state change in the counter or string
during processing of the page.

<dt>last

<dd>Takes the value following the final state change on the page.
</dl>

<div class="example">
<p>The following example places the chapter name in the header, specifying
that it is the value of the string at the end of the page. Example:

<pre>
@string chapter { page-policy: last; }
@page {
  size: 21.0cm 29.7cm; /* A4 */
  @top {
    text-align: right;
    vertical-align: center;
    content: string (chapter);
  }
}
</pre>
</div>

<p>To use the chapter name as it was when the processing of the page started,
the designer would specify a 'page-policy' of 'start' instead of 'last'.
Designers can also use the value of a string or counter after its first state
change on a page by specifying 'first'.
<!--=======================================================================-->

<h2 id="inserting3"><span class="secno">11. </span><a
name="content-insert">Inserting and replacing content</a> with the <span
class="propinst-content"><a href="#content">'content'</a></span> property</h2>

<table class="propdef" id="name-4">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="content">content</dfn>

<tr>
<td><em>Value:</em>

<td>[ &lt;uri&gt; ',' ]* [ normal | none | inhibit | &lt;content-list&gt; ]

<tr>
<td><em>Initial:</em>

<td>normal

<tr>
<td><em>Applies To:</em>

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, and @footnote areas

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>N/A

<tr>
<td><em>Media:</em>

<td>all

<tr>
<td><em>Computed&nbsp;value:</em>

<td>The specified value with each occurrence of 'normal' expanded as per the
prose below.
</table>

<p>The 'content' property dictates what is rendered inside the element or
pseudo-element. It takes a comma separated list of URIs followed by a space
separated list of tokens. If there are multiple URIs provided, then each is
tried in turn until a value which is both available and supported is found.
The last value is used as a fallback if the others fail.

<dl>
<dt>&lt;uri&gt;

<dd>
<p>If the value is the only value in the list, as the two URIs in the example
below are:

<pre>
h1 { content: url(header/mng), url(header/png); }
</pre>

<p>...then if the URI is available and the format is supported, then the
element or pseudo-element becomes a replaced element, otherwise, the next
item in the comma separated list is used, if any. In the example above, if
'header/mng' wasn't in a supported format, then 'header/png' would have been
used instead. If no alternatives exist, then 'none' is used as a final
fallback, so in the example above, if 'header/png' wasn't available either,
then the &lt;h1&gt; element would be empty.

<p>Thus to make an element fallback on its contents, you have to explicitly
give 'contents' as a fallback:

<pre>content: url(1), url(2), url(3), contents;</pre>

<p>If the URI is not the only value in the list, as the second URI in the
following example:

<pre>h1 { content: url(welcome), "Welcome to: " url(logo); }</pre>

<p>...then if the file is available and the format is supported, then an
anonymous replaced inline element is inserted, otherwise the image is ignored
(as if it hadn't been given at all).

<p>When a URI is used as replaced content, it <a
href="#replacedContent">affects the generation</a> of '::before' and
'::after' pseudo-elements.

<dt><dfn id="normal1">normal</dfn>

<dd>
<p>For an element, this computes to 'contents'.

<p>For '::alternate', if the superior parent uses the 'footnote', 'endnote',
or 'section-note' counter in its 'content' property then the computed value
of 'content' is 'contents', otherwise it computes to 'inhibit'.

<p>For '::before', '::after', and '::line-marker' this computes to 'inhibit'.

<p>For '::marker', if the superior parent's superior parent uses 'footnote'
in its 'content' property then 'normal' computes to the computed value of the
'list-style-image' property if the list-style-image is not 'none', otherwise
'counter(footnote, &lt;list-style-type&gt;) "<var>suffix</var>"' where
&lt;list-style-type&gt; is the computed value of the 'list-style-type'
property if that property is not 'none' and <var>suffix</var> is the suffix
appropriate for that list style type, otherwise 'inhibit'.

<p>For '::marker', if the superior parent's superior parent uses 'endnote' in
its 'content' property then 'normal' computes to the computed value of the
'list-style-image' property if the list-style-image is not 'none', otherwise
'counter(endnote, &lt;list-style-type&gt;) "<var>suffix</var>"' where
&lt;list-style-type&gt; is the computed value of the 'list-style-type'
property if that property is not 'none' and <var>suffix</var> is the suffix
appropriate for that list style type, otherwise 'inhibit'.

<p>For '::marker', if the superior parent's superior parent uses
'section-note' in its 'content' property then 'normal' computes to the
computed value of the 'list-style-image' property if the list-style-image is
not 'none', otherwise 'counter(section-note, &lt;list-style-type&gt;)
"<var>suffix</var>"' where &lt;list-style-type&gt; is the computed value of
the 'list-style-type' property if that property is not 'none' and
<var>suffix</var> is the suffix appropriate for that list style type,
otherwise 'inhibit'.

<p>Otherwise, for '::marker', if the computed value of 'display' for the
superior parent is 'list-item' then 'normal' computes to the computed value
of the 'list-style-image' property if the list-style-image is not 'none',
otherwise 'counter(list-item, &lt;list-style-type&gt;) "<var>suffix</var>"'
where &lt;list-style-type&gt; is the computed value of the 'list-style-type'
property if that property is not 'none' and <var>suffix</var> is the suffix
appropriate for that list style type, otherwise 'inhibit'.

<p>For the '@footnote' area, it computes to 'pending(footnote)'.

<p>For margin areas, it computes to 'none'.

<dt><dfn id="none1">none</dfn>

<dd>
<p>On elements, this inhibits the children of the element from being rendered
as children of this element, as if the element was empty.

<p>On pseudo-elements it causes the pseudo-element to have no content.

<p>In neither case does it prevent any pseudo-elements which have this
element or pseudo-element as a superior from being generated.

<dt><dfn id="inhibit">inhibit</dfn>

<dd>
<p>On elements, this inhibits the children of the element from being rendered
as children of this element, as if the element was empty.

<p>On pseudo-elements, this inhibits the creation of the pseudo-element, as
if 'display' computed to 'none'.

<p>In both cases, this further inhibits the creation of any pseudo-elements
which have this pseudo-element as a superior.

<dt><dfn id="ltcontent-listgt">&lt;content-list&gt;</dfn>

<dd> <!-- XXX find a sensible order for this -->
<p>[ pending(&lt;identifier&gt;) | &lt;string&gt; | contents | footnote |
endnote | section-note | list-item | &lt;counters&gt; | &lt;strings&gt; |
open-quote | close-quote | no-open-quote | no-close-quote | &lt;glyph&gt; |
&lt;uri&gt; | &lt;date&gt; | document-url | &lt;target&gt; ]+

<p>One or more of the following values, concatenated.

<dl>
<dt><dfn id="pendingltidentifiergt">pending(&lt;identifier&gt;)</dfn>

<dd>
<p>This causes all elements and pseudo-elements whose 'move-to' property
computes to the specified identifier to be inserted as children of the
current element (or pseudo-element). Note: This doesn't change the DOM, and
elements and pseudo-elements that have been moved inherit from their position
in the DOM, not from their new position.

<p id="pending-inheritance">This must be the case, because otherwise it would
be impossible to determine the value of 'move-to'. Unfortunately, this can
cause some unfortunate discontinuities, such as adjacent footnotes using
different fonts because they were moved from elements with different fonts.
It is therefore important that moved content be styled with the new location
in mind.

<p>Note that only elements and pseudo-element that have not yet been
reinserted into content are moved. For example:

<pre>
moved { move-to: insert; }
insert { content: pending(insert); }

&lt;root&gt;
  &lt;moved&gt; A &lt;/moved&gt;
  1
  &lt;insert/&gt;
  2
  &lt;moved&gt; B &lt;/moved&gt;
  3
  &lt;insert/&gt;
&lt;/root&gt;
</pre>

<p>...would result in "<samp>1 A 2 3 B</samp>".

<p>If used on an element or pseudo-element (particularly '::alternate') which
has a 'move-to' property with a computed value other than 'here', the content
pending at the pseudo-element's superior's position is inserted, not the
content pending at the element or pseudo-element's insertion point. Similarly
if used on a child of an element that has been moved: the 'content' property
is evaluated before the element is inserted in its new position. This should
prevent an element ever being inserted into itself or other such existential
conundrums.

<p>Counters on content that is moved in this way are evaluated at the point
of origin, not the insertion point.

<p>The identifiers 'here' and 'normal' are valid, in that they do not cause a
parse error and are not ignored, but they are useless as the 'move-to'
property cannot ever be set to an identifier with either of those values.

<p class="issue">Need to define exactly how this interacts with
'position:fixed'. Does 'position:fixed' cause multiple rendering objects to
be created, one per page? If so where does 'move-to' on a 'position:fixed'
element move from?

<dt>"" (the empty string)

<dd>
<p>If the element or pseudo-element's 'display' property computes to anything
but 'inline' then the element or pseude-element contains an empty anonymous
inline box, otherwise the element contains an empty string.

<p>(This is a formal way of saying that an empty string is different from
'none' in that it forces the creation of a line box, even if the line box
would be empty.)

<dt>&lt;string&gt;

<dd>
<p>The element or pseudo-element contains the specified string. Occurrences
of line-feed or space characters in the string are handled according to the
properties given in the Text module.

<dt><dfn id="contents0">contents</dfn>

<dd>
<p>The element's descendents. Since this can only be used once per element
(you can't duplicate the children if, e.g., one is a plugin or form control),
it is handled as follows:

<dl>
<dt>If set on the element:

<dd>
<p>Always honoured. Note that this is the default, since the initial value of
'content' is 'normal' and 'normal' computes to 'contents' on an element.

<dt>If set on a '::marker' or '::line-marker' pseudo-element:

<dd>
<p>Evaluates to nothing (like 'none').

<dt>If set on one of the element's other pseudo-elements:

<dd>
<p>Check to see that it is not set on a "previous" pseudo-element, in the
following order, depth first:

<ol>
<li> the element itself

<li> ::alternate

<li> ::before

<li> ::after
</ol>

<p> If it is already used, then it evaluates to nothing (like 'none'). Only
pseudo-elements that are actually generated are checked. Thus

<pre>
/* ::after(2) { content: inhibit; } /* implied by initial value */
::after(9999) { content: contents }
</pre>

<p> ...would typically not change anything.

<p> So for example, in the following case:

<pre>
foo { content: none; }
foo::before { content: '[' counter(footnote) ']' contents; }
foo::alternate { content: counter(footnote) '. ' contents; }
</pre>

<p> ...the '::before' pseudo-element's contents would become '[1]', and the
footnote would contain '1. ' followed by the element's contents, because the
'::alternate' takes priority over the '::before' pseudo-element at the same
depth.

<p> However, in the following case:

<pre>/* foo { content: normal; }   /* this is the initial value */
foo::after { content: contents; }
</pre>

<p> ...the element's 'content' property would compute to 'contents' and the
after pseudo element would have no contents (equivalent to 'none') and thus
would not appear.
</dl>

<p> Note that while it is useless to include 'contents' twice in a single
'content' property, that is not a parse error. The second occurrence simply
has no effect, as it has already been used. It is also not a parse error to
use it on a marker pseudo-element, it is only during the rendering stage that
it gets treated like 'none'.

<dt><dfn id="footnote1">footnote</dfn>

<dd>
<p>Shorthand for 'counter(footnote, normal)'. This is intended to be used on
the in-flow part of a footnote.

<dt><dfn id="endnote">endnote</dfn>

<dd>
<p>Shorthand for 'counter(endnote, normal)'. This is intended to be used on
the in-flow part of a endnote.

<dt><dfn id="section-note">section-note</dfn>

<dd>
<p>Shorthand for 'counter(section-note, normal)'. This is intended to be used
on the in-flow part of a section-note.

<dt><dfn id="list-item0">list-item</dfn>

<dd>
<p>Shorthand for 'counter(list-item, normal)'. Note that this is <em>not</em>
equivalent to 'normal' when set on a '::marker' pseudo-element that has a
superior with 'display' set to 'list-item', as it ignores the 'list-style'
properties.

<dt><dfn id="ltcountersgt">&lt;counters&gt;</dfn>

<dt>

<dd>
<p>Counters may be specified with two different functions: 'counter()' or
'counters()'. The former has two forms: 'counter(<var>name</var>)' or
'counter(<var>name</var>, <var>style</var>)'. The generated text is the value
of the named counter at this point in the formatting structure; it is
formatted in the indicated style (the default is specified using '@counter'
rules). The latter function also has two forms: 'counters(<var>name</var>,
<var>string</var>)' or 'counters(<var>name</var>, <var>string</var>,
<var>style</var>)'. The generated text is the value of all counters with the
given name at this point in the formatting structure, separated by the
specified string. The counters are rendered in the indicated style (the
default is again specified using '@counter' rules). See the section on <a
href="#counters">automatic counters and numbering</a> for more information.

<dt><dfn id="ltstringsgt">&lt;strings&gt;</dfn>

<dt>

<dd>
<p>Set strings may be specified with the 'string(<var>name</var>)'
expression. The generated text is the value of the named string at this point
in the formatting structure. See the section on <a href="#strings">named
strings</a> for more information.

<dt><dfn id="open-quote">open-quote</dfn> and <dfn
id="close-quote">close-quote</dfn>

<dd>
<p>These values are replaced by the appropriate string from the 'quotes'
property.

<dt><dfn id="no-open-quote">no-open-quote</dfn> and <dfn
id="no-close-quote">no-close-quote</dfn>

<dd>
<p>Inserts nothing (as in 'none'), but increments (decrements) the level of
nesting for quotes.

<dt>&lt;glyph&gt;

<dd>
<p>Inserts the specified symbol. The available symbols are:
<!-- XXX keep this synchronised with the Lists module.
         last synchronised 2003-02-21 -->

<dl><!-- these definitions are stupid. circle and square should both have the same fill type, disc and
 box should have the opposite fill type. I hate having to be backwards compatible. -->

<dt><dfn id="box">box</dfn>

<dd>A hollow square. (like &#x25A1; U+25A1 WHITE SQUARE, &#x25FB; U+25FB
WHITE MEDIUM SQUARE, or &#x25FD; U+25FD WHITE MEDIUM SMALL SQUARE)
<!-- in MacIE (?) -->

<dt><dfn id="check">check</dfn>

<dd>A check mark. On interactive media, it is suggested that the same glyph
which is used on the platform to render a checked menu item be used for
'check'. (like &#x2713; U+2713 CHECK MARK)
<!-- UI module -->

<dt><dfn id="circle">circle</dfn>

<dd>A hollow circle. (like &#x25E6; U+25E6 WHITE BULLET)
<!-- in Mozilla, WinIE, Opera, HTML4 -->

<dt><dfn id="diamond">diamond</dfn>

<dd>A filled diamond. On interactive media, it is suggested that the same
glyph which is used on the platform next to a selected menu item be used for
'diamond'. On some platforms, this is similar to 'disc'. (like &#x25C6;
U+25C6 BLACK DIAMOND or &#x2666; U+2666 BLACK DIAMOND SUIT)
<!-- UI
 module -->

<dt><dfn id="disc">disc</dfn>

<dd>A filled circle. (like &#x2022; U+2022 BULLET)
<!-- in Mozilla, WinIE, Opera, HTML4 -->

<dt><dfn id="hyphen">hyphen</dfn>

<dd>A hyphen bullet. (like &#x2043; U+2043 HYPHEN BULLET or &#x2013; U+2013
EN DASH)

<dt><dfn id="square">square</dfn>

<dd>A filled square. (like &#x25A0; U+25A0 BLACK SQUARE, &#x25FC; U+25FC
BLACK MEDIUM SQUARE, or &#x25FE; U+25FE BLACK MEDIUM SMALL SQUARE)
<!-- in Mozilla, WinIE. A hollow square in Opera, HTML4. -->
<!-- &#x2023; U+2023 TRIANGULAR BULLET
      &#x204C; U+204C BLACK LEFTWARDS BULLET
      &#x204D; U+204D BLACK RIGHTWARDS BULLET -->
</dl>

<p>For more information on the list of symbols and their definitions, see the
Lists module <a href="#CSS3LIST" rel="biblioentry">[CSS3LIST]</a>.

<dt>&lt;date&gt;

<dd>
<p>The 'date(format)' expression returns the current date and/or time,
formatted according to the specified formatting string. Formatting strings
will be defined in a future version of this draft and may be based on POSIX
date formatting strings. <!-- XXX -->

<dt><dfn id="document-url">document-url</dfn>

<dd>
<p>The URI of the current document. For local files, this may simply be the
local file name.

<dt>&lt;target&gt;

<dd>
<p>Using the target expressions, authors can write cross-references. <span
class="issue">Need to write this up.</span> <!-- XXX copy from
http://www.w3.org/Style/Group/2001/MO-css3-page-20010205 -->
<!-- we want target-content,
target-attr, target-counter and target-string. -->
<!-- What are the implementation
ramifications of this? Is it possible to get into an infinite loop? -->
</dl>
</dl>
<!--=======================================================================-->

<h2 id="replacedContent"><span class="secno">12. </span>Replaced content</h2>

<p>If the computed value of the part of the 'content' property that ends up
being used is a single URI, then the element or pseudo-element is a replaced
element. The box model defines different rules for the layout of replaced
elements than normal elements. Replaced elements do not have '::before' and
'::after' pseudo-elements; the 'content' property in the case of replaced
content replaces the entire contents of the element's box.
<!-- hehe. I expect at least one person to complain about this and suggest that ::before and
::after on replaced content becomes sibling content. Well, they will need to explain:

  * how this works with floats and abs pos content (is it moving both, does it leave the gen
    con in-flow...)

  * how this works with rel pos content (what moves?)

  * what ::outside::before matches in this case

-->

<p>To insert text around replaced content, '::outside::before' and
'::outside::after' may be used.
<!--=======================================================================-->

<h3 id="the-crop"><span class="secno">12.1. </span>The 'crop' property</h3>

<table class="propdef" id="name-5">
<tbody>
<tr>
<td><em>Name:</em>

<td><dfn id="crop">crop</dfn>

<tr>
<td><em>Values:</em>

<td>&lt;shape&gt; | auto

<tr>
<td><em>Initial:</em>

<td>auto

<tr>
<td><em>Applies To:</em>

<td>replaced elements

<tr>
<td><em>Inherited:</em>

<td>no

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

<td>relative to intrinsic size

<tr>
<td><em>Media:</em>

<td>visual

<tr>
<td><em>Computed&nbsp;value:</em>

<td>The specified value.
</table>

<p>This property allows a replaced element to be just a rectangular area of
an object, instead of the whole object.

<p>The 'crop' property adds a step when determining the intrinsic dimensions
of an element. With 'crop', the notion of <em>computed</em> intrinsic width
and height are introduced. When the layout algorithms reference the
"intrinsic width" (and/or height), they are referring to the computed
intrinsic width and height.

<p>The computed intrinsic width and height of an element are the result of
applying the crop to the actual intrinsic width and height of the element.

<dl>
<dt>'auto'

<dd>The element's computed intrinsic width and height are the same as its
actual intrinsic width and height.

<dt>rect(<var>top</var>, <var>right</var>, <var>bottom</var>,
<var>left</var>)

<dd>Each of the four arguments can be a <var>&lt;length&gt;</var> or a
<var>&lt;percentage&gt;</var>. All percentage values are computed relative to
the intrinsic dimensions of the element, if there is one. Values are offsets
relative to the top left of the element. The computed intrinsic width and
height of the element are determined by subtracting the left from the right
for the width, and similarly top from bottom for the height. However, if this
computation results in a negative value, it is considered to be zero.

<dt>inset-rect(<var>top</var>, <var>right</var>, <var>bottom</var>,
<var>left</var>)

<dd>Like rect(), except that the values are offsets relative to the
respective edges of the element.
</dl>

<p>If the element does not have an intrinsic width, the UA may in some cases
be able to infer the intrinsic width that the style sheet writer assumed.
First the UA must find the computed 'width' and computed 'height' and then
the intrinsic width can be found as follows (the intrinsic height is
analogous):

<ol>
<li>If <span class="property"><a href="#crop">'crop'</a></span> is <span
class="css">'auto'</span>, the assumed intrinsic width is the same as the
computed value of <span class="property">'width'</span>

<li>If <span class="property"><a href="#crop">'crop'</a></span> is <span
class="css">'rect(t, r, b, l)'</span> and r is a percentage, the intrinsic
width can be solved from the equation: r = computed <span
class="property">'width'</span> + l

<li>If <span class="property"><a href="#crop">'crop'</a></span> is <span
class="css">'rect(t, r, b, l)'</span> and r is <em>not</em> a percentage, the
intrinsic width cannot be computed <span class="issue">and the result is UA
dependent</span>.<!-- XXX -->

<li>If <span class="property"><a href="#crop">'crop'</a></span> is <span
class="css">'inset-rect(t, r, b, l)'</span>, then the intrinsic width can
always be solved from the equation intrinsic width = l + computed <span
class="property">'width'</span> + r
</ol>

<p class="note">Note: <span class="property"><a
href="#crop">'crop'</a></span> does not impact the scaling, stretching,
tiling or positioning of the replaced element. 'crop' simply allows the
author to essentially use a part of a replaced element in place of the
element itself for all intents and purposes.

<div class="example">
<p>The following example displays both the whole sheep and its head:

<pre>.thumbnail { crop: rect(0px, 115px, 85px, 30px) }

&lt;p&gt;Here is Woolly, the CSS sheep:
&lt;img src="woolly" alt="Woolly"&gt;
&lt;p&gt;And here he is as a thumbnail:
&lt;img src="woolly" class="thumbnail" alt="Woolly thumbnail"&gt;</pre>

<p>The result might look like this:

<div class="figure">
<p><img alt="Text with images of the whole sheep and the head of the sheep" src="crop.png" title="Cropping instead of scaling">

<p class="caption">The same image, once uncropped, once cropped.
</div>
</div>

<h3 id="intrinsic"><span class="secno">12.2. </span>Intrinsic dimensions</h3>

<p>Replaced content may have intrinsic dimensions, such as: an intrinsic
width and an intrinsic height, a fixed intrinsic ratio, or a ratio calculable
from a specified width or height.

<p>The 'height' and 'width' properties' 'auto' values change meaning when
applied to a replaced element with intrinsic dimensions.

<p>If applied to both dimensions, then if the replaced content has an
intrinsic width, the width computes to the actual width of the content,
otherwise if the replaced content has an intrinsic height, the height
computes to the actual height of the content, otherwise the width is
UA-defined. <!--XXX--> The remaining dimension is then calculated so as to
preserve the aspect ratio. (This paragraph assumes a vertical block
progression direction. In a horizontal block progression direction context,
the 'height' property is done first.)

<p>If applied to only one of the two properties only, then if the element has
any intrinsic dimensions at all, the property is calculated to preserve the
aspect ratio, otherwise the property is given a UA-specific value. <!--XXX-->
<!--=======================================================================-->

<h2 id="examples"><span class="secno">13. </span>Examples</h2>

<h3 id="footnote"><span class="secno">13.1. </span>Footnote elements</h3>

<p>To make an element into a footnote, leaving a marker behind:

<pre>fn { content: footnote; }</pre>

<p>By carefully defining the computation rules of initial values, this causes
the following:

<pre>
/* Replace the element with a footnote leader counter */
fn { content: counter(footnote, footnotes); }

/* Move the content of the element into the '::alternate'
   pseudo-element, and mark that pseudo-element to be moved
   to the footnote area. */
fn::alternate { content: contents; move-to: footnotes; }

/* Make the footnote marker be the footnote counter */
fn::alternate::marker { content: counter(footnote, footnotes); }

/* Make the footnote area expect to receive footnotes. */
@footnote { content: pending(footnotes); }
</pre>

<p> Note that there is no magic involved, the computation rules are simply
carefully designed to compute as described above.

<h3 id="footnote0"><span class="secno">13.2. </span>Footnote attributes</h3>

<p>To make an element's attribute into a footnote:

<pre>
[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }
</pre>

<h3 id="styling"><span class="secno">13.3. </span>Styling footnotes</h3>

<p>To use numbers for footnotes instead of symbols:

<pre>
@counter footnote {
    list-style-type: decimal-super;
}
</pre>

<h3 id="multiple"><span class="secno">13.4. </span>Multiple styles on one
element</h3>

<p>To put three borders around an element:

<pre>
h1 { border: solid blue; }
h1::outside(1) { border: solid green; display: block; }
h1::outside(2) { border: solid red; display: block; }
</pre>

<p>To put a background in each corner:

<pre>
body::outside(1) { display: block; background: top left url(tl); }
body::outside(2) { display: block; background: top right url(tr); }
body::outside(3) { display: block; background: bottom left url(bl); }
body::outside(4) { display: block; background: bottom right url(br); }
</pre>

<h3 id="section"><span class="secno">13.5. </span>Section notes</h3>

<p>To use all title attributes as section numbered notes:

<pre>
section &gt; [title]::after { content: section-note; }
section &gt; [title]::after::alternate { content: attr(title); }
section::after { content: 'Notes: ' pending(section-notes); }
</pre>

<p>Note how setting 'content' to 'section-note' on the '::after'
pseudo-element automatically sets 'move-to' on the '::after::alternate'
pesudo-element to 'section-notes', due to the definition of the initial value
of 'move-to'.

<h3 id="top-floats"><span class="secno">13.6. </span>Top floats</h3>

<p>Top floats (assuming fixed position elements are positioned relative is
the page area's border edge):

<pre>
img {
  move-to: top-floats;
}
:root::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10em;
  content: pending(top-floats);
}
@page {
  padding-top: 10em;
}
</pre>
<!--=======================================================================-->

<h2 id="test-suite"><span class="secno">14. </span>Test suite</h2>

<p>A test suite checking many of the more involved of this specifiation, as
well as the basics, will be created and used to establish whether the CR exit
criteria have been met.

<h2 id="profiles"><span class="secno">15. </span>Profiles</h2>

<p>There will be several profiles: Level 1 (equivalent to the CSS1 model),
Level 2 (not quite identical to the CSS2 model), and Full.
<!-- XXX -->

<p>An implementation can implement a superset of the features and claim
conformance to the profile.
<!--=======================================================================-->
<!--
Conformance</h2>
<p>[... XXX]</p>
-->
<!--=======================================================================-->

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

<p>Stuart Ballard, David Baron, Bert Bos, and <span lang="tr">Tantek
&#x00C7;el&#x0131&#x0307;k</span> provided invaluable suggestions used in
this specification.

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

<h3 class="no-num" id="normative-references">Normative references</h3>
<!--begin-include "normative.inc"-->
<!-- Sorted by label -->

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

<dt id="CSS3BOX">[CSS3BOX]

<dd>Bert Bos. <cite>CSS3 module: box model.</cite> 26 July 2001. W3C working
draft. (Work in progress.) URL: <a
href="http://www.w3.org/TR/2001/WD-css3-box-20010726">http://www.w3.org/TR/2001/WD-css3-box-20010726</a>
<!---->

<dt id="CSS3LINE">[CSS3LINE]

<dd>Eric A. Meyer. <cite>CSS3 module: linebox model.</cite> (forthcoming).
W3C working draft. (Work in progress.)
<!---->

<dt id="CSS3LIST">[CSS3LIST]

<dd>Tantek Çelik; Ian Hickson. <cite>CSS3 module: lists.</cite> 20 Feb 2002.
W3C working draft. (Work in progress.) URL: <a
href="http://www.w3.org/TR/2002/WD-css3-lists-20020220">http://www.w3.org/TR/2002/WD-css3-lists-20020220</a>
<!---->

<dt id="CSS3PAGE">[CSS3PAGE]

<dd>Robert Stevahn. <cite>CSS3 module: paged media.</cite> 28 Sep 1999. W3C
working draft. (Work in progress) URL: <a
href="http://www.w3.org/TR/1999/WD-css3-page-19990928">http://www.w3.org/TR/1999/WD-css3-page-19990928</a>
<!---->

<dt id="CSS3SYN">[CSS3SYN]

<dd>David Baron. <cite>CSS3 module: syntax.</cite> (forthcoming). W3C working
draft. (Work in progress.)
<!---->

<dt id="CSS3VAL">[CSS3VAL]

<dd>Håkon Wium Lie. <cite>CSS3 module: values and units.</cite>
(forthcoming). W3C working draft. (Work in progress.)
<!---->

<dt id="RFC2119">[RFC2119]

<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
Levels.</cite> Internet RFC 2119. URL: <a
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
<!---->

<dt id="SELECT">[SELECT]

<dd>Daniel Glazman; Tantek Çelik; Ian Hickson; et al. <cite>Selectors.</cite>
13 Nov 2001. W3C Candidate Recommendation. URL: <a
href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
<!---->
</dl>
<!--end-include-->

<h3 class="no-num" id="other-references">Other references</h3>
<!--begin-include "informative.inc"-->
<!-- Sorted by label -->

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

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

<ul class="indexlist">
<li>box, <a href="#box"><strong>#</strong></a>

<li>check, <a href="#check"><strong>#</strong></a>

<li>circle, <a href="#circle"><strong>#</strong></a>

<li>close-quote, <a href="#close-quote"><strong>#</strong></a>

<li>content, <a href="#content"><strong>#</strong></a>

<li>contents, <a href="#contents0"><strong>#</strong></a>

<li>counter-increment, <a href="#counter-increment"><strong>#</strong></a>

<li>counter-reset, <a href="#counter-reset"><strong>#</strong></a>

<li>counters, <a href="#counters1"><strong>#</strong></a>

<li>crop, <a href="#crop"><strong>#</strong></a>

<li>diamond, <a href="#diamond"><strong>#</strong></a>

<li>disc, <a href="#disc"><strong>#</strong></a>

<li>display, <a href="#display"><strong>#</strong></a>

<li>document-url, <a href="#document-url"><strong>#</strong></a>

<li>endnote, <a href="#endnote"><strong>#</strong></a>

<li>footnote, <a href="#footnote1"><strong>#</strong></a>

<li>here, <a href="#here"><strong>#</strong></a>

<li>hyphen, <a href="#hyphen"><strong>#</strong></a>

<li>inhibit, <a href="#inhibit"><strong>#</strong></a>

<li>list-item, <a href="#list-item"><strong>#</strong></a>, <a
href="#list-item0"><strong>#</strong></a>

<li>&lt;content-list&gt;, <a href="#ltcontent-listgt"><strong>#</strong></a>

<li>&lt;counters&gt;, <a href="#ltcountersgt"><strong>#</strong></a>

<li>&lt;strings&gt;, <a href="#ltstringsgt"><strong>#</strong></a>

<li>move-to, <a href="#move-to"><strong>#</strong></a>

<li>no-close-quote, <a href="#no-close-quote"><strong>#</strong></a>

<li>none, <a href="#none"><strong>#</strong></a>, <a
href="#none0"><strong>#</strong></a>, <a href="#none1"><strong>#</strong></a>

<li>no-open-quote, <a href="#no-open-quote"><strong>#</strong></a>, <a
href="#no-open-quote0"><strong>#</strong></a>

<li>normal, <a href="#normal"><strong>#</strong></a>, <a
href="#normal0"><strong>#</strong></a>, <a
href="#normal1"><strong>#</strong></a>

<li>open-quote, <a href="#open-quote"><strong>#</strong></a>

<li>page-policy, <a href="#page-policy0"><strong>#</strong></a>

<li>pending(&lt;identifier&gt;), <a
href="#pendingltidentifiergt"><strong>#</strong></a>

<li>quotes, <a href="#quotes"><strong>#</strong></a>

<li>scope, <a href="#scope1"><strong>#</strong></a>

<li>section-note, <a href="#section-note"><strong>#</strong></a>

<li>square, <a href="#square"><strong>#</strong></a>

<li>superior, <a href="#superior1"><strong>#</strong></a>

<li>superior parent, <a href="#superior"><strong>#</strong></a>

<li>superior siblings, <a href="#superior0"><strong>#</strong></a>
</ul>
<!--end-index-->

<h2 class="no-num" id="property-index">Property index</h2>
<!--begin properties-->

<table class="proptable">
<thead>
<tr>
<th>Property

<th>Values

<th>Initial

<th>Applies&nbsp;to

<th>Inh.

<th>Percentages

<th>Media

<tbody>
<tr valign="baseline">
<td><span class="property"><a href="#content">content</a></span>

<td>[ &lt;uri&gt; ',' ]* [ normal | none | inhibit | &lt;content-list&gt; ]

<td>normal

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, and @footnote areas

<td>no

<td>N/A

<td>all

<tr valign="baseline">
<td><span class="property"><a
href="#counter-increment">counter-increment</a></span>

<td>[ &lt;identifier&gt; &lt;integer&gt;? ]+ | none

<td>note

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, @footnote areas, and @page context

<td>no

<td>N/A

<td>alll

<tr valign="baseline">
<td><span class="property"><a href="#counter-reset">counter-reset</a></span>

<td>[ &lt;identifier&gt; &lt;integer&gt;? ]+ | none

<td>note

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, @footnote areas, and @page context

<td>no

<td>N/A

<td>alll

<tr valign="baseline">
<td><span class="property"><a href="#crop">crop</a></span>

<td>&lt;shape&gt; | auto

<td>auto

<td>replaced elements

<td>no

<td>relative to intrinsic size

<td>visual

<tr valign="baseline">
<td><span class="property"><a href="#display">display</a></span>

<td>normal

<td>normal

<td>all elements, ::before, ::after, ::alternate, and ::outside

<td>no

<td>N/A

<td>all

<tr valign="baseline">
<td><span class="property"><a href="#move-to">move-to</a></span>

<td>normal | here | &lt;identifier&gt;

<td>normal

<td>all elements, ::before, ::after, and ::alternate

<td>no

<td>N/A

<td>all

<tr valign="baseline">
<td><span class="property"><a href="#page-policy0">page-policy</a></span>

<td>start | first | last

<td>start

<td>@counter and @string blocks

<td>N/A

<td>N/A

<td>paged

<tr valign="baseline">
<td><span class="property"><a href="#quotes">quotes</a></span>

<td>foo | bar

<td>text

<td>all elements, ::before, ::after, ::alternate, ::marker, ::line-marker,
margin areas, and @footnote areas

<td>no

<td>N/A

<td>visual
</table>
<!--end properties-->