E786 csswg-drafts/css3-gcpm/Overview.src.html at bc36ac98bdad4ce3b0e2f45d4333dd69769dbf3f · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
3533 lines (2672 loc) · 91.4 KB

Overview.src.html

File metadata and controls

3533 lines (2672 loc) · 91.4 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>
<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 }
</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>Editor:
<dd>H&aring;kon Wium Lie, Opera Software, howcome@opera.com
</dl>
<!--begin-copyright-->
<p>[If you keep the &lt;!--comment-->, the copyright will be included
here automatically]</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 &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/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"><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>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 contents }
</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>For the 'string-set' 4A9C ; property, &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>contents
<dd>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
<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.
<dt>content-before
<dd>The textual content of the ::before pseudo-element the content of the element.
<dt>content-after
<dd>The textual content of the ::after pseudo-element the content of the element.
<dt>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 ''content-first-letter'' is to create one-letter headers, e.g., in dictionaries.</p>
<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>
</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 ''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 'string-set' property copies text as well as white-space into
the named string.
<div class="example">
<pre>
h2 {
string-set: header "Chapter " counter(header) ": " contents;
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-element;
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 contents;
}
</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) contents }
dt { string-set: index content-first-letter, entry contents }
</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 ''string()'' value. This argument can have one of four keywords:
<ul>
<li>''start'': the named string's entry value for that page is used.
<li>''first'': the value of the first assignment is used. If there is no assignment on the page, the start value is used. ''first'' is the default value.
<li>''last'': the named string's exit value for that page 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 contents }
</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 contents }
</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>
<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 on 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 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, 'letter-spacing', white-space properties,
background properties, and 'color'.
<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 '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>
Bla great bla bla world bla bla
empire bla bla color bla bla
history bla bla forever.
&lt;cite>John Johnson&lt;/cite>
&lt;/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:
< 40FE div class="react-code-text react-code-line-contents" style="min-height:auto">
<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 'text-wrap' 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>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 five possible values: ''contents'', ''content-element'',
''content-before'', ''content-after'', ''content-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), content-element) '") on page '
target-counter(attr(href, url), page);
</pre>
</div>
<h2>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 '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>one new value on the 'content' property: ''target-pull()''
<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>
&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>
<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>,
but they inherit through their normal place in the structure of the
document.
<p>The 'display' property on footnote elements is ignored. Instead,
the value of the 'display' 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>
&#xB9; The first footnote. &#xBA; 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 ''footnote'' counter is automatically
incremented.
<h3>The footnote area</h3>
<p>All elements with ''float: footnote'' 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: 'content', 'border',
'padding', 'margin', 'height', 'width', 'max-height', 'max-width',
'min-height', 'min-width', 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.
-->
View remainder of file in raw view