You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3024 lines
95 KiB
3024 lines
95 KiB
<!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>
|
|
© 2003 <a href="http://www.w3.org/"><abbr title="World Wide Web
|
|
Consortium">W3C</abbr></a><sup>®</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 <logo> 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 <figure> 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><abbr></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>
|
|
<table>
|
|
<tr>
|
|
<td>A</td> <td>B</td> <td>C</td>
|
|
</tr>
|
|
<tr class="example">
|
|
<td>E</td> <td>F</td>
|
|
</tr>
|
|
</table>
|
|
</pre>
|
|
|
|
<p>An anonymous table cell box is generated around the '::before' content in
|
|
this case, resulting in a 3×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>
|
|
,-----------------------. <-- border of ::outside(2)
|
|
| ,-------------------. | <-- border of ::outside
|
|
| | ,---------------. | | <-- 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>
|
|
,--------------------------------. <-- border of ::outside(2)
|
|
| ,----------------------. | <-- border of ::outside(1)
|
|
| | ,---. ,-+---+------. | ,---. | <-- 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 | <identifier>
|
|
|
|
<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 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><identifier>
|
|
|
|
<dd>The element is not displayed at the current location, but at the next
|
|
occurrence of 'pending(<identifier>)' (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 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 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>[ <string> <string> ]+
|
|
|
|
<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: "+" ";" "<" ">" }
|
|
|
|
/* 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">
|
|
<HTML lang="en">
|
|
<HEAD>
|
|
<TITLE>Quotes</TITLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<P><Q>Quote me!</Q>
|
|
</BODY>
|
|
</HTML>
|
|
</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">
|
|
<HTML lang="no">
|
|
<HEAD>
|
|
<TITLE>Quotes</TITLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
|
|
</BODY>
|
|
</HTML>
|
|
</pre>
|
|
|
|
<p>would produce:
|
|
|
|
<pre class="ascii-art">
|
|
+Trøndere gråter når <Vinsjan på kaia> 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>"
|
|
|
|
<td>U+0022
|
|
|
|
<td>QUOTATION MARK (the ASCII double quotation mark)
|
|
|
|
<tr>
|
|
<td>'
|
|
|
|
<td>U+0027
|
|
|
|
<td>APOSTROPHE (the ASCII single quotation mark)
|
|
|
|
<tr>
|
|
<td>‹
|
|
|
|
<td>U+2039
|
|
|
|
<td>SINGLE LEFT-POINTING ANGLE QUOTATION MARK
|
|
|
|
<tr>
|
|
<td>›
|
|
|
|
<td>U+203A
|
|
|
|
<td>SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
|
|
|
|
<tr>
|
|
<td>«
|
|
|
|
<td>U+00AB
|
|
|
|
<td>LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
|
|
|
|
<tr>
|
|
<td>»
|
|
|
|
<td>U+00BB
|
|
|
|
<td>RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
|
|
|
|
<tr>
|
|
<td>‘
|
|
|
|
<td>U+2018
|
|
|
|
<td>LEFT SINGLE QUOTATION MARK (single high-6)
|
|
|
|
<tr>
|
|
<td>’
|
|
|
|
<td>U+2019
|
|
|
|
<td>RIGHT SINGLE QUOTATION MARK (single high-9)
|
|
|
|
<tr>
|
|
<td>“
|
|
|
|
<td>U+201C
|
|
|
|
<td>LEFT DOUBLE QUOTATION MARK (double high-6)
|
|
|
|
<tr>
|
|
<td>”
|
|
|
|
<td>U+201D
|
|
|
|
<td>RIGHT DOUBLE QUOTATION MARK (double high-9)
|
|
|
|
<tr>
|
|
<td>„
|
|
|
|
<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 “Honi soit qui mal y
|
|
pense.”
|
|
</blockquote>
|
|
English inside French:
|
|
<blockquote>
|
|
<p>Il disait: + Il faut mettre l'action en ‹ fast
|
|
forward ›.;
|
|
</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: "+" ";" "‹" "›" }
|
|
:lang(en) > * { quotes: "“" "”" "‘" "’" }
|
|
|
|
</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>[ <identifier> <integer>? ]+ | 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 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>[ <identifier> <integer>? ]+ | 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 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>
|
|
<OL> <!-- (set item[0] to 0 -->
|
|
<LI>item <!-- increment item[0] (= 1) -->
|
|
<LI>item <!-- increment item[0] (= 2) -->
|
|
<OL> <!-- (set item[1] to 0 -->
|
|
<LI>item <!-- increment item[1] (= 1) -->
|
|
<LI>item <!-- increment item[1] (= 2) -->
|
|
<LI>item <!-- increment item[1] (= 3) -->
|
|
<OL> <!-- (set item[2] to 0 -->
|
|
<LI>item <!-- increment item[2] (= 1) -->
|
|
</OL> <!-- ) -->
|
|
<OL> <!-- (set item[3] to 0 -->
|
|
<LI> <!-- increment item[3] (= 1) -->
|
|
</OL> <!-- ) -->
|
|
<LI>item <!-- increment item[0] (= 3) -->
|
|
<LI>item <!-- increment item[0] (= 4) -->
|
|
</OL> <!-- ) -->
|
|
<OL> <!-- (reset item[4] to 0 -->
|
|
<LI>item <!-- increment item[4] (= 1) -->
|
|
<LI>item <!-- increment item[4] (= 2) -->
|
|
</OL> <!-- ) -->
|
|
</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>, <'list-style-type'>)
|
|
</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 > 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 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>[ <uri> ',' ]* [ normal | none | inhibit | <content-list> ]
|
|
|
|
<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 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><uri>
|
|
|
|
<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 <h1> 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, <list-style-type>) "<var>suffix</var>"' where
|
|
<list-style-type> 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, <list-style-type>) "<var>suffix</var>"' where
|
|
<list-style-type> 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, <list-style-type>)
|
|
"<var>suffix</var>"' where <list-style-type> 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, <list-style-type>) "<var>suffix</var>"'
|
|
where <list-style-type> 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"><content-list></dfn>
|
|
|
|
<dd> <!-- XXX find a sensible order for this -->
|
|
<p>[ pending(<identifier>) | <string> | contents | footnote |
|
|
endnote | section-note | list-item | <counters> | <strings> |
|
|
open-quote | close-quote | no-open-quote | no-close-quote | <glyph> |
|
|
<uri> | <date> | document-url | <target> ]+
|
|
|
|
<p>One or more of the following values, concatenated.
|
|
|
|
<dl>
|
|
<dt><dfn id="pendingltidentifiergt">pending(<identifier>)</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); }
|
|
|
|
<root>
|
|
<moved> A </moved>
|
|
1
|
|
<insert/>
|
|
2
|
|
<moved> B </moved>
|
|
3
|
|
<insert/>
|
|
</root>
|
|
</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><string>
|
|
|
|
<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"><counters></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"><strings></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><glyph>
|
|
|
|
<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 □ U+25A1 WHITE SQUARE, ◻ U+25FB
|
|
WHITE MEDIUM SQUARE, or ◽ 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 ✓ U+2713 CHECK MARK)
|
|
<!-- UI module -->
|
|
|
|
<dt><dfn id="circle">circle</dfn>
|
|
|
|
<dd>A hollow circle. (like ◦ 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 ◆
|
|
U+25C6 BLACK DIAMOND or ♦ U+2666 BLACK DIAMOND SUIT)
|
|
<!-- UI
|
|
module -->
|
|
|
|
<dt><dfn id="disc">disc</dfn>
|
|
|
|
<dd>A filled circle. (like • U+2022 BULLET)
|
|
<!-- in Mozilla, WinIE, Opera, HTML4 -->
|
|
|
|
<dt><dfn id="hyphen">hyphen</dfn>
|
|
|
|
<dd>A hyphen bullet. (like ⁃ U+2043 HYPHEN BULLET or – U+2013
|
|
EN DASH)
|
|
|
|
<dt><dfn id="square">square</dfn>
|
|
|
|
<dd>A filled square. (like ■ U+25A0 BLACK SQUARE, ◼ U+25FC
|
|
BLACK MEDIUM SQUARE, or ◾ U+25FE BLACK MEDIUM SMALL SQUARE)
|
|
<!-- in Mozilla, WinIE. A hollow square in Opera, HTML4. -->
|
|
<!-- ‣ U+2023 TRIANGULAR BULLET
|
|
⁌ U+204C BLACK LEFTWARDS BULLET
|
|
⁍ 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><date>
|
|
|
|
<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><target>
|
|
|
|
<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><shape> | 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 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><length></var> or a
|
|
<var><percentage></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) }
|
|
|
|
<p>Here is Woolly, the CSS sheep:
|
|
<img src="woolly" alt="Woolly">
|
|
<p>And here he is as a thumbnail:
|
|
<img src="woolly" class="thumbnail" alt="Woolly thumbnail"></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 > [title]::after { content: section-note; }
|
|
section > [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
|
|
Çelı̇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><content-list>, <a href="#ltcontent-listgt"><strong>#</strong></a>
|
|
|
|
<li><counters>, <a href="#ltcountersgt"><strong>#</strong></a>
|
|
|
|
<li><strings>, <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(<identifier>), <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 to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#content">content</a></span>
|
|
|
|
<td>[ <uri> ',' ]* [ normal | none | inhibit | <content-list> ]
|
|
|
|
<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>[ <identifier> <integer>? ]+ | 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>[ <identifier> <integer>? ]+ | 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><shape> | 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 | <identifier>
|
|
|
|
<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-->
|