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.
3683 lines
106 KiB
3683 lines
106 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>CSS Generated Content for Paged Media Module</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
|
|
type="text/css">
|
|
<!--
|
|
<link href="../default.css" rel="stylesheet" type="text/css">
|
|
-->
|
|
|
|
<style type="text/css">
|
|
.example img { display: block }
|
|
body { line-height: 1.3 }
|
|
</style>
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Generated Content for Paged Media Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 29 November
|
|
2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/">http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-gcpm/">http://www.w3.org/TR/css3-gcpm/</a>
|
|
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/">
|
|
http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/</a>
|
|
|
|
<dt>Editor:
|
|
|
|
<dd>Håkon Wium Lie, Opera Software, howcome@opera.com
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym
|
|
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>This module describes features often used in printed publications. Most
|
|
of the specified functionality involves some sort of generated content
|
|
where content from the document is adorned, replicated, or moved in the
|
|
final presentation of the document. Along with two other CSS3 modules
|
|
– multi-column layout and paged media – this module offers
|
|
advanced functionality for presenting structured documents on paged media.
|
|
Paged media can be printed, or presented on screens.
|
|
|
|
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
|
|
document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-gcpm” in the subject, preferably like this:
|
|
“[<!---->css3-gcpm<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>This WD contains functionality that the CSS WG finds interesting and
|
|
useful. In general, the earlier a feature appears in this draft, the more
|
|
stable it is. Significant changes in functionality and syntax must be
|
|
expected from <a href="#paged-presentations">paged presentations</a> and
|
|
onwards. Also, functionality described in this module may be moved to
|
|
other modules. Since the <a
|
|
href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>,
|
|
hyphenation has been moved to <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a>
|
|
and the <a
|
|
href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a>
|
|
list-style-type value has been moved to <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>.
|
|
<a
|
|
href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named
|
|
counter styles</a> and the <a
|
|
href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a>
|
|
list-style-type value should also appear in a future css3-lists WD.
|
|
|
|
<h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
|
|
contents</a></h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#running-headers-and-footers"><span class=secno>2.
|
|
</span>Running headers and footers</a>
|
|
<ul class=toc>
|
|
<li><a href="#named-strings"><span class=secno>2.1. </span>Named
|
|
strings</a>
|
|
<ul class=toc>
|
|
<li><a href="#setting-named-strings-the-string-set-pro"><span
|
|
class=secno>2.1.1. </span>Setting named strings: the ‘<code
|
|
class=property>string-set</code>’ property</a>
|
|
|
|
<li><a href="#using-named-strings"><span class=secno>2.1.2.
|
|
</span>Using named strings</a>
|
|
</ul>
|
|
|
|
<li><a href="#running-elements"><span class=secno>2.2. </span>Running
|
|
elements</a>
|
|
</ul>
|
|
|
|
<li><a href="#leaders"><span class=secno>3. </span>Leaders</a>
|
|
|
|
<li><a href="#cross-references"><span class=secno>4.
|
|
</span>Cross-references</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-target-counter-and-target-counters-v"><span
|
|
class=secno>4.1. </span>The ‘<code
|
|
class=css>target-counter</code>’ and ‘<code
|
|
class=css>target-counters</code>’ values</a>
|
|
|
|
<li><a href="#the-target-text-value"><span class=secno>4.2. </span>The
|
|
‘<code class=css>target-text</code>’ value</a>
|
|
</ul>
|
|
|
|
<li><a href="#footnotes"><span class=secno>5. </span>Footnotes</a>
|
|
<ul class=toc>
|
|
<li><a href="#turning-elements-into-footnotes"><span class=secno>5.1.
|
|
</span>Turning elements into footnotes</a>
|
|
|
|
<li><a href="#the-footnote-area"><span class=secno>5.2. </span>The
|
|
footnote area</a>
|
|
|
|
<li><a href="#footnote-calls"><span class=secno>5.3. </span>Footnote
|
|
calls</a>
|
|
|
|
<li><a href="#footnote-markers"><span class=secno>5.4. </span>Footnote
|
|
markers</a>
|
|
|
|
<li><a href="#counting-footnotes"><span class=secno>5.5. </span>Counting
|
|
footnotes</a>
|
|
|
|
<li><a href="#laying-out-footnotes"><span class=secno>5.6. </span>Laying
|
|
out footnotes</a>
|
|
|
|
<li><a href="#footnote-magic"><span class=secno>5.7. </span>Footnote
|
|
magic</a>
|
|
</ul>
|
|
|
|
<li><a href="#page-marks-and-bleed-area"><span class=secno>6. </span>Page
|
|
marks and bleed area</a>
|
|
|
|
<li><a href="#bookmarks"><span class=secno>7. </span>Bookmarks</a>
|
|
|
|
<li><a href="#cmyk-colors"><span class=secno>8. </span>CMYK colors</a>
|
|
|
|
<li><a href="#styling-blank-pages"><span class=secno>9. </span>Styling
|
|
blank pages</a>
|
|
|
|
<li><a href="#paged-presentations"><span class=secno>10. </span>Paged
|
|
presentations</a>
|
|
|
|
<li><a href="#navigation-between-pages"><span class=secno>11.
|
|
</span>Navigation between pages</a>
|
|
<ul class=toc>
|
|
<li><a href="#page-shift-effects"><span class=secno>11.1. </span>Page
|
|
shift effects</a>
|
|
</ul>
|
|
|
|
<li><a href="#page-floats"><span class=secno>12. </span>Page floats</a>
|
|
<ul class=toc>
|
|
<li><a href="#float-modifiers"><span class=secno>12.1. </span>Float
|
|
modifiers</a>
|
|
|
|
<li><a href="#floating-inside-and-outside-pages"><span class=secno>12.2.
|
|
</span>Floating inside and outside pages</a>
|
|
|
|
<li><a href="#multi-column-float-intrusion"><span class=secno>12.3.
|
|
</span>Multi-column float intrusion</a>
|
|
|
|
<li><a href="#the-float-offset-property"><span class=secno>12.4.
|
|
</span>The ‘<code class=property>float-offset</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#the-first-page-pseudo-element"><span class=secno>13.
|
|
</span>The ‘<code class=property>first-page</code>’
|
|
pseudo-element</a>
|
|
|
|
<li><a href="#selecting-columns-and-pages"><span class=secno>14.
|
|
</span>Selecting columns and pages</a>
|
|
|
|
<li><a href="#conformance"><span class=secno>15. </span>Conformance</a>
|
|
|
|
<li><a href="#appendix-a-default-style-sheet"><span class=secno>16.
|
|
</span>Appendix A: Default style sheet</a>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p>(This section is not normative.)
|
|
|
|
<p>This specification describes features often used in printed
|
|
publications. Some of the proposed functionality (e.g., the new list style
|
|
types, and border segments) may also used with other media types. However,
|
|
this specification is monstly concerned with paged media.
|
|
|
|
<h2 id=running-headers-and-footers><span class=secno>2. </span>Running
|
|
headers and footers</h2>
|
|
|
|
<p>To aid navigation in printed material, headers and footers are often
|
|
printed in the page margins. <a href="#CSS3PAGE"
|
|
rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> describes how to place
|
|
headers and footers on a page, but not how to fetch headers and footers
|
|
from elements in the document. This specification offers two ways to
|
|
achieve this. The first mechanism is <dfn id=named-strings0>named
|
|
strings</dfn> which <em>copies</em> the text (without style, structure, or
|
|
replaced content) from one element for later reuse in margin boxes. The
|
|
second mechanism is <dfn id=running-elements0>running elements</dfn> which
|
|
<em>moves</em> elements (with style, structure, and replaced content) into
|
|
a margin box.
|
|
|
|
<h3 id=named-strings><span class=secno>2.1. </span>Named strings</h3>
|
|
<!--
|
|
<p>Named strings are discussed both in the CSS3 Generated and Replaced
|
|
Content (section 9) and in CSS3 Paged Media (several places). For a
|
|
proposed definition of the property, one has to go back to the <a href="http://www.w3.org/1999/06/WD-css3-page-19990623">CSS3 draft from 1999</a>
|
|
1999:
|
|
-->
|
|
|
|
<p>Named strings can be thought of as variables that can hold one string of
|
|
text each. Named strings are created with the ‘<a
|
|
href="#string-set"><code class=property>string-set</code></a>’
|
|
property which copies a string of text into the named string. Only text is
|
|
copied; not style, structure, or replaced content.
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
h1 { string-set: title content() }
|
|
</pre>
|
|
|
|
<p>Whenever an <code>h1</code> element is encountered, its textual content
|
|
is copied into a named string called <em>title</em>. Its content can be
|
|
retrieved in the ‘<code class=property>content</code>’
|
|
property:
|
|
|
|
<pre>
|
|
@page :right { @top-right { content: string(title) }}
|
|
</pre>
|
|
</div>
|
|
|
|
<h4 id=setting-named-strings-the-string-set-pro><span class=secno>2.1.1.
|
|
</span>Setting named strings: the ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=string-set>string-set</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>[[ <identifier> <content-list>] [, <identifier>
|
|
<content-list>]* ] | none
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<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>as specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property accepts a
|
|
comma-separated list of named strings. Each named string is followed by a
|
|
content list that specifies which text to copy into the named string.
|
|
Whenever an element with value of ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ different from ‘<code
|
|
class=css>none</code>’ is encountered, the named strings are
|
|
assigned their respective value.
|
|
|
|
<p>For the ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property, <content-list>
|
|
expands to one or more of these values, in any order:
|
|
|
|
<dl>
|
|
<dt><string>
|
|
|
|
<dd>a string, e.g. "foo"
|
|
|
|
<dt><counter>
|
|
|
|
<dd>the counter() or counters() function, as per <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section
|
|
4.3.5</a>
|
|
|
|
<dt><content>
|
|
|
|
<dd>the ‘<code class=css>content()</code>’ function returns
|
|
the content of elements and pseudo-elements. The functional notation
|
|
accepts an optional argument:
|
|
<dl>
|
|
<dt>‘<code class=css>content()</code>’
|
|
|
|
<dd>Without any arguments, the function returns the textual content of
|
|
the element, not including the content of its ::before and ::after
|
|
pseudo-element. The content of the element's descendants, including
|
|
their respective ::before and ::after pseudo-elements, are included in
|
|
the returned content.
|
|
|
|
<dt>‘<code class=css>content(before)</code>’
|
|
|
|
<dd>The function returns the textual content of the ::before
|
|
pseudo-element the content of the element.
|
|
|
|
<dt>‘<code class=css>content(after)</code>’
|
|
|
|
<dd>The function returns the textual content of the ::after
|
|
pseudo-element the content of the element.
|
|
|
|
<dt>‘<code class=css>content(first-letter)</code>’
|
|
|
|
<dd>The function returns the first letter of the content of the element.
|
|
The definition of a letter is the same as for :first-letter
|
|
pseudo-elements.
|
|
<p class=note>The expected use for ‘<code
|
|
class=css>content(first-letter)</code>’ is to create one-letter
|
|
headers, e.g., in dictionaries.</p>
|
|
|
|
<dt>‘<code class=css>env()</code>’
|
|
|
|
<dd>This function returns data from the local environment of the user at
|
|
the time of formatting. The function accepts one of these keywords:
|
|
<ul>
|
|
<li>env(url): returns the URL of the document
|
|
|
|
<li>env(date): returns the date on the user's system at the time of
|
|
formatting
|
|
|
|
<li>env(time): returns the time on the user's system at the time of
|
|
formatting
|
|
|
|
<li>env(date-time): returns the date and time on the user's system at
|
|
the time of formatting
|
|
</ul>
|
|
|
|
<p>Information about date and time is formatted according to the locale
|
|
of the user's system.
|
|
|
|
<p class=issue>Or, should there be a way to specify the locale? Or
|
|
should we simply format all in ISO format (e.g., 2010-03-30)?
|
|
|
|
<p class=note>On many systems, preformatted strings in the user's
|
|
locale can be found through the <a
|
|
href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a>
|
|
function. The date, time and date-time strings can be found by using
|
|
the "%x", "%X" and "%c" conversion strings, respectively.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page {
|
|
@top-right { content: env(url) }
|
|
@bottom-right { content: env(date-time) }
|
|
}
|
|
</pre>
|
|
</div>
|
|
</dl>
|
|
</dl>
|
|
<!--<p class="issue">Should target-counter() and leader() also be allowed?</p>-->
|
|
|
|
<p>Named strings can only hold the result of one assignment; whenever a new
|
|
assignment is made to a named string, its old value is replaced.
|
|
|
|
<p class=note>User agents, however, must be able to remember the result of
|
|
more than one assignment as the ‘<code
|
|
class=css>string()</code>’ functional value (described below) can
|
|
refer to different assignments.
|
|
|
|
<p>The scope of a named string is the page of the element to which the
|
|
‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property is attached and
|
|
subsequent pages.
|
|
|
|
<p>The name space of named strings is different from other sets of names in
|
|
CSS.
|
|
|
|
<p>The ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property copies text as well
|
|
as white-space into the named string.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h2 {
|
|
string-set: header "Chapter " counter(header) ": " content();
|
|
counter-increment: header;
|
|
}
|
|
</pre>
|
|
|
|
<p>Note that the string called "header" is different from the counter with
|
|
the same name. The above code may result in <em>header</em> being set to
|
|
"Chapter 2: Europa".
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This example results in the same value being assigned to
|
|
<em>header</em> as in the previous example. <!--note namespace-->
|
|
|
|
<pre>
|
|
h2:before { content: "Chapter " counter(header) }
|
|
h2 {
|
|
string-set: header content(before) content();
|
|
counter-increment: header }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
dt { string-set: index content(first-letter) }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The content is copied regardless of other settings on the element. In
|
|
HTML, TITLE elements are normally not displayed, but in this examplet the
|
|
content is copied into a named string:
|
|
|
|
<pre>
|
|
title {
|
|
display: none;
|
|
string-set: header content();
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h4 id=using-named-strings><span class=secno>2.1.2. </span>Using named
|
|
strings</h4>
|
|
|
|
<p>The content of named strings can be recalled by using the ‘<code
|
|
class=css>string()</code>’ value on the ‘<code
|
|
class=property>content</code>’ property. The ‘<code
|
|
class=css>string()</code>’ value has one required argument, namely
|
|
the name of the string.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page { @top-center { content: string(header) }}
|
|
@page { @right-middle { content: string(index) }}
|
|
@page { @top-left { content: string(entry) }}
|
|
h1 { string-set: header "Chapter " counter(chapter) content() }
|
|
dt { string-set: index content(first-letter), entry content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the value of the named string is changed by an element on a certain
|
|
page, the named string may have several values on that page. In order to
|
|
specify which of these values should be used, an optional argument is
|
|
accepted on the ‘<code class=css>string()</code>’ value. This
|
|
argument can have one of four keywords:
|
|
|
|
<ul>
|
|
<li>‘<code class=css>start</code>’: the named string's entry
|
|
value for that page is used.
|
|
|
|
<li>‘<code class=css>first</code>’: the value of the first
|
|
assignment is used. If there is no assignment on the page, the start
|
|
value is used. ‘<code class=css>first</code>’ is the default
|
|
value.
|
|
|
|
<li>‘<code class=css>last</code>’: the named string's exit
|
|
value for that page is used
|
|
|
|
<li>‘<code class=css>first-except</code>’: similar to
|
|
‘<code class=css>first</code>’, except on the page where the
|
|
value was assigned. On that page, the empty string is used.
|
|
</ul>
|
|
|
|
<p>The assignment is considered to take place on the first page where a
|
|
content box representing the element occurs. If the element does not have
|
|
any content boxes (e.g., if ‘<code class=css>display:
|
|
none</code>’ is set), the assignment is considered to take place on
|
|
the page where the first content box would have occured if the element had
|
|
been in the normal flow.
|
|
|
|
<div class=example>
|
|
<p>In this example, the first term on the page will be shown in the top
|
|
left corner and the last term on the page will be shown in the top right
|
|
corner. In top center of the page, the first letter of first term will be
|
|
shown.
|
|
|
|
<pre>
|
|
@page { @top-left { content: string(term, first) }}
|
|
@page { @top-right { content: string(term, last) }}
|
|
@page { @top-center { content: string(index, first) }}
|
|
dt { string-set: index content(first-letter), term content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, the header in the top center will be blank on pages
|
|
where ‘<code class=css>h1</code>’ elements appear. On other
|
|
pages, the string of the previous ‘<code class=css>h1</code>’
|
|
element will be shown.
|
|
|
|
<pre>
|
|
@page { @top-center { content: string(chapter, first-except) }}
|
|
h1 { string-set: chapter content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the named string referred to in a ‘<code
|
|
class=css>string()</code>’ value has not been assigned a value, the
|
|
empty string is used.
|
|
|
|
<h3 id=running-elements><span class=secno>2.2. </span>Running elements</h3>
|
|
|
|
<p>Named strings, as described above, can only hold textual content; any
|
|
style, structure or replaced content associated with the element is
|
|
ignored. To overcome this limitation, a way of moving elements into
|
|
running headers and footers is introduced.
|
|
|
|
<p>Elements that are moved into headers and footers are repeated on several
|
|
pages; they are said to be <a href="#running-elements0"><em>running
|
|
elements</em></a>. To support running elements, a new value –
|
|
running() – is introduced on the ‘<code
|
|
class=property>position</code>’ property. It has one required
|
|
argument: the name by which the running element can be referred to. A
|
|
running element is not shown in its natural place; there it is treated as
|
|
if ‘<code class=css>display: none</code>’ had been set.
|
|
Instead, the running element may be displayed in a margin box.
|
|
|
|
<p>Like counters and named strings, the name of a running element is chosen
|
|
by the style sheet author, and the names have a separate name space. A
|
|
running element can hold one element, including its pseudo-elements and
|
|
its descendants. Whenever a new element is assigned to a running element,
|
|
the old element is lost.
|
|
|
|
<p class=note>User agents, however, must be able to remember the result of
|
|
more than one assignment as the ‘<code
|
|
class=css>element()</code>’ value (described below) can refer to
|
|
different assignments.
|
|
|
|
<p>Running elements inherit through their normal place in the structure of
|
|
the document.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
title { position: running(header) }
|
|
@page { @top-center {
|
|
content: element(header) }
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Like the ‘<code class=css>string()</code>’ value, the
|
|
‘<code class=css>element()</code>’ value accepts an optional
|
|
second argument:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css>start</code>’
|
|
|
|
<dt>‘<code class=css>first</code>’
|
|
|
|
<dt>‘<code class=css>last</code>’
|
|
|
|
<dt>‘<code class=css>first-except</code>’
|
|
</dl>
|
|
|
|
<p>The keywords have the same meaning as for the ‘<code
|
|
class=css>string()</code>’ value, and the place of the assignments
|
|
are the same.
|
|
|
|
<p>The ‘<code class=css>element()</code>’ value cannot be
|
|
combined with any other values.
|
|
|
|
<div class=example>
|
|
<p>In this example, the header is hidden from view in all media types
|
|
except print. On printed pages, the header is displayed top center on all
|
|
pages, except where h1 elements appear.
|
|
|
|
<pre>
|
|
<style>
|
|
div.header { display: none }
|
|
@media print {
|
|
div.header {
|
|
display: block;
|
|
position: running(header);
|
|
}
|
|
@page { @top-center { content: element(header, first-except) }}
|
|
</style>
|
|
...
|
|
<div class="header">Introduction</div>
|
|
<h1 class="chapter">An introduction</div>
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This code illustrates how to change the running header on one page in
|
|
the middle of a run of pages:
|
|
|
|
<pre>
|
|
...
|
|
<style>
|
|
@page { @top-center {
|
|
content: element(header, first) }}
|
|
.header { position: running(header) }
|
|
.once { font-weight: bold }
|
|
</style>
|
|
...
|
|
<div class="header">Not now</div>
|
|
<p>Da di ha di da di ...
|
|
<span class="header once">NOW!</span>
|
|
<span class="header">Not now</span>
|
|
... da di ha di hum.</p>
|
|
...
|
|
</pre>
|
|
The header is "Not now" from the outset, due to the "div" element. The
|
|
first "span" element changes it to "<b>NOW!</b>" on the page where the
|
|
"span" element would have appeared. The second "span" element, which would
|
|
have appeared on the same page as the first is not used because the
|
|
‘<code class=css>first</code>’ keyword has been specified.
|
|
However, the second "span" element still sets the exit value for "header"
|
|
and this value is used on subsequent pages.</div>
|
|
|
|
<h2 id=leaders><span class=secno>3. </span>Leaders</h2>
|
|
|
|
<p>A leader is a visual pattern that guides the eye. Typically, leaders are
|
|
used to visually connect an entry in a list with a corresponding code. For
|
|
example, there are often leaders between titles and page numbers in a
|
|
table of contents (TOC). Another example is the phone book where there are
|
|
leaders between a name and a telephone number.
|
|
|
|
<p>In CSS3, a leader is composed of series of glyphs through the
|
|
‘<code class=css>leader()</code>’ value on the ‘<code
|
|
class=property>content</code>’ property. The functional notation
|
|
accepts two values. The first describes the glyph pattern that makes up
|
|
the leader. These values are allowed:
|
|
|
|
<ul>
|
|
<li>leader(dotted)
|
|
|
|
<li>leader(solid)
|
|
|
|
<li>leader(space)
|
|
|
|
<li>leader(<string>)
|
|
</ul>
|
|
|
|
<p>Using the keyword values is equivalent to setting a string value. The
|
|
table below shows the equivalents:
|
|
|
|
<table class=border>
|
|
<tbody>
|
|
<tr>
|
|
<th>Keyword
|
|
|
|
<th>String
|
|
|
|
<th>Unicode characters
|
|
|
|
<tr>
|
|
<td>leader(dotted)
|
|
|
|
<td>leader(‘<code class=css>. </code>’)
|
|
|
|
<td>\002E \0020
|
|
|
|
<tr>
|
|
<td>leader(solid)
|
|
|
|
<td>leader(‘<code class=css>_</code>’)
|
|
|
|
<td>\005F
|
|
|
|
<tr>
|
|
<td>leader(space)
|
|
|
|
<td>leader(‘<code class=css> </code>’)
|
|
|
|
<td>\0020
|
|
</table>
|
|
<!--
|
|
<p>User Agents should attempt to align corresponding glyphs from the
|
|
leader pattern between consecutive lines.
|
|
-->
|
|
|
|
<p>The string inside the parenthesis is called the <em>leader string</em>.
|
|
|
|
<p>In its simplest form, the ‘<code
|
|
class=property>content</code>’ property only takes one ‘<code
|
|
class=css>leader()</code>’ value:
|
|
|
|
<div class=example>
|
|
<pre>
|
|
heading::after { content: leader(dotted) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The leader string must be shown in full at least once and this
|
|
establishes the minimum length of the leader. To fill the available space,
|
|
the leader string is repeated as many times as possible in the writing
|
|
direction. At the end of the leader, a partial string pattern may be
|
|
shown. White space in leaders is collapsed according to the values on
|
|
white-space properties.
|
|
<!-- <span class="issue">Or, partial strings be avoided?</span> -->
|
|
<!--<p class="issue">Should other properties influence the appearance of leaders?-->
|
|
|
|
|
|
<p>These properties influence the appearance of leaders: all font
|
|
properties, text properties, ‘<code
|
|
class=property>letter-spacing</code>’, white-space properties,
|
|
background properties, and ‘<code
|
|
class=property>color</code>’.
|
|
|
|
<p>The second value describes the alignment of the leader. These values are
|
|
allowed:
|
|
|
|
<dl>
|
|
<dt>align
|
|
|
|
<dd>attempt to align corresponding glyphs from the leader pattern between
|
|
consecutive lines. This is the default value.
|
|
|
|
<dt>start
|
|
|
|
<dd>align leader string with the start
|
|
|
|
<dt>end
|
|
|
|
<dd>align leader string with the end
|
|
|
|
<dt>center
|
|
|
|
<dd>center leader string
|
|
|
|
<dt>string-space
|
|
|
|
<dd>add space between strings to take up all available space
|
|
|
|
<dt>letter-space
|
|
|
|
<dd>add space between letters (both inside the string, and at the
|
|
start/end of the string) to take up all available space
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
heading::after { content: leader(dotted, align) }
|
|
heading::after { content: leader(dotted, start) }
|
|
heading::after { content: leader(dotted, end) }
|
|
heading::after { content: leader(dotted, center) }
|
|
heading::after { content: leader(dotted, string-space) }
|
|
heading::after { content: leader(dotted, letter-space) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>In a more complex example, the ‘<code
|
|
class=property>leader</code>’ value is combined with other values on
|
|
the ‘<code class=property>content</code>’ property:
|
|
|
|
<div class=example>
|
|
<pre>
|
|
ul.toc a::after {
|
|
content: leader(". . . ") target-counter(attr(href, url), page);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the content connected by a leader end up on different lines, the
|
|
leader will be present on all lines. Each leader fragment honors the
|
|
minimum length of the leader.
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
<style>
|
|
.name::after { content: leader(dotted) }
|
|
</style>
|
|
<div class="entry">
|
|
<span class="name">John Doe</span>
|
|
<span class="number">123456789</span>
|
|
</div>
|
|
</pre>
|
|
|
|
<p>If the name and number end up on different lines (e.g., in a narrow
|
|
column), it may be formatted like this:
|
|
|
|
<pre>
|
|
John Doe....
|
|
...123456789
|
|
</pre>
|
|
</div>
|
|
|
|
<p>To determine the length of the leaders, user agents must do the
|
|
following for each line:
|
|
|
|
<ol>
|
|
<li>Lay out the content with leaders of minimum lengths
|
|
|
|
<li>Determine the empty space left on the line.
|
|
|
|
<li>Distribute the empty space between the leaders on the line. Glyphs
|
|
must not be shown partially. All leaders on the line should, to the
|
|
extent possible, have the same length. This may not always be possible as
|
|
the minimum leader length must be honored.
|
|
|
|
<li>Fill the empty space with the specified leader pattern.
|
|
</ol>
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
<style>
|
|
cite::before { content: leader(' ') }
|
|
</style>
|
|
<blockquote>
|
|
Bla great bla bla world bla bla
|
|
empire bla bla color bla bla
|
|
history bla bla forever.
|
|
<cite>John Johnson</cite>
|
|
</blockquote>
|
|
</pre>
|
|
|
|
<p>Depending on the width of the containing block, this may be rendered
|
|
as:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla
|
|
empire bla bla color bla bla
|
|
history bla bla forever. John
|
|
Johnson
|
|
</pre>
|
|
|
|
<p>However, this rendering is preferable:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla
|
|
empire bla bla color bla bla
|
|
history bla bla forever.
|
|
John Johnson
|
|
</pre>
|
|
|
|
<p>To indicate that <q>John Johnson</q> should be kept on one line, this
|
|
rule can be added to the style sheet:
|
|
|
|
<pre>
|
|
cite { text-wrap: suppress }
|
|
</pre>
|
|
|
|
<p>Until ‘<code class=property>text-wrap</code>’ is widely
|
|
supported, this rule can also be used:
|
|
|
|
<pre>
|
|
cite { white-space: nowrap }
|
|
</pre>
|
|
|
|
<p>If the containing element is wider, this may be the resultant
|
|
presentation:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla empire
|
|
bla bla color bla bla history bla bla
|
|
forever. John Johnson
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=cross-references><span class=secno>4. </span>Cross-references</h2>
|
|
|
|
<p>It is common to refer to other parts of a document by way of a section
|
|
number (e.g., "See section 3.4.1"), a page number (e.g., "See discussion
|
|
on page 72"), or a string (e.g., "See the chapter on Europe"). Being able
|
|
to resolve these cross-references automatically saves time and reduces the
|
|
number of errors.
|
|
|
|
<h3 id=the-target-counter-and-target-counters-v><span class=secno>4.1.
|
|
</span>The ‘<code class=css>target-counter</code>’ and
|
|
‘<code class=css>target-counters</code>’ values</h3>
|
|
|
|
<p>Numerical cross-references are generated by ‘<code
|
|
class=css>target-counter()</code>’ and ‘<code
|
|
class=css>target-counters()</code>’ values that fetch the value of a
|
|
counter at the target end of the link. These functions are similar to the
|
|
‘<code class=css>counter()</code>’ and ‘<code
|
|
class=css>counters()</code>’ functions, except that they fetch
|
|
counter values from remote elements. ‘<code
|
|
class=css>target-counter()</code>’ has two required arguments: the
|
|
url of the link, and the name of a counter. ‘<code
|
|
class=css>target-counters()</code>’ has three required arguments:
|
|
the url of the link, the name of a counter, and a separator string. Both
|
|
functions accepts an optional argument at the end that describes which
|
|
list style type to use when presenting the resulting number; ‘<code
|
|
class=css>decimal</code>’ being the default.
|
|
|
|
<div class=example>
|
|
<p>This style sheet specifies that a string like " (see page 72)" is added
|
|
after a link:
|
|
|
|
<pre>
|
|
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This style sheet specifies that a string like " (see section 1.3.5)" is
|
|
added after a link:
|
|
|
|
<pre>
|
|
a::after { content: "(see section " target-counters(attr(href, url), section, ".", decimal) ")" }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=the-target-text-value><span class=secno>4.2. </span>The ‘<code
|
|
class=css>target-text</code>’ value</h3>
|
|
|
|
<p>Textual cross-references are generated by ‘<code
|
|
class=css>target-text()</code>’ which fetches the textual content
|
|
from the target end of the link. Only text is copied; not style,
|
|
structure, or replaced content. ‘<code
|
|
class=css>target-text()</code>’ has one required argument: the url
|
|
of the link. An optional second argument specifies exactly which content
|
|
is fetched. There are four possible values:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css>content()</code>’
|
|
|
|
<dd>refers to the textual content of the element, not including the
|
|
content of its ::before and ::after pseudo-element. The content of the
|
|
element's descendants, including their respective ::before and ::after
|
|
pseudo-elements, are included in the returned content.
|
|
|
|
<dt>‘<code class=css>content(before)</code>’
|
|
|
|
<dd>refers to the content of the element's ::before pseudo-element. This
|
|
is the default value.
|
|
|
|
<dt>‘<code class=css>content(after)</code>’
|
|
|
|
<dd>refers to the content of the element's ::after pseudo-element
|
|
|
|
<dt>‘<code class=css>content(first-letter)</code>’
|
|
|
|
<dd>refers to the first letter of the textual content of the element, not
|
|
including the content of its ::before and ::after pseudo-element.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>To generate this text
|
|
|
|
<blockquote>
|
|
<p>See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.
|
|
</blockquote>
|
|
from this markup:
|
|
<pre>
|
|
<p>See <a href="#chx">this chapter</a> for an in-depth evaluation.
|
|
...
|
|
<h2 id="chx">A better way</h2>
|
|
</pre>
|
|
this CSS code can be used:
|
|
<pre>
|
|
h2 { counter-increment: chapter }
|
|
a { content: "Chapter " target-counter(attr(href, url), chapter)
|
|
' ("' target-text(attr(href), content()) '") on page '
|
|
target-counter(attr(href, url), page);
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=footnotes><span class=secno>5. </span>Footnotes</h2>
|
|
|
|
<p>A footnote is a note typically placed at the bottom of a page that
|
|
comments on or cites a reference. References to footnotes are marked with
|
|
a <em>note-call</em> in the main text. The rendering of footnotes is
|
|
complex. As far as possible, footnotes try to reuse other parts of CSS.
|
|
However, due to the typographic traditions of footnotes, some new
|
|
functionality is required to support footnotes in CSS:
|
|
|
|
<p>In order to support footnotes in CSS, the following functionality is
|
|
added:
|
|
|
|
<ul>
|
|
<li>one new value on the ‘<code class=property>float</code>’
|
|
property: ‘<code class=css>footnote</code>’
|
|
|
|
<li>one new page area: ‘<code class=css>@footnote</code>’
|
|
|
|
<li>two new pseudo-elements: ‘<code
|
|
class=css>::footnote-call</code>’ and ‘<code
|
|
class=css>::footnote-marker</code>’
|
|
|
|
<li>one predefined counter: ‘<code class=css>footnote</code>’
|
|
|
|
<li>one new value on the ‘<code class=property>content</code>’
|
|
property: ‘<code class=css>target-pull()</code>’
|
|
|
|
<li>border segments
|
|
<!--<li>two new 'list-style-type' values: ''super-decimal'', and symbol(...)-->
|
|
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>In its simplest form, making a footnote is simple.
|
|
|
|
<pre>
|
|
<style>
|
|
.footnote { float: footnote }
|
|
</style>
|
|
|
|
<p>A sentence consists of words. <span class="footnote">Most often.</span>.
|
|
</pre>
|
|
|
|
<p>In this example, the text <q>Most often.</q> will be placed in a
|
|
footnote. A note-call will be left behind in the main text and a
|
|
corresponding marker will be shown next to the footnote. Here is one
|
|
possible rendering:
|
|
|
|
<pre>
|
|
A sentence consists of words. ¹
|
|
|
|
¹ Most often.
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>To support legacy browsers, it is often better to make a link to the
|
|
note rather than including the text inline. This example shows how to
|
|
fetch the content of a note and place it in a footnote.
|
|
|
|
<pre>
|
|
<style>
|
|
@media print {
|
|
.footnote {
|
|
float: footnote;
|
|
content: target-pull(attr(href, url)) }
|
|
.call { display: none }
|
|
}
|
|
</style>
|
|
...
|
|
<p>A sentence consists of words<a class="footnote" href="#words"> [3]</a>.
|
|
...
|
|
<p id=words><span class="call">[3]</span> Most often.
|
|
</pre>
|
|
|
|
<p>When shown in a legacy browser, the content of the element will be
|
|
shown as a clickable link to an endnote. When printed according to this
|
|
specification, there will be a footnote:
|
|
|
|
<pre>
|
|
A sentence consists of words¹.
|
|
|
|
¹ Most often.
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example> Consider this markup:
|
|
<pre>
|
|
<p>Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>.
|
|
</pre>
|
|
|
|
<p>The content of the "title" attribute can be turned into a footnote with
|
|
this code:
|
|
|
|
<pre>
|
|
span[title]::after {
|
|
content: attr(title);
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=turning-elements-into-footnotes><span class=secno>5.1.
|
|
</span>Turning elements into footnotes</h3>
|
|
|
|
<p>An element with ‘<code class=css>float: footnote</code>’
|
|
(called a <em>footnote element</em>) is moved to the <em>footnote
|
|
area</em> and a <em>footnote-call</em> pseudo-element is put in its
|
|
original place.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
span.footnote {
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Footnote elements are presented inside the <em>footnote area</em>, but
|
|
they inherit through their normal place in the structure of the document.
|
|
|
|
<p>The ‘<code class=property>display</code>’ property on
|
|
footnote elements is ignored. Instead, the value of the ‘<code
|
|
class=property>display</code>’ property in the @footnote context
|
|
determines if footnotes are block or inline elements.
|
|
|
|
<div class=example>
|
|
<p>In this example, the footnotes are displayed inline:
|
|
|
|
<pre>
|
|
@footnote {
|
|
display: inline;
|
|
}
|
|
span.footnote {
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
|
|
<p>Here is one possible presentation of inline footnotes:
|
|
|
|
<pre>
|
|
¹ The first footnote. º The second footnote.
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block).
|
|
-->
|
|
|
|
<p>For each new footnote element, the ‘<code
|
|
class=css>footnote</code>’ counter is automatically incremented.
|
|
|
|
<h3 id=the-footnote-area><span class=secno>5.2. </span>The footnote area</h3>
|
|
|
|
<p>All elements with ‘<code class=css>float: footnote</code>’
|
|
are moved to the <em>footnote area</em>. The footnote area is described by
|
|
an @footnote-rule inside the @page-rule. By default, the footnote area
|
|
appears at the bottom of the page, but it can be positioned in other
|
|
places.
|
|
|
|
<p class=issue>Should the footnote are be positioned using page floats or
|
|
(fixed?) absolute positioning? Or both?
|
|
|
|
<p class=issue>
|
|
|
|
<div class=example>
|
|
<p>These rules place the footnote area at the bottom of the page, spanning
|
|
all columns:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
float: bottom;
|
|
column-span: all;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>These rules place the footnote area at the bottom of the first column:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
float: bottom;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example issue">
|
|
<p>This code places the footnote area at the bottom of the right column:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
float: bottom-corner;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<p class=issue>How should one indicate that the footnote area should
|
|
span columns? Typically, footnotes are put inside columns rather than
|
|
spanning the full width, but there could be exceptions.
|
|
-->
|
|
|
|
<p>The content of the footnote area is considered to come before other
|
|
content which may compete for the same space on the same page.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page { @footnote { float: bottom page}}
|
|
div.figure { float: bottom page }
|
|
</pre>
|
|
|
|
<p>If figures and footnotes are on the same page, the footnotes will
|
|
appear below the figures as they are floated to the bottom before the
|
|
figures.
|
|
</div>
|
|
|
|
<p>Potentially, every page has a footnote area. If there are no footnotes
|
|
on the page, the footnote area will not take up any space. If there are
|
|
footnotes on a page, the layout of the footnote area will be determined by
|
|
the properties/values set on it, and by the footnote elements elements
|
|
inside it.
|
|
|
|
<p>These properties apply to the footnote area: ‘<code
|
|
class=property>content</code>’, ‘<code
|
|
class=property>border</code>’, ‘<code
|
|
class=property>padding</code>’, ‘<code
|
|
class=property>margin</code>’, ‘<code
|
|
class=property>height</code>’, ‘<code
|
|
class=property>width</code>’, ‘<code
|
|
class=property>max-height</code>’, ‘<code
|
|
class=property>max-width</code>’, ‘<code
|
|
class=property>min-height</code>’, ‘<code
|
|
class=property>min-width</code>’, the background properties. <!--
|
|
<p class="note">In published books, it is customary for the footnote
|
|
area to be limited to less than half the height of the page area. Long
|
|
footnotes may need more space, and the customary solution is for
|
|
footnotes to span several pages. To achieve this, the 'max-height'
|
|
property should be used. However, footnotes spanning several pages is
|
|
an advanced feature which is not a conformance requirement for this
|
|
specification.
|
|
-->
|
|
|
|
|
|
<div class=example>
|
|
<p>This example uses some of the applicable properties on @footnote:
|
|
|
|
<pre>
|
|
@footnote {
|
|
margin-top: 0.5em;
|
|
border-top: thin solid black;
|
|
border-clip: 4em;
|
|
padding-top: 0.5em;
|
|
}
|
|
</pre>
|
|
|
|
<p>The result of this code is a footnote area separated from other content
|
|
above it by margin, border and padding. Only 4em of the border is visible
|
|
due to the ‘<code class=property>border-clip</code>’
|
|
property, which is defined in <a
|
|
href="http://dev.w3.org/csswg/css4-background/">CSS Backgrounds and
|
|
Borders Module Level 4</a>. <!--[[!CSS4BACKGROUND]]-->.
|
|
</div>
|
|
<!--
|
|
<p class="issue">Footnotes in tables and floats may be problematic. In
|
|
some cases, the author may want the footnote to go at the end of the
|
|
table or float instead of the bottom of the page.
|
|
-->
|
|
|
|
<h3 id=footnote-calls><span class=secno>5.3. </span>Footnote calls</h3>
|
|
|
|
<p>When an element is moved to the footnote area, a <em>footnote-call</em>
|
|
is left behind. By default, User Agents must behave as if this code is
|
|
part of the default style sheet:
|
|
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
</pre>
|
|
|
|
<p>The resulting note call is a super-script decimal number.
|
|
|
|
<h3 id=footnote-markers><span class=secno>5.4. </span>Footnote markers</h3>
|
|
|
|
<p>A ::footnote-marker pseudo-element is added to each footnote element, in
|
|
the same place, and replacing, the ::before pseudo-element. User agents
|
|
must, by default, show the "footnote" counter in the footnote-marker.
|
|
|
|
<div class=example>
|
|
<p>User Agents may display footnote-calls and footnote-markers this way by
|
|
default:
|
|
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
::footnote-marker {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Marker elements are discussed in more detail in the CSS Lists module <a
|
|
href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>. One
|
|
suggested change to that module is to honor the value of ‘<code
|
|
class=property>list-style-position</code>’ on the ::footnote-marker
|
|
pseudo-element itself rather than the corresponding list-item element.
|
|
Further, one clarification to the horizontal placement of the marker is
|
|
suggested: the <em>margin</em> box of the marker box is horizontally
|
|
aligned with the start of the line box.
|
|
|
|
<h3 id=counting-footnotes><span class=secno>5.5. </span>Counting footnotes</h3>
|
|
|
|
<p>The "footnote" counter is automatically incremented each time a footnote
|
|
is generated. That is, the "footnote" counter is incremented by one each
|
|
time an element with ‘<code class=css>float: footnote</code>’
|
|
appears.
|
|
|
|
<p>The footnote counter can be reset with the ‘<code
|
|
class=property>counter-reset</code>’ property.
|
|
|
|
<div class=example> This code resets the "footnote" counter on a per-page
|
|
page basis:
|
|
<pre>
|
|
@page { counter-reset: footnote }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=issue>Should one also be able to manually increment the "footnote"
|
|
counter? <!--
|
|
<p>The 'counter-increment' property can be set in the @footnote rule.
|
|
Each time an element with 'float: footnote' is found, the corresponding
|
|
counter is incremented.
|
|
|
|
<div class="example">
|
|
<p>This rule is part of the default style sheet:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
counter-increment: footnote;
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
As a result, the "footnote" counter is incremented each time a footnote is generated.
|
|
</div>
|
|
-->
|
|
|
|
|
|
<h3 id=laying-out-footnotes><span class=secno>5.6. </span>Laying out
|
|
footnotes</h3>
|
|
|
|
<p>Footnotes must appear as early as possible under the following
|
|
constraints:
|
|
|
|
<ol>
|
|
<li>A footnote marker may not appear on an earlier page than the footnote
|
|
call.
|
|
|
|
<li>Footnotes may not appear out of document order.
|
|
<!--<span class="issue">(What order is that: the document order or the visual order?
|
|
Probably the document order, the same order as the footnote counter
|
|
values, although the visual order of the footnote calls may be
|
|
different, due to their occurrence in positioned and floating
|
|
elements.)</span>-->
|
|
|
|
|
|
<li>The footnote area is limited in size by ‘<code
|
|
class=property>max-height</code>’, unless the page contains only
|
|
footnotes. (E.g., if at the end of the document there are still footnotes
|
|
unprinted, the User Agent can use the whole page to display footnotes.)
|
|
|
|
<li>If there is a footnote call on a page, the footnote area may not be
|
|
empty, unless its ‘<code class=property>max-height</code>’ is
|
|
too small.
|
|
</ol>
|
|
|
|
<h3 id=footnote-magic><span class=secno>5.7. </span>Footnote magic</h3>
|
|
|
|
<p>When an element is turned into a footnote, certain magical things
|
|
happen. The element is moved to the footnote area, a footnote call is left
|
|
behind in its place, a footnote marker is displayed before the element,
|
|
and the footnote counter is incremented.
|
|
|
|
<p>When rendering footnotes, User Agents may apply certain heuristics to
|
|
improve the presentation. For example, the space between a footnote-call
|
|
and surrounding text may be adjusted. Another example is the height of the
|
|
footnote area; it may be heuristically constrained to limit the area that
|
|
is used for footnotes. <!--
|
|
<h2>Sidenotes</h2>
|
|
|
|
<p>Sidenotes are supported the same way as footnotes; only the name
|
|
and the settings in the default style sheet differentiates the two.
|
|
|
|
<p class=note>The motivation for having another page-based area into
|
|
which content can be floated is that footnotes and sidenotes are
|
|
often used in the same document.
|
|
|
|
<div class="example">
|
|
<p>This example moves images to the outside margin of pages:
|
|
|
|
<pre>
|
|
@page :left {
|
|
margin-left: 10em;
|
|
@sidenote { position: fixed; left: -8em; width: 6em }
|
|
}
|
|
@page :right {
|
|
margin-right: 10em;
|
|
@sidenote { position: fixed; right: -8em; width: 6em }
|
|
}
|
|
img { float: sidenote }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=note>The reason for having both a footnote and a sidenote area
|
|
on every page is that some documents use both.
|
|
|
|
<p class=issue>Should there be a mechanism to create new areas like
|
|
footnote/sidenote, or are two "magic" areas enough?
|
|
-->
|
|
<!--
|
|
<h2>Hyphenation</h2>
|
|
--> <!--
|
|
<table class=hyphenate>
|
|
<tr><th>CSS<th>XSL<th>DSSSL
|
|
<tr><th>hyphens<th>hyphenate<th>hyphenate
|
|
|
|
<tr><td>none<td>false
|
|
<tr><td>manual<td>
|
|
<tr><td>auto<td>true
|
|
|
|
<tr><th>hyphenate-resource<th>country, language, script<th>?
|
|
<tr><td>auto
|
|
<tr><td><uri>
|
|
|
|
<tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count
|
|
<tr><td>auto<td>
|
|
<tr><td><integer><td><integer>
|
|
|
|
<tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count
|
|
<tr><td>auto<td>
|
|
<tr><td><integer><td><integer>
|
|
|
|
<tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count
|
|
<tr><td>no-limit<td>no-limit
|
|
<tr><td><integer>
|
|
|
|
<tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char
|
|
<tr><td><string><td><character>
|
|
<tr><td>auto
|
|
|
|
<tr><th><th>hyphenation-keep<th>hyphenation-keep
|
|
<tr><td><td>auto
|
|
<tr><td><td>column
|
|
<tr><td><td>page
|
|
<tr><th><th><th>hyphenation-exceptions
|
|
<tr><td><td><td>The value is a list of strings. Each string is a word which may contain hyphen characters, #\-, indicating where hyphenation may occur. If a word to be hyphenated occurs in the list, it may only be hyphenated in the specified places. The initial value is the empty list.
|
|
|
|
|
|
</table>
|
|
|
|
-->
|
|
<!--
|
|
<p>Hyphenation means splitting words to improve the layout of
|
|
paragraphs. This specifications does not define the exact rules for
|
|
hyphenation, but describes six properties that influence hyphenation.
|
|
|
|
<h3>The 'hyphens' property</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphens</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>none | manual | auto | all
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>manual
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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>Values are:
|
|
|
|
<dl>
|
|
<dt>none
|
|
|
|
<dd>Words are not broken at line breaks, even if characters inside the word suggest line break points.
|
|
|
|
<dt>manual
|
|
|
|
<dd>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit or conditional.
|
|
|
|
<div class="example">
|
|
<p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an explicit hyphen. Unicode Standard Annex #14 describes the <a href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens in the</a> Unicode Line breaking algorithm.
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>In HTML, &shy; represents the soft hyphen character which suggests a line break opportunity.
|
|
<pre>
|
|
ex&shy;ample.
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<dt>auto
|
|
<dd>Words can be broken at appropriate hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources. Characters inside the word take priority over hyphenation points determined by other resources.
|
|
|
|
<dt>all
|
|
|
|
<dd>All possible hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources, are marked. The visual appearance of the mark is UA-dependent.
|
|
|
|
|
|
</dl>
|
|
|
|
<h3>The 'hyphenate-resource' property</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-resource</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>none | <uri> [, <uri> ]*
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>none
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 a comma-separated list of external resources that can help the UA determine hyphenation points. If more than one resource is specified, the UA should consult each resource – in turn, from the beginning – until it finds one that is able to determine hyphenation points in a word. The 'none' value indicates that no external resources are available. In any case, the UA can also use local resources not listed on this property.
|
|
|
|
<div class="example">
|
|
|
|
<p>Often, finding the right hyphenate resource is based on knowing the
|
|
language of the text. The <code>lang</code> attribute is recommended
|
|
for encoding the language, and the corresponding selector is used in
|
|
this example:
|
|
|
|
<pre>
|
|
:lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
<h3>The 'hyphenate-before' and 'hyphenate-after' properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-before</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td><integer> | auto
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>auto
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 the minimum number of characters in a
|
|
hyphenated word before the hyphenation character. The ''auto'' value
|
|
means that the UA chooses a value that adapts to the current layout.
|
|
|
|
<p class="note">Unless the UA is able to calculate a better value, it
|
|
is suggested that ''auto'' means 2.
|
|
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-after</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td><integer> | auto
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>auto
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 the minimum number of characters in a hyphenated word after the hyphenation character. The ''auto'' value means that the UA chooses a value that adapts to the current layout.
|
|
|
|
<p class="note">Unless the UA is able to calculate a better value, it is suggested that ''auto'' means 2.
|
|
|
|
|
|
<h3>The 'hyphenate-lines' property</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-lines</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>no-limit | <integer>
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>no-limit
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 indicates the maximum number of successive hyphenated
|
|
lines in an element. In some cases, user agents may not be able to
|
|
honor the specified value. The ''no-limit'' value means that there is
|
|
no limit.
|
|
|
|
<h3>The 'hyphenate-character' property</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-character</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>auto | <string>
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>auto
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>all elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 strings that are shown between parts of
|
|
hyphenated words. The 'auto' value means that the user agent should
|
|
find an appropriate value.
|
|
|
|
<div class="example">
|
|
<p>In Latin scripts, the hyphen character (U+2010) is often used to
|
|
indicate that a word has been split. Normally, it will not be
|
|
necessary to set it explicitly. However, this can easily be done:
|
|
|
|
<pre>
|
|
article { hyphenate-character: "\2010" }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<h3>The 'hyphenate-last-line-avoid' property</h3>
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>hyphenate-last-line-avoid</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>auto | always | column | page | spread
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>auto
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>block-level elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<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 indicates hyphenation behavior at the end of elements, column, pages and spreads. A spread is a set of two pages that are visible to the reader at the same time. Values are:
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>no restrictions imposed
|
|
|
|
<dt>always
|
|
|
|
<dd>the last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated.
|
|
|
|
<dt>column
|
|
|
|
<dd>the last line before any column, page, or spread break inside the element should not be hyphenated
|
|
|
|
<dt>page
|
|
|
|
<dd>the last line before page or spread break inside the element should not be hyphenated
|
|
|
|
<dt>spread
|
|
|
|
<dd>the last line before any spread break inside the element should not be hyphenated.
|
|
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
p { hyphenate-last-line-avoid: always }
|
|
div.chapter { hyphenate-last-line-avoid: spread }
|
|
</div>
|
|
<div>
|
|
|
|
<div class=example>
|
|
<p>A paragraph may be formatted like this when 'hyphenate: auto' is set:
|
|
|
|
<pre>
|
|
This is just a
|
|
simple example
|
|
to show Antar-
|
|
ctica.
|
|
</pre>
|
|
|
|
<p>With 'hyphenate-last-line-avoid: always' one would get:
|
|
|
|
<pre>
|
|
This is just a
|
|
simple example
|
|
to show
|
|
Antarctica.
|
|
<pre>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<h2>New counter styles</h2>
|
|
|
|
|
|
<h3>The ''super-decimal'' list-style-type</h3>
|
|
|
|
<p class=issue>This section will be moved to css3-lists (<a href="http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html">minutes</a>)
|
|
|
|
<p>A new list-style-type, ''super-decimal'', is introduced to better support
|
|
footnotes. Small, super-script footnote calls are common; the first
|
|
three numbers have code points in Latin-1 and some font families have
|
|
even more super-script glyphs. The ''super-decimal'' keyword allow
|
|
these font resources to be used and replaces the use of 'font-size'
|
|
and 'vertical-align' (which prohibit the use of special-purpose
|
|
glyphs).
|
|
|
|
<div class="example">
|
|
This example specifies that footnote markers should consist of
|
|
super-script decimal numbers.
|
|
|
|
<pre>
|
|
::footnote-marker { content: counter(footnote, super-decimal) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Using super-script glyphs is optional; UAs may also scale and position
|
|
other glyphs for use in footnote calls.
|
|
|
|
-->
|
|
<!--
|
|
<h3>Named counter styles</h3>
|
|
|
|
<p>CSS defines a number of predefined list style types for the
|
|
'list-style-type' property and other places where a list-style-type
|
|
value is accepted. Some styles repeat the same glyph (e.g., ''disc''
|
|
and ''circle'') while others have lists of glyphs (e.g., ''decimal'',
|
|
and ''lower-roman''). To increase the range of lists that can be
|
|
achieved through CSS without adding many new keywords,
|
|
@counter-style rules are introduced. By using @counter-style, a style
|
|
sheet can name new counter styles.
|
|
|
|
<p>An @counter-style rule consists of the keyword ''@counter-style'',
|
|
followed by the name of the symbol counter style, followed by a
|
|
space-separated list of strings.
|
|
|
|
<div class="example">
|
|
|
|
<pre>
|
|
@counter-style daggers "*" "\2020" "\2021" "\A7" "#";
|
|
ol { list-style-type: daggers }
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<pre>
|
|
@counter-style ordinal "1st" "2nd" "3rd" "4th";
|
|
h1:before { content: counter(chapter, ordinal) " chapter" }
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
<p>The first string in the list represents number one, the second
|
|
string represents number two, etc. Outside the range of specified values, the rendering
|
|
will be as if the ''decimal'' list style type had been specified.
|
|
|
|
<div class="example">
|
|
<p>Consider this example:
|
|
|
|
<pre>
|
|
@counter-style ordinal "1st" "2nd" "3rd" "4th";
|
|
ordered-list { counter-reset: items -1 }
|
|
list-item { counter-increment: items 2 }
|
|
</pre>
|
|
|
|
<p>For a series of <tt>list-item</tt> elements inside an
|
|
<tt>ordered-list</tt> element, the value of the <tt>items</tt> counter
|
|
will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter
|
|
style only defines a counter style for 1, 2, 3, and 4, the list will
|
|
be numbered "-1", "1st", "3rd", "5", "7" etc.
|
|
|
|
</div>
|
|
|
|
<p>Named counter styles can be imported through @import statements.
|
|
|
|
<div class="example">
|
|
<pre>
|
|
@import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */
|
|
ol { list-style-type: armenian }
|
|
</pre>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<div class="issue">Should we allow images in addition to strings?
|
|
<pre>
|
|
@counter-style graphic url("1.gif") url("2.gif") url("3.gif")
|
|
</pre>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<h3>The ''symbols()'' list-style-type</h3>
|
|
|
|
<p>A new list-style-type with a functional notation is introduced to
|
|
avoid the indirection of having to name counter styles. The
|
|
''symbols()'' value takes a comma-separated list of strings as
|
|
arguments.
|
|
|
|
|
|
<div class="example">
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, symbols('*', '+', '!'))
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Outside the range of specified values, the rendering will be as if
|
|
the ''decimal'' list style type had been specified.
|
|
|
|
<div class="example">
|
|
|
|
This code:
|
|
|
|
<pre>
|
|
ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }
|
|
</pre>
|
|
|
|
will result in these list-items markers: * † ‡ § # 6 7 8 ...
|
|
|
|
</div>
|
|
-->
|
|
<!--
|
|
<p class="issue">Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic".
|
|
-->
|
|
<!--
|
|
<h2>Page counters</h2>
|
|
|
|
<p>Printed publications often show page numbers to indicate the
|
|
sequence of papes. Also, it is common to show the total number of
|
|
pages in the document. For example, "page 3 of 5" may be shown at the
|
|
bottom of a page.
|
|
|
|
<p>This specifiction describes two counters that can be used to
|
|
indicate page numbers: ''page'' and ''pages''.
|
|
|
|
<h3>The ''page'' counter</h3>
|
|
|
|
<p>The ''page'' counter is predefined to start with a value of zero,
|
|
and to be automatically incremented by one before every page. That is,
|
|
UAs must behave as if this code fragment is part of the default style
|
|
sheet:
|
|
|
|
<pre>
|
|
@page {
|
|
counter-increment: page 1;
|
|
}
|
|
</pre>
|
|
|
|
<p>The ''page'' counter can be reset and incremented in style sheets
|
|
just like other counters. On pages where the counter is incremented by
|
|
the style sheet in the page context, the automatic incrementation does
|
|
not take place.
|
|
|
|
<div class="example">
|
|
|
|
<pre>
|
|
@page {
|
|
@bottom-center {
|
|
content: counter(page);
|
|
}
|
|
}
|
|
|
|
@page introduction {
|
|
counter-reset: page;
|
|
}
|
|
|
|
@page :right {
|
|
counter-increment: page 2;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<h3>The ''pages'' counter</h3>
|
|
|
|
<p>The ''pages'' counter is predefined to have the total number of
|
|
pages in the document. In order to find the value of this counter, the
|
|
UA will have to paginate the document. This counter is a constant and
|
|
it cannot be set or incremented by a style sheet.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page {
|
|
@bottom-center {
|
|
content: "Page " counter(page) " of " counter(pages) " pages in total";
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>UAs that are not able to paginate the document should display a
|
|
question mark or another symbol that indicates uncertainty.
|
|
|
|
<div class=example>
|
|
|
|
<p>This code has no effect on the ''pages'' counter which cannot be
|
|
changed by the style sheet. However, the the ''page'' counter reset normally.
|
|
|
|
<pre>
|
|
@page :right {
|
|
counter-reset: pages page;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
-->
|
|
<!--
|
|
|
|
<h2>Image resolution</h2>
|
|
|
|
<p>Image resolution, as the term is used in this document, means
|
|
pixels per physical length, e.g., pixels per inch. Some image formats
|
|
can record information about the resolution of images. This
|
|
information can be helpful when determining the actual size of the
|
|
image in the formatting process. However, the information can also be
|
|
wrong, in which case it should be ignored. The 'image-resolution' and
|
|
'background-image-resolution' properties are introduced to determine
|
|
the correct resolution of images.
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>image-resolution</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>normal | [ from-image || <dpi> ]
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>normal
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>replaced elements <span class=issue>and background images?</span>
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
<td>N/A
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
<td>visual
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
<td>as specified value <span class=issue>(or, should it be only one value?)</span>
|
|
</table>
|
|
|
|
<p>The values are:
|
|
|
|
<dl>
|
|
<dt>normal
|
|
|
|
<dd>The resolution of the image is unknown, and UAs should not use the
|
|
resolution found in the image. Instead, the image resolution will be
|
|
found by converting the dimension of the image into CSS pixels.
|
|
|
|
<dt>from-image
|
|
|
|
<dd>The UA must look for the resolution in the image itself. If the image does not have a resolution, the specified <dpi> value is used. If no <dpi> value is specified, the behavior is as if ''normal'' had been specified.
|
|
|
|
<dt><dpi>
|
|
|
|
<dd>The value consists of a number with a 'dpi' unit identifier. The <dpi> value sets the resolution of the image. In combination with ''from-image'', the specified dpi is only used if the image does not have a resolution.
|
|
|
|
</dl>
|
|
|
|
<div class="example">
|
|
<p>This rule specifies that the UA should use the image resolution found in the image itself.
|
|
<pre>
|
|
img { image-resolution: from-image }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
|
|
<pre>
|
|
img { image-resolution: 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<p>These rules both specify that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.
|
|
<pre>
|
|
img { image-resolution: from-image 300dpi }
|
|
img { image-resolution: 300dpi from-image }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
-->
|
|
<!--
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>image-resolution</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>normal | auto | <dpi> [ , normal | <dpi> ]?
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>normal
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>replaced elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
<td>N/A
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
<td>visual
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
<td>as specified value <span class=issue>(or, should it be only one value?)</span>
|
|
</table>
|
|
|
|
<p>This property accepts either a single value, or a comma-separated
|
|
list of two values. The values are:
|
|
|
|
<dl>
|
|
<dt>normal
|
|
|
|
<dd>The resolution of the image is unknown, and UAs should not use the
|
|
resolution found in the image. Instead, the image resolution will be
|
|
found by making image pixels equivalent to CSS pixels.
|
|
|
|
<dt>auto
|
|
|
|
<dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated.
|
|
|
|
<dt><dpi>
|
|
|
|
<dd>The value consists of a number with a 'dpi' unit identifier. The
|
|
UA should use the specified resolution.
|
|
|
|
</dl>
|
|
|
|
<p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if ''normal'' had been specified.
|
|
|
|
<div class="example">
|
|
<p>This rule specifies that the UA should use the image resolution found in the image itself.
|
|
<pre>
|
|
img { image-resolution: auto }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.
|
|
<pre>
|
|
img { image-resolution: auto, 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
|
|
<pre>
|
|
img { image-resolution: 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
-->
|
|
<!--
|
|
|
|
<div class="issue">
|
|
<p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g.,
|
|
<pre>
|
|
background-image: url(image.png, width, height, resolution);
|
|
background-image: image-url(image.png, width, height, resolution);
|
|
background-image: image(url(image.png), width, height, resolution);
|
|
</pre>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>background-image-resolution</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>normal | auto | <dpi> [ , normal | <dpi> ]?
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>normal
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>replaced elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
<td>N/A
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
<td>visual
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
<td>as specified value <span class=issue>(or, should it be only one value?)</span>
|
|
</table>
|
|
|
|
<p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk.
|
|
|
|
<p>As 'image-resolution', except that it describes the resolution of the element's background image.
|
|
|
|
-->
|
|
|
|
|
|
<h2 id=page-marks-and-bleed-area><span class=secno>6. </span>Page marks and
|
|
bleed area</h2>
|
|
|
|
<p>The ‘<a href="#marks"><code class=property>marks</code></a>’
|
|
property from <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> is
|
|
part of this specification. <!--
|
|
http://www.w3.org/TR/2008/REC-CSS2-20080411/page.html#propdef-marks
|
|
-->
|
|
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=marks>marks</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>[ crop || cross ] | none
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>page context
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property adds crop and/or cross marks to the document. Crop marks
|
|
indicate where the page should be cut. Cross marks are used to align
|
|
sheets.
|
|
|
|
<p>Crop marks and cross marks are printed outside the page box. To have
|
|
room to show crop and cross marks, the final pages will have to be
|
|
somewhat bigger than the page box.
|
|
|
|
<div class=example>
|
|
<p>To set crop and cross marks on a document, this code can be used:
|
|
|
|
<pre>
|
|
@page { marks: crop cross }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bleed>bleed</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>6pt
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>page context
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to width of page box
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified value
|
|
</table>
|
|
|
|
<p>This property specifies the extent of the page bleed area outside the
|
|
page box. This property only has effect if crop marks are enabled.
|
|
|
|
<h2 id=bookmarks><span class=secno>7. </span>Bookmarks</h2>
|
|
|
|
<p>Some document formats have the capability of holding bookmarks.
|
|
Bookmarks are typically shown outside the document itself, often a
|
|
tree-structured and clickable table of contents to help navigate in the
|
|
electronic version of the document. To generate bookmarks, these
|
|
properties are defined:
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-level>bookmark-level</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | <integer>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<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>specified value
|
|
</table>
|
|
|
|
<p>This property describes what level a certain bookmark has in a
|
|
hierarchical bookmark structure. The highest level is ‘<code
|
|
class=css>1</code>’, then ‘<code class=css>2</code>’,
|
|
‘<code class=css>3</code>’ etc.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h1 { bookmark-level: 1 }
|
|
h2 { bookmark-level: 2 }
|
|
h3 { bookmark-level: 3 }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-label>bookmark-label</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>content() | <string>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>content()
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<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>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the label of the bookmark, i.e., the text that
|
|
will represent the bookmark in the bookmark structure.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
a { bookmark-label: attr(title, string) }
|
|
h1 { bookmark-label: content() }
|
|
h2 { bookmark-label: content(before) }
|
|
#frog { bookmark-label: "The green frog" }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-target>bookmark-target</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | <uri>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<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>For URI values, the absolute URI; for ‘<code
|
|
class=property>none</code>’, as specified.
|
|
</table>
|
|
|
|
<p>This property specifies the target of the bookmark link.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
.bookmark {
|
|
bookmark-label: attr(title, string);
|
|
bookmark-target: attr(href, url);
|
|
}
|
|
...
|
|
<a class="bookmark" title="The green pear" href="#pears"/>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example> .exable { bookmark-label: url(http://www.example.com) }
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-state>bookmark-state</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>open | closed
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>open
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<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>specified value
|
|
</table>
|
|
|
|
<p>This property describes the initial state of a bookmark.
|
|
|
|
<div>
|
|
<pre>
|
|
* { bookmark-state: closed }
|
|
#open { bookmark-state: open }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=cmyk-colors><span class=secno>8. </span>CMYK colors</h2>
|
|
|
|
<p>Printers do not use RGB colors, they (often) use CMYK: cyan, magenta,
|
|
yellow and black. The ‘<code class=css>device-cmyk()</code>’
|
|
functional value allows style sheets to express device-dependent CMYK
|
|
colors.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h3 { color: device-cmyk(0.8, 0.5, 0.0, 0.3) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The values representing the colors are between ‘<code
|
|
class=css>0</code>’ and ‘<code class=css>1</code>’.
|
|
Values outside this range are clipped.
|
|
|
|
<p>It is not expected that screen-centric user agents support CMYK colors
|
|
and it is therefore important that existing CSS color values can be
|
|
combined with CMYK colors.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h3 {
|
|
color: red;
|
|
color: device-cmyk(0.5, 0.1, 0.0, 0.2);
|
|
}
|
|
</pre>
|
|
|
|
<p>User Agents that do not understand the <code>device-cmyk()</code>
|
|
value, will use the first color (red). User agents that understand
|
|
<code>device-cmyk()</code> will use the second color (which is bluish).
|
|
</div>
|
|
|
|
<h2 id=styling-blank-pages><span class=secno>9. </span>Styling blank pages</h2>
|
|
|
|
<p>Blank pages that appear as a result of forced page breaks can be styled
|
|
with the <code>:blank</code> pseudo-class.
|
|
|
|
<div class=example>
|
|
<p>In this example, forced page break may occur before <code>h1</code>
|
|
elements.
|
|
|
|
<pre>
|
|
h1 { page-break-before: left }
|
|
|
|
@page :blank {
|
|
@top-center { content: "This page is intentionally left blank" }
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The <code>:blank</code> pseudo-class has the same specificity as the
|
|
<code>:first</code> pseudo-class. A page matched by <code>:blank</code>
|
|
will still be matched by other page selectors.
|
|
|
|
<div class=example>
|
|
<p>If headers have been specified on all right pages, a blank right page
|
|
will be matched by both <code>:blank</code> and <code>:right</code>.
|
|
Therefore, margin boxes set on right pages will have to be removed unless
|
|
they are wanted on blank pages. Here is an example where the top center
|
|
header is removed from blank pages, while the page number remains:
|
|
|
|
<pre>
|
|
h1 { page-break-before: left }
|
|
|
|
@page :blank {
|
|
@top-center { content: none }
|
|
}
|
|
|
|
@page :right {
|
|
@top-center { content: "Preliminary edition" }
|
|
@bottom-center { content: counter(page) }
|
|
}
|
|
</pre>
|
|
|
|
<p>Due to the higher specificity of <code>:blank</code> over
|
|
<code>:right</code>, the top center header is removed even if
|
|
<code>content: none</code> comes before <code>content: "Preliminary
|
|
edition"</code>.
|
|
</div>
|
|
|
|
<h2 id=paged-presentations><span class=secno>10. </span>Paged presentations</h2>
|
|
|
|
<p>Printed publications are paged, while screen-based presentations of web
|
|
pages are most often presented in a continous manner with a scrollbar on
|
|
the side. There are reasons to believe that screen-based presentations
|
|
also could benefit from using paged presentations. There is nothing in web
|
|
specifications that prevent browsers from adding a page-based mode today.
|
|
However, most web content is authored and styled with a continous
|
|
presentation in mind. This could change if it becomes possible to describe
|
|
paged presentations in style sheets. This section is an attempt to do so.
|
|
|
|
<p>To support paged presentations, four new values are added to the
|
|
‘<code class=property>overflow-style</code>’ property:
|
|
|
|
<dl>
|
|
<dt>paged-x
|
|
|
|
<dd>overflow content is paged, and the pages are laid out along the x
|
|
axis, in the x axis component of the writing direction
|
|
|
|
<dt>paged-y
|
|
|
|
<dd>overflow content is paged, and the pages are laid out along the y
|
|
axis, in the the y axis component of the writing direction
|
|
|
|
<dt>paged-x-controls
|
|
|
|
<dd>as ‘<code class=property>paged-x</code>’, but with added
|
|
UA-specific controls to change pages
|
|
|
|
<dt>paged-y-controls
|
|
|
|
<dd>as ‘<code class=property>paged-y</code>’, but with added
|
|
UA-specific controls to change pages
|
|
</dl>
|
|
|
|
<p class=issue>Is "paginated" a better word?
|
|
|
|
<p class=issue>Should controls be specified on a separate property, or on
|
|
an attribute (like HTML's video element)?
|
|
|
|
<p class=issue>Should the axis (x/y) be specified on a separate property?
|
|
|
|
<div class=example>
|
|
<p>In this example, the root element is constrained to have the same
|
|
height as the initial containing block. Overflow content will be laid out
|
|
on subsequent pages along the x axis. In LTR languages, this means right;
|
|
in RTL languages this means left; in vertical-rl this means right.
|
|
|
|
<pre>
|
|
html {
|
|
overflow-style: paged-x;
|
|
height: 100%;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, one element within the document is paged, and controls
|
|
are added so that users can navigate from one page to the next. As such,
|
|
the controls have the same effect as scrollbars in continous
|
|
presentations.
|
|
|
|
<pre>
|
|
#content {
|
|
overflow-style: paged-x-controls;
|
|
height: 400px;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>A paged container cannot be split over multiple columns.
|
|
|
|
<h2 id=navigation-between-pages><span class=secno>11. </span>Navigation
|
|
between pages</h2>
|
|
|
|
<p>Paged navigation within a page (as described above), can also be
|
|
naturally extended to navigation between web documents. To support this, a
|
|
new @-rule is proposed: @navigation. The purpose of @navigation is to
|
|
describe which documents the user can navigate to by moving up, right,
|
|
down, or left from the current document.
|
|
|
|
<p>Four new properties are allowed inside @navigation: nav-up, nav-right,
|
|
nav-bottom, nav-right.
|
|
|
|
<p class=note>The name of the properties inside @navigation are borrowed
|
|
from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3
|
|
Basic User Interface Module</a>.
|
|
|
|
<p>The properties accept these values:
|
|
|
|
<dl>
|
|
<dt>link-rel()
|
|
|
|
<dd>the function takes one argument, which refers to the <tt>rel</tt>
|
|
attribute of the <tt>link</tt> element
|
|
<div class=example>
|
|
<pre>
|
|
<link rel=index href="../index.html">
|
|
<link rel=previous href=g3.html>
|
|
<link rel=next href=g1.html>
|
|
...
|
|
@-o-navigation {
|
|
nav-up: link-rel(index);
|
|
nav-left: link-rel(previous);
|
|
nav-right: link-rel(next);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=issue>This functionality relies on semantics in HTML and CSS.
|
|
Other languages may have other other ways to describe such semantics.
|
|
One possible solution for other languages is "link[rel=index] { nav-up:
|
|
attr(href) }"
|
|
|
|
<p class=issue>The "link-rel" name is a bit academic, perhaps the "go()"
|
|
name can be used instead?
|
|
|
|
<dt>go()
|
|
|
|
<dd>The function takes one argument: <tt>back</tt>, which takes the user
|
|
one step back in history.
|
|
<div class=example>
|
|
<pre>
|
|
@navigation {
|
|
nav-left: go(back);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>
|
|
|
|
<dt>url-doc()
|
|
|
|
<dd>The funcation takes one argument: a URL. Relative URLs are relative to
|
|
the document, not to the style sheet.
|
|
<div class=example>
|
|
<pre>
|
|
@navigation {
|
|
nav-up: url-doc(..);
|
|
nav-down: url-doc(a1.html);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>url()
|
|
|
|
<dd>The funcation takes one argument: a URL. Relative URLs are relative to
|
|
the style sheet.
|
|
<div class=example>
|
|
<pre>
|
|
@navigation {
|
|
nav-up: url(..);
|
|
nav-down: url(a1.html);
|
|
}
|
|
</pre>
|
|
</div>
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>Combined with the <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document">@document-rule</a>,
|
|
navigation maps can be described:
|
|
|
|
<pre>
|
|
@document url("http://example.com/foo") {
|
|
@navigation {
|
|
nav-right: link-rel(next);
|
|
}
|
|
}
|
|
|
|
@document url("http://example.com/bar") {
|
|
@navigation {
|
|
nav-upt: link-rel(next);
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=page-shift-effects><span class=secno>11.1. </span>Page shift effects</h3>
|
|
|
|
<p>To describe page shift effects, four new properties inside @navigation
|
|
are proposed: nav-up-shift, nav-right-shift, nav-down-shift,
|
|
nav-left-shift. These properties take one of several keyword values:
|
|
|
|
<dl>
|
|
<dt>pan
|
|
|
|
<dd>pans to the new page; this is the initial value
|
|
|
|
<dt>turn
|
|
|
|
<dd>turns the page, like soft book pages do
|
|
|
|
<dt>flip
|
|
|
|
<dd>flips the page, like stiff cardbord
|
|
|
|
<dt>fold
|
|
|
|
<dd>the old page folds, like an accordion
|
|
</dl>
|
|
|
|
<p class=issue>The proposed keyword values are loosely described. Are there
|
|
better ways to describe transitions?
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@navigation {
|
|
nav-up-shift: pan;
|
|
nav-down-shift: flip;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=page-floats><span class=secno>12. </span>Page floats</h2>
|
|
|
|
<p>Images and figures are sometimes displayed at the top or bottom of pages
|
|
and columns. This specificaton adds new keywords on the ‘<code
|
|
class=property>float</code>’ property which, in combination with
|
|
integer values on ‘<code class=property>column-span</code>’
|
|
and the new ‘<code class=property>float-modifier</code>’,
|
|
provides support for common paper-based layouts. <!--
|
|
<p>(A few words about the difference between this proposa, and the one
|
|
sketched in the next section: Care has now been taken to avoid layouts
|
|
that are hard to achieve, or that can be achieved in other ways. For
|
|
example, by saying 'top-corner' instead of 'top left' or 'top right',
|
|
it becomes impossible to specify a layout where one has to replace
|
|
already laid-out content. Compared to the mk1 float model, mk2 does
|
|
not allow one to explicityly set the containing block of the float;
|
|
the CB is the column or the multicol element (depending on which
|
|
keyword in use). It is therefore impossible to float something to the
|
|
top of the page. However, given that 'column-span' now is widely
|
|
supported, a different strategy can be used: make the root element a
|
|
multicol element, and float the box to the top. Thereby it ends up at
|
|
the top of hte page.)
|
|
-->
|
|
|
|
|
|
<p>Four new keywords on ‘<code class=property>float</code>’
|
|
have been added:
|
|
|
|
<dl>
|
|
<dt>top
|
|
|
|
<dd>the box is floated to the top of the natural column
|
|
|
|
<dt>bottom
|
|
|
|
<dd>the box is floated to the bottom of the natural column
|
|
|
|
<dt>top-corner
|
|
|
|
<dd>the box is floated to the top of the last column (in the inline
|
|
direction) that fits inside the multicol element on the same page.
|
|
|
|
<dt>bottom-corner
|
|
|
|
<dd>similar to ‘<code class=property>top-corner</code>’, exept
|
|
the box is floated to the bottom
|
|
|
|
<dt>snap
|
|
|
|
<dd>same as ‘<code class=property>top</code>’ if the box is
|
|
naturally near the top; same as ‘<code
|
|
class=property>bottom</code>’ if the box is naturally near the
|
|
bottom. The ‘<code class=property>widows</code>’/‘<code
|
|
class=property>orphans</code>’ properties may be consulted to
|
|
determine if the box is near the top/bottom.
|
|
</dl>
|
|
|
|
<p>These new keywords only apply in paged media; in continous media
|
|
declarations with these keywords are ignored.
|
|
|
|
<div class=example>
|
|
<p>Float figure to top of natural column:
|
|
|
|
<pre>
|
|
.figure { float: top; display: block; }
|
|
</pre>
|
|
<img alt="sample rendering" src=7.png></div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: top; width: 50% }
|
|
</pre>
|
|
<img alt="sample rendering" src=7b.png></div>
|
|
|
|
<div class=example>
|
|
<p>Float figure to top of the natural column, spanning all columns:
|
|
|
|
<pre>
|
|
.figure { float: top; column-span: all }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Float figure to top/bottom of the last column of the multicol element
|
|
on that page:
|
|
|
|
<pre>
|
|
.figure { float: top-corner }
|
|
</pre>
|
|
<img alt="sample rendering" src=6.png></div>
|
|
|
|
<p>The ‘<code class=property>column-span</code>’ property is
|
|
extended with integer values so that elements can span several columns. If
|
|
the specified integer value is equal to, or larger than the number of
|
|
columns in the multicol element, the number of columns spanned will be the
|
|
same as if ‘<code class=css>column-span: all</code>’ had been
|
|
specified.
|
|
|
|
<div class=example>
|
|
<p>In combination with ‘<code
|
|
class=property>column-span</code>’, the figure is floated to the
|
|
top corner of the multicol element on that page:
|
|
|
|
<pre>
|
|
.figure { float: top-corner; column-span: 2; width: 100% }
|
|
</pre>
|
|
<img alt="sample rendering" src=8.png></div>
|
|
|
|
<div class=example> <img alt="sample rendering" src=regions.png>
|
|
<pre>
|
|
body { columns: 3 }
|
|
img.A { column-span: 2; width: 100% }
|
|
.one { column-span: 2 }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=float-modifiers><span class=secno>12.1. </span>Float modifiers</h3>
|
|
|
|
<p>These values on ‘<code class=property>float</code>’ can be
|
|
combined with one of ‘<code
|
|
class=property>top</code>’/‘<code
|
|
class=property>bottom</code>’/‘<code
|
|
class=property>top-corner</code>’/‘<code
|
|
class=property>bottom-corner</code>’ values:
|
|
|
|
<dl>
|
|
<dt>next-page
|
|
|
|
<dd>In paged media, float box to the next page. The first column of the
|
|
multicol element on the next page is considered to be the natural column
|
|
for boxes affected by this value.
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: top-corner next-page }
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>next-column
|
|
|
|
<dd>In paged media, float box to the next column.
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: top next-column }
|
|
.figure { float: next-column top }
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>unless-room
|
|
|
|
<dd>Only float the box if it otherwise would have lead to a column or page
|
|
break.
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: top unless-room }
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>left/right
|
|
|
|
<dd>‘<code class=property>left</code>’/‘<code
|
|
class=property>right</code>’ can be used in combination with
|
|
‘<code class=property>top</code>’/‘<code
|
|
class=property>bottom</code>’/‘<code
|
|
class=property>top-corner</code>’/‘<code
|
|
class=property>bottom-corner</code>’ to allow other content to flow
|
|
around the box.
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: top right; width: 60% }
|
|
</pre>
|
|
<img alt="sample rendering" src=13.png></div>
|
|
</dl>
|
|
|
|
<h3 id=floating-inside-and-outside-pages><span class=secno>12.2.
|
|
</span>Floating inside and outside pages</h3>
|
|
|
|
<p>Two allow content to flow to the inside and outside of a page, these
|
|
keywords are added to the ‘<code class=property>float</code>’
|
|
property:
|
|
|
|
<dl>
|
|
<dt>inside
|
|
|
|
<dd>On a right page, this value is synonymous with ‘<code
|
|
class=property>left</code>’. On a left page, this value is
|
|
synonymous with ‘<code class=property>right</code>’.
|
|
|
|
<dt>outside
|
|
|
|
<dd>On a left page, this value is synonymous with ‘<code
|
|
class=property>left</code>’, On a right page, this value is
|
|
synonymous with ‘<code class=property>right</code>’.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
.figure { float: outside }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=multi-column-float-intrusion><span class=secno>12.3.
|
|
</span>Multi-column float intrusion</h3>
|
|
|
|
<p>A new value on ‘<code class=property>float</code>’ is
|
|
introduced to support intrusion in columns:
|
|
|
|
<dl>
|
|
<dt>intrude
|
|
|
|
<dd>The element may intrude neighboring columns; if the element is not in
|
|
a multi-column element, this keyword has no effect.
|
|
</dl>
|
|
|
|
<p>The ‘<code class=property>intrude</code>’ value only works
|
|
in combination with one of these keywords: ‘<code
|
|
class=property>left</code>’/‘<code
|
|
class=property>right</code>’/‘<code
|
|
class=property>top</code>’/‘<code
|
|
class=property>bottom</code>’/‘<code
|
|
class=property>top-corner</code>’/‘<code
|
|
class=property>bottom-corner</code>’.
|
|
|
|
<div class=example>
|
|
<pre class=css>
|
|
img { float: left intrude; width: 120%; }
|
|
</pre>
|
|
|
|
<p>In this example, the image is wider than the column and will therefore
|
|
intrude into the neighboring column. At the bottom of the middle column
|
|
is a long word that is clipped in the middle of the column gap. <img
|
|
alt="sample rendering" src=1.png>
|
|
</div>
|
|
|
|
<h3 id=the-float-offset-property><span class=secno>12.4. </span>The
|
|
‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=float-offset>float-offset</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length> <length> ?
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>0 0
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>floated elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>see prose
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>one or two absolute lengths
|
|
</table>
|
|
|
|
<p>This property pushes a float in opposite direction of the where it has
|
|
been floated with ‘<code class=property>float</code>’. If one
|
|
value is specified, it is the horizontal offset. If two values are
|
|
specified, the first is the horizontal and the second is the vertical
|
|
offset. If no vertical value has been specified, the vertical offset is
|
|
set to zero.
|
|
|
|
<p>Negative values are allowed; a negative values will push the float in
|
|
the same direction as it has been floated with ‘<code
|
|
class=property>float</code>’
|
|
|
|
<p>The float will never be pushed outside the content edges of the multicol
|
|
element due to a setting on ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’.
|
|
|
|
<p>Percentage values refer to the width/height of the float plus a fraction
|
|
of the column gap.
|
|
|
|
<p>Floats that are moved into other columns with this property intrudes.
|
|
|
|
<div class=example>
|
|
<pre>img {
|
|
float: top right;
|
|
float-offset: -50% 3em;
|
|
width: 120%;
|
|
}
|
|
</pre>
|
|
<img alt="sample rendering" src=11.png></div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
img {
|
|
float: top right;
|
|
float-offset: -80% 2em;
|
|
width: 100%;
|
|
}
|
|
</pre>
|
|
<img alt="sample rendering" src=12.png></div>
|
|
|
|
<p class=issue>Would it make more sense to not specify the opposite
|
|
direction, but the "forward" direction? <!--
|
|
<h2>Aligning baselines in multi-column layouts</h2>
|
|
|
|
<p>In multi-column layouts, baselines are typically aligned between
|
|
adjacent columns. This gives the presentation a visual rythm, and text
|
|
in the end of the columns will be alignend. To support this, a new
|
|
value on the <span class=property>'line-box-contain'</span> property is
|
|
defined: ''line-grid'' (or, perhaps, ''gap'', ''crack'', ''snap'', ''snap-gap'', ''void'', ''grid'', ''snap-to-grid'').
|
|
|
|
<p>The value means that the height of the line in which the element
|
|
occurs should be rounded up to the smallest multiple of the used
|
|
'line-height' value on the containing block.
|
|
|
|
<div class=example>
|
|
<p>In this example, the stacking height of div.figure would be 30px (2 * 15px)
|
|
|
|
<pre>
|
|
div.multicol { line-height: 15px }
|
|
div.figure { height: 20px; line-box-contain: block inline replaced line-grid }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=note>The <a href="http://dev.w3.org/csswg/css3-linebox/#LineStacking">line-box-contain</a> property is defined in <a href="http://dev.w3.org/csswg/css3-linebox">CSS3 module: line</a>.
|
|
-->
|
|
<!--
|
|
http://www.w3.org/Style/Group/css3-src/css3-linebox/Overview.html#LineStacking
|
|
-->
|
|
<!--
|
|
<p class=note>A similar idea — 'line-stacking-strategy: grid-height' — was proposed in a <a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">previous version of the CSS3 line module</a>. The 'line-stacking-strategy' property is <a href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>.
|
|
-->
|
|
<!--
|
|
div.chapter:columns-page(1) { }
|
|
-->
|
|
|
|
<h2 id=the-first-page-pseudo-element><span class=secno>13. </span>The
|
|
‘<code class=property>first-page</code>’ pseudo-element</h2>
|
|
|
|
<p>The ‘<code class=property>first-page</code>’ pseudo-element
|
|
is used to apply styling to the part of an element that ends up on the
|
|
starting page for that element. If the whole element appears on the
|
|
starting page, ‘<code class=property>first-page</code>’
|
|
applies to the whole element. The following properties apply to
|
|
:first-page pseudo-elements: column properties, background properties,
|
|
margin properties, border properties, and padding properties. UAs may
|
|
apply other properties as well.
|
|
|
|
<div class=example>
|
|
<p>In this example, there will be one column on the starting page of each
|
|
chapter, while subsequent pages will have two columns:
|
|
|
|
<pre>
|
|
div.chapter { columns: 2 }
|
|
div.chapter::first-page { columns: 1 }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, padding is added on the left side on the starting page
|
|
of each chapter:
|
|
|
|
<pre>
|
|
div.chapter { break-before: left }
|
|
div.chapter::first-page { padding-left: 4em }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=selecting-columns-and-pages><span class=secno>14. </span>Selecting
|
|
columns and pages</h2>
|
|
|
|
<p class=issue>This is sketchy.
|
|
|
|
<p>Pseudo-elements are introduced to apply styling to the part of an
|
|
element that ends up on a certain page of column of that element. The
|
|
‘<code class=css>column(n)</code>’ pseudo-element selects
|
|
columns, and the ‘<code class=css>page(n)</code>’
|
|
psedo-element select columns.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
div.chapter::column(3) /* the third column of the element */
|
|
div.chapter::column(2n) /* all even columns of the element */
|
|
div.chapter::page(2) /* second page of the element */
|
|
div.chapter::page-column(2,2) /* second column on second page */
|
|
div.chapter::page(2)::column(2) /* second column, but only if it appears on the second page */
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
|
|
<h2>Page selection: nth()</h2>
|
|
|
|
<p>In CSS 2.0, <a href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and right pages</a> can be selected. This specification adds support for selecting the nth page in the document, or the nth named page.
|
|
|
|
<div class=example>
|
|
<p>This example sets the background color of the second page in the document:
|
|
|
|
<pre>
|
|
@page :nth(2) {
|
|
background: green;
|
|
}
|
|
<pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This example sets the background color of the second page of all chapters in a document:
|
|
|
|
<pre>
|
|
@page chapter {
|
|
background: yellow;
|
|
}
|
|
@page chapter:nth(2) {
|
|
background: green;
|
|
}
|
|
div.chapter {
|
|
page: chapter;
|
|
}
|
|
<pre>
|
|
</div>
|
|
|
|
<p>The arguments to the nth() functional notation is the same as for the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()</a> pseudo-class.
|
|
|
|
<div class="example">
|
|
<pre>
|
|
@page chapter:nth(2n+1) {
|
|
background: green;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Even when a named page is not defined through an <code>@page <em>name</em> { .. }</code> construct, the name can still be used with :nth().
|
|
|
|
<div class="example">
|
|
<p>Even when the first line is commented out, the second page of all chapters in the document will be green.
|
|
|
|
<pre>
|
|
/* @page chapter { ... } */
|
|
|
|
@page chapter:nth(2) {
|
|
background: green;
|
|
}
|
|
|
|
div.chapter { page: chapter }
|
|
</pre>
|
|
</div>
|
|
|
|
-->
|
|
|
|
<h2 id=conformance><span class=secno>15. </span>Conformance</h2>
|
|
|
|
<p>TBD
|
|
|
|
<h2 id=appendix-a-default-style-sheet><span class=secno>16. </span>Appendix
|
|
A: Default style sheet</h2>
|
|
|
|
<pre>
|
|
@page {
|
|
counter-reset: footnote;
|
|
@footnote {
|
|
counter-increment: footnote;
|
|
float: page bottom;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
::footnote-call {
|
|
counter-increment: footnote;
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
::footnote-marker {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
|
|
|
|
h1 { bookmark-level: 1 }
|
|
h2 { bookmark-level: 2 }
|
|
h3 { bookmark-level: 3 }
|
|
h4 { bookmark-level: 4 }
|
|
h5 { bookmark-level: 5 }
|
|
h6 { bookmark-level: 6 }
|
|
</pre>
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>This document has been improved by Bert Bos, Michael Day, Melinda Grant,
|
|
David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika Etemad,
|
|
Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner
|
|
Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin, Christian Roth,
|
|
Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., Jacob Grundtvig
|
|
Refstrup, James Elmore, Ian Tindale, Murakami Shinyu, Paul E. Merrell,
|
|
Philip Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek
|
|
Çelik, Florian Rivoal, Alex Mogilevsky.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS3LIST>[CSS3LIST]
|
|
|
|
<dd>Tab Atkins Jr. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists
|
|
and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS2>[CSS2]
|
|
|
|
<dd>Ian Jacobs; et al. <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
|
|
Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3PAGE>[CSS3PAGE]
|
|
|
|
<dd>Håkon Wium Lie; Melinda Grant. <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
|
|
Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>bleed, <a href="#bleed" title=bleed><strong>6.</strong></a>
|
|
|
|
<li>bookmark-label, <a href="#bookmark-label"
|
|
title=bookmark-label><strong>7.</strong></a>
|
|
|
|
<li>bookmark-level, <a href="#bookmark-level"
|
|
title=bookmark-level><strong>7.</strong></a>
|
|
|
|
<li>bookmark-state, <a href="#bookmark-state"
|
|
title=bookmark-state><strong>7.</strong></a>
|
|
|
|
<li>bookmark-target, <a href="#bookmark-target"
|
|
title=bookmark-target><strong>7.</strong></a>
|
|
|
|
<li>float-offset, <a href="#float-offset"
|
|
title=float-offset><strong>12.4.</strong></a>
|
|
|
|
<li>marks, <a href="#marks" title=marks><strong>6.</strong></a>
|
|
|
|
<li>named strings, <a href="#named-strings0"
|
|
title="named strings"><strong>2.</strong></a>
|
|
|
|
<li>running elements, <a href="#running-elements0"
|
|
title="running elements"><strong>2.</strong></a>
|
|
|
|
<li>string-set, <a href="#string-set"
|
|
title=string-set><strong>2.1.1.</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>
|
|
<th><a class=property href="#bleed">bleed</a>
|
|
|
|
<td><length>
|
|
|
|
<td>6pt
|
|
|
|
<td>page context
|
|
|
|
<td>no
|
|
|
|
<td>refer to width of page box
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#bookmark-label">bookmark-label</a>
|
|
|
|
<td>content() | <string>
|
|
|
|
<td>content()
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<th><a class=property href="#bookmark-level">bookmark-level</a>
|
|
|
|
<td>none | <integer>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<th><a class=property href="#bookmark-state">bookmark-state</a>
|
|
|
|
<td>open | closed
|
|
|
|
<td>open
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<th><a class=property href="#bookmark-target">bookmark-target</a>
|
|
|
|
<td>none | <uri>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<th><a class=property href="#float-offset">float-offset</a>
|
|
|
|
<td><length> <length> ?
|
|
|
|
<td>0 0
|
|
|
|
<td>floated elements
|
|
|
|
<td>no
|
|
|
|
<td>see prose
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<th><a class=property href="#marks">marks</a>
|
|
|
|
<td>[ crop || cross ] | none
|
|
|
|
<td>none
|
|
|
|
<td>page context
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<th><a class=property href="#string-set">string-set</a>
|
|
|
|
<td>[[ <identifier> <content-list>] [, <identifier>
|
|
<content-list>]* ] | none
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
</table>
|
|
<!--end-properties-->
|