8000 csswg-drafts/css3-gcpm/2009-06-10.src.html at 4a44c274823ec573e08533000a15fc671ee029ce · w3c/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
<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. Unlike 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