8000 csswg-drafts/css3-gcpm/2009-06-10.src.html at d5b62624f161d94b48ad4efe28d98b736fc519e9 · simonwuelker/csswg-drafts · GitHub
Skip to content

2009-06-10.src.html

Latest commit

 

History

History
4384 lines (3295 loc) · 121 KB

2009-06-10.src.html

File metadata and controls

4384 lines (3295 loc) · 121 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS3 module: Generated Content for Paged Media</title>
/*
http://lists.w3.org/Archives/Public/www-style/2009Mar/0065.html
- RESOLVED: New syntax is image-resolution: normal | [ <dpi> || auto ]
RATIONALE: Removes unused combinations and unnecessary comma
- RESOLVED: Replace image-resolution: auto; with image-resolution: from-image;
RATIONALE: 'auto' vs. 'normal' is hard to understand. ('normal' is 1 pixel == 1px)
- RESOLVED: URLs inside functional notation where URL is expected should be able
to take either url() or bare strings (like @import), preference for
examples is bare strings.
- Discussed removing 'background-image-resolution' in favor of various options.
So far idea is that 'image-resolution' applies to all images and we will
introduce functional notation in the future to allow setting resolution on a
per-image basis.
http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html
targets in pdf documents?
aligning lines vertically?
Another approach would be to extend the height of the block to be a
multiple of the grid height, but then people would probably want to
control where the extra space gets added.
should we deprecate @page {} in favor of @media .. { ?
*/
<link href="../default.css" rel="stylesheet" type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" rel=stylesheet type="text/css">
<style type="text/css">
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
.cols p { padding: 3px; margin: 0 }
.col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
.gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0; }
.rep { position: absolute; top: 45px; background: #333; height: 110px; width: 100px; color: white; z-index: 4 }
div.example:before { width: 9em !important }
div.example { padding-top: 0.5em }
table.hyphenate { border-collapse: collapse }
table.hyphenate th {
text-align: left; white-space: nowrap; border: 1px solid black; padding: 0.2em }
table.hyphenate td {
border: 1px solid black; padding: 0.2em 0.2em 0.2em 1em; font-size: 0.8em }
table.border, table.border td, table.border th, table.border table {
border-collapse: collapse;
border: thin solid black;
padding: 0.2em;
vertical-align: top;
}
table.border td + td { white-space: pre }
table.border table { padding: 0; border-collapse: separate; border: none; }
table.border table td { border: thin dotted black; padding: 0.2em; margin: 0.2em }
table.border .comment { margin-top: 0; white-space: normal; font-style: italic }
div.out { background: #F55; padding: 0.2em 0.5em }
div.out div.example { background: #FED }
h1, h2, h3, h4, h5, h6 { background: transparent }
</style>
<body>
<div class="head">
<!--logo-->
<h1>CSS3 module: Generated Content for Paged Media</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]/ED-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/2007/WD-css3-gcpm-20070205">
http://www.w3.org/TR/2007/WD-css3-gcpm-20070205</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. This specification only applies to the
'print' media type.
<h2 class="no-num no-toc">Status of this document</h2>
<!--begin-status-->
<p>[If you keep the &lt;!--comment-->, the status boilerplate will be
included here automatically.]</p>
<!--end-status-->
<p>This WD describes functionality at various levels of maturity. Some
features have been part of other WDs in the past and have already been
implemented. These parts are fairly stable and unlikely to change
much. Other features are still at the sketching stage. In general,
features presented earlier in this draft are more mature that those
presented later in the draft.
<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 id=dependencies>Dependencies on other modules</h2>
<p>This CSS3 module has normative references to the following other CSS3
modules:</p>
<ul>
<li>[[!CSS3LIST]]</li>
<li>[[!CSS3VAL]]</li>
</ul>
<p>This CSS3 module has non-normative references to the following other CSS3
modules:</p>
<ul>
<li>[[CSS3COL]]</li>
<li>[[CSS3PAGE]]</li>
<li>[[CSS3MULTICOL]]</li>
</ul>
<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., hyphenation,
the new list style types, and border segments) may also
used with other media types. However, this specification is only
concerned with the 'print' media type.
<h2>Running headers and footers</h2>
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
describes <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.
<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() }
</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' 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>&lt;content&gt;
<dd>the ''content()'' function returns the content of elements and pseudo-elements. The functional notation accepts an optional argument:
<dl>
<dt>''content()''
<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>''content(before)''
<dd>The function returns the textual content of the ::before pseudo-element the content of the element.
<dt>''content(after)''
<dd>The function returns the textual content of the ::after pseudo-element the content of the element.
<dt>''content(first-letter)''
<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 ''content(first-letter)'' is to create one-letter headers, e.g., in dictionaries.</p>
</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) ": " 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 this example, H1 elements are not displayed, but their content is copied into the named string.
<pre>
h1 {
display: none;
string-set: header content();
}
</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 content(first-letter), entry content() }
</pre>
< 133E div>
</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>
<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 '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.
<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 one value which describes the glyph pattern that make 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 class=issue>Can leaders also be composed of images or SVG?
<!--
<p class="issue">Some fonts may not have suitable glyphs for all
patterns. For example, in some Eastern languages, the alignment of the
shape within the glyph may not be optimal for creating leaders.
-->
<!--<p class="issue">Are the keywords really necessary?</p>-->
<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>User Agents should attempt to align corresponding glyphs from the
leader pattern between consecutive lines.
<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:
<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 four possible values:
<dl>
<dt>''content()''
<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>''content(before)''
<dd>refers to the content of the element's ::before pseudo-element. This is the default value.
< 8D6C div>
<dt>''content(after)''
<dd>refers to the content of the element's ::after pseudo-element
<dt>''content(first-letter)''
<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>
&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()) '") 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 class=out>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>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>For each new footnote element, the ''footnote'' counter is automatically
incremented.
<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 class="issue">There has been a number of proposals on how to achieve this, including ''position: footnote'', ''flow: footnote'', and ''display: footnote''. The current thinking is that 'float' is suitable as the content still takes up space.
-->
<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 using page floats (as described
below) and 'position: fixed'.
<div class="example">
<pre>
@page {
@footnote {
float: bottom page;
width: 100%;
}
}
</pre>
</div>
<!--<p>An element with 'float: footnote' inherits from its parent, not from @footnote.-->
<!--
<p>The footnote area does not have to be placed at the bottom of the
page. It can be moved to anywhere on the page using the 'float' property or
''position: fixed''.
-->
<div class="example">
<p>These rules place the footnote area on the left side of the page:
<pre>
@page {
@footnote {
position: fixed;
top: 10em;
left: 3em;
width: 5em;
}
}
</pre>
</div>
<div class="example issue">
<p>How do we place the footnote area in a certain column? Perhaps:
<pre>
@page {
@footnote {
float: bottom left multicol;
width: 1gr;
}
}
</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.
-->
<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-length: 4em; /* border-parts: 4em */
padding-top: 0.5em;
}
</pre>
<p>The result of this code is that a footnote area will have
some margin above the border. Unl 6FDB ike normal borders, only part of the
border is visible due to the 'border-length' property. Underneath the
border, there will be padding.
</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>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.
<!--
<div class="example">
The content and style of the footnote-call is set on the
''footnote-call'' pseudo-element.
</div>
-->
<!--
<p class="issue">Should any white space characters between the
note-call and and the preceding content be removed?
-->
<!--
<div class="example">
The goal is to achieve this result:
<pre>
... some notion¹
</pre>
<p>rather than this:
<pre>
... some notion ¹
</pre>
</div>
-->
<h3>Footnote markers</h3>
<p>A ::footnote-marker pseudo-element is added to each footnote
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>
View remainder of file in raw view