8000 csswg-drafts/css-page-floats/Overview.src.html~ at 52ce973793ae16b50f5f12576f6845d12d8a03c3 · xfq/csswg-drafts · GitHub
Skip to content

Overview.src.html~

Latest commit

 

History

History
4285 lines (3229 loc) · 110 KB

Overview.src.html~

File metadata and controls

4285 lines (3229 loc) · 110 KB
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../default.css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" rel=stylesheet type="text/css">
<style type="text/css">
.example img { display: block }
.example { background: #ddd }
body { line-height: 1.3 }
.remove, .unimplemented { display: none }
table.string-set-example { font-family: monospace; border-collapse: collapse }
table.string-set-example div.pre {
width: 12em; white-space: pre;
}
table.string-set-example td {
padding: 0.3em;
border: thin solid black
}
</style>
<body>
<div class="head">
<!--logo-->
<h1>CSS Generated Content for Paged Media Module</h1>
<h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/[STATUS]-css3-gcpm-[CDATE]/</a></dd>
<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>Feedback:</dt>
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-gcpm%5D%20feedback"
>www-style@w3.org</a>
with subject line &ldquo;<kbd>[css-gcpm]
<var>&hellip; message topic &hellip;</var></kbd>&rdquo;
(<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
>archives</a>)
<dt>Editor:
<dd>H&aring;kon Wium Lie, Opera Software, howcome@opera.com
</dl>
<!--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 &ndash; multi-column layout and paged media &ndash; 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">Status of this document</h2>
<!--begin-status-->
<!--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/2011/WD-css3-gcpm-20111129/">previous WD</a>, this specification has been alinged with existing implemenatation. Some functionality has been removed (e.g., env(), target-pull()), or moved to other modules (the styling of blank pages). Some functionality are used in this draft with the expectation that it will appear in other modules (<a href="http://dev.w3.org/csswg/css-backgrounds-4/#border-clip">border-clip</a>). The definition of some properties has changed (e.g., the 'start' keyword) or been further clarified based on feedback on www-style.
<h2 class="no-num no-toc"><a name="contents">Table of contents</a></h2>
<!--begin-toc-->
<p>[If you keep the &lt;!--comment--> the table of contents will be
included here automatically.]</p>
<!--end-toc-->
<h2 class="no-num">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>Running headers and footers</h2>
<p>To aid navigation in printed material, headers and footers are often
printed in the page margins. [[CSS3PAGE]] 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>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>running elements</dfn> which <em>moves</em> elements
(with style, structure, and replaced content) into a margin box.
<h3>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 'string-set'
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(text) }
</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 'content'
property:
<pre>
@page :right { @top-right { content: string(title) }}
</pre>
</div>
<h4>Setting named strings: the 'string-set' property</h4>
<table class=propdef>
<tr>
<td><em>Name:</em>
<td><dfn>string-set</dfn>
<tr>
<td><em>Value:</em>
<td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier> &lt;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&nbsp;value:</em>
<td>as specified value
</table>
<p>The 'string-set' 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 'string-set' different from ''none'' is
encountered, the named strings are assigned their respective value.
<p>&lt;content-list> expands to one or more of these values, in any order:
<dl>
<dt>&lt;string&gt;
<dd>a string, e.g. "foo"
<dt>&lt;counter&gt;
<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 class=remove>contents()
<dd class=remove>The textual content of the element, 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><!--content-element-->content(text)
<dd>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. This is the default value, so ''content()'' is equivalent to ''content(text)''.
<dt><!--content-before-->content(before)
<dd>The textual content of the ::before pseudo-element the content of the element.
<dt><!--content-after-->content(after)
<dd>The textual content of the ::after pseudo-element the content of the element.
<dt><!--content-first-letter-->content(first-letter)
<dd>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 ''first-letter'' is to create one-letter headers, e.g., in dictionaries.</p>-->
</dl>
<dl class=remove>
<dt>env()
<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>
<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 ''string()'' 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
'string-set' property is attached and subsequent pages.
<!--
<p>The name space of named strings is different from other sets of
names in CSS.
-->
<p>The textual content is processed as if 'white-space: normal' had been set.
<div class="example">
<pre>
h2 {
string-set: header "Chapter " counter(header) ": " content();
counter-increment: header;
}
&lt;h2>Europa&lt;/h2>
</pre>
<!-- string-set: header "Chapter " counter(header) ": " contents;-->
<p>Note that the string called "header" is different from the counter with the same name. The above code may result in the string called "header" is 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.
<pre>
h2:before { content: "Chapter " counter(header) }
h2 {
string-set: header content(before) content(text);
counter-increment: header }
</pre>
</div>
<div class="example">
<pre>
dt { string-set: index 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 example the content is copied into a named string:
<pre>
title {
display: none;
string-set: tittel content();
}
</pre>
</div>
<h4>Using named strings</h4>
<p>The content of named strings can be recalled by using the
''string()'' value on the 'content' property. The ''string()'' 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 first-letter, entry content() }
</pre>
<!--h1 { string-set: header "Chapter " counter(chapter) contents }
dt { string-set: index content-first-letter, entry contents }-->
</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 ''string()'' value. This argument can have one of four keywords:
<ul>
<li>''first'': the value of the first assignment on the page is used. If there is no assignment on the page, the named string's entry value is used. The entry value is the value held by the string at the end of the previous page. ''first'' is the default value.
<li>''start'': the value of the first assignment on the page is used if the element begins the page or the named string has not been assigned a value. Otherwise, the named string's entry value is used.
<li>''last'': the named string's exit value is used
<li>''first-except'': similar to ''first'', 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 'display: none' 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(text) }
</pre>
</div>
<div class="example">
<p>Given this CSS code:
<pre>
h2 { string-set: header content() }
</pre>
<p>The value of the "header" string
<table class=string-set-example>
<tr>
<td>page#<td>HTML code<td>first<td>start<td>last<td>first-except
<tr>
<td>1
<td>
<pre>&lt;h1>Continents&lt;/h1>
...
&lt;h2>Africa&lt;/h2>
...
...
</pre>
<td>Africa
<td>Africa
<td>Africa
<td>
<tr>
<td>2
<td>
<pre>...
&lt;h2>Americas&lt;/h2>
...
&lt;h2>Asia&lt;/h2>
...
</pre>
<td>Americas
<td>Africa
<td>Asia
<td>
<tr>
<td>3
<td>
<pre>...
...
...
...
</pre>
<td>Asia
<td>Asia
<td>Asia
<td>Asia
<tr>
<td>4
<td>
<pre>&lt;h2>Europe&lt;/h2>
...
&lt;h2>Oceania&lt;/h2>
..
</pre>
<td>Europe
<td>Europe
<td>Oceania
<td>
</table>
</div>
<div class="example">
<p>In this example, the term that is being described at the start of the page is shown in the top left header.
<pre>
@page { @top-left { content: string(term, start) }}
dt { string-set: term content() }
</pre>
</div>
<div class="example">
<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(text) }
</pre>
</div>
<div class="example">
<p>In this example, the header in the top center will be blank on pages where 'h1' elements appear. On other pages, the string of the previous 'h1' 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 'string()' value has not been
assigned a value, the empty string is used.
<h3>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 <em>running elements</em>. To
support running elements, a new value &ndash; running() &ndash; is
introduced on the 'position' 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
'display: none' 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 ''element()'' 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>
<!--
<div class="example remove">
<p>In this example, the element is copied into the running header but it also keeps its normal place.
<pre>
title { position: running(header), normal }
@page { @top-center {
content: element(header) }
}
</pre>
</div>
-->
<p>Like the ''string()'' value, the ''element()'' value accepts an
optional second argument:
<dl>
<dt>''start''
<dt>''first''
<dt>''last''
<dt>''first-except''
</dl>
<p>The keywords have the same meaning as for the ''string()'' value,
and the place of the assignments are the same.
<p>The ''element()'' 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>
&lt;style>
div.header { display: none }
@media print {
div.header {
display: block;
position: running(header);
}
@page { @top-center { content: element(header, first-except) }}
&lt;/style>
...
&lt;div class="header">Introduction&lt;/div>
&lt;h1 class="chapter">An introduction&lt;/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>
...
&lt;style>
@page { @top-center {
content: element(header, first) }}
.header { position: running(header) }
.once { font-weight: bold }
&lt;/style>
...
&lt;div class="header">Not now&lt;/div>
&lt;p>Da di ha di da di ...
&lt;span class="header once">NOW!&lt;/span>
&lt;span class="header">Not now&lt;/span>
... da di ha di hum.&lt;/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 o 7E54 n the same page as the first is not used because the
''first'' 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>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
''leader()'' value on the 'content' 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(&lt;string&gt;)
</ul>
<p>Using the keyword values is equivalent to setting a string value.
The table below shows the equivalents:
<table class=border>
<tr><th>Keyword<th>String<th>Unicode characters
<tr><td>leader(dotted)<td>leader('. ')<td>\002E \0020
<tr><td>leader(solid)<td>leader('_')<td>\005F
<tr><td>leader(space)<td>leader(' ')<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 'content' property only takes one
''leader()'' 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 the leader string 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, 'letter-spacing', white-space properties,
background properties, and 'color'.
<div class=remove>
<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>
</div>
<p>In a more complex example, the 'leader' value is combined with other
values on the 'content' 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>
&lt;style>
.name::after { content: leader(dotted) }
&lt;/style>
&lt;div class="entry">
&lt;span class="name">John Doe&lt;/span>
&lt;span class="number">123456789&lt;/span>
&lt;/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>
&lt;style>
cite::before { content: leader(' ') }
&lt;/style>
&lt;blockquote>
For a moment, nothing happend.
Then, after a second or so,
nothing continued to happen.
&lt;cite>Douglas&nbsp;Adams&lt;/cite>
&lt;/blockquote>
</pre>
<p>Depending on the width of the containing block, this may be rendered as:
<pre>
|For a moment, nothing happend. |
|Then, after a second or so, |
|nothing continued to happen. |
| Douglas Adams|
</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 'text-wrap' is widely supported, this rule can also be used:
<pre>
cite { white-space: nowrap }
</pre>
-->
<p>If the containing block is wider, this may be the resultant presentation:
<pre>
|For a moment, nothing happend. Then, |
|after a second or so, nothing continued |
|to happen. Douglas Adams|
</pre>
</div>
<h2>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>The ''target-counter'' and ''target-counters'' values</h3>
<p>Numerical cross-references are generated by ''target-counter()''
and ''target-counters()'' values that fetch the value of a counter at
the target end of the link. These functions are similar to the
''counter()'' and ''counters()'' functions, except that they fetch
counter values from remote elements. ''target-counter()'' has two
required arguments: the url of the link, and the name of a counter.
''target-counters()'' 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; ''decimal''
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>The ''target-text'' value</h3>
<p>Textual cross-references are generated by ''target-text()'' which
fetches the textual content from the target end of the link. Only text
is copied; not style, structure, or replaced content.
''target-text()'' has one required argument: the url of the link. An
optional second argument specifies exactly which content is fetched.
There are four possible values: <!--''contents'',--> ''content'',
''before'', ''after'', ''first-letter''; these
keywords are defined above.
<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>
&lt;p>See &lt;a href="#chx">this chapter&lt;/a> for an in-depth evaluation.
...
&lt;h2 id="chx">A better way&lt;/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 url), content) '") on page '
target-counter(attr(href url), page);
</pre>
</div>
<h2>Footnotes</h2>
<p>When an element is turned into a footnote, certain 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>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>footnote call</em> in the main text which corresponds to
a <em>footnote marker</em> in the <em>footnote area</em>. 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:
<ul>
<li>one new value on the 'float' property: ''footnote''
<li>one new page area: ''@footnote''
<li>two new pseudo-elements: ''::footnote-call'' and ''::footnote-marker''
<li>one predefined counter: ''footnote''
<li class=remove>one new value on the 'content' property: ''target-pull()''
<li>border segments (see <a href="http://dev.w3.org/csswg/css-backgrounds-4/#border-clip">border-clip</a>)
<li><a href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">super-decimal</a>
<!--<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>
&lt;style>
.footnote { float: footnote }
&lt;/style>
&lt;p>A sentence consists of words. &lt;span class="footnote">Most often.&lt;/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. &#xB9;
&#xB9; Most often.
</pre>
</div>
<div class="example remove">
<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>
&lt;style>
@media print {
.footnote {
float: footnote;
content: target-pull(attr(href url)) }
.call { display: none }
}
&lt;/style>
...
&lt;p>A sentence consists of words&lt;a class="footnote" href="#words"> [3]&lt;/a>.
...
&lt;p id=words>&lt;span class="call">[3]&lt;/span> Most often.
</pre>
<p class=issue>define ''target-pull''
<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&#xB9;.
&#xB9; Most often.
</pre>
</div>
<div class=example>
Consider this markup:
<pre>
&lt;p>Sorry, &lt;span title="This is, of course, a lie.">we're closing for lunch&lt;/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>Turning elements into footnotes</h3>
<p>An element with ''float: footnote'' (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>,
View remainder of file in raw view