8000 csswg-drafts/css-gcpm/2009-06-10.src.html at 59e3c0f51449a99b539f64d86eba799163b7cd2a · xfq/csswg-drafts · GitHub
Skip to content

2009-06-10.src.html

Latest commit

 

History

History
executable file
·
4384 lines (3295 loc) · 121 KB

2009-06-10.src.html

File metadata and controls

executable file
·
4384 lines (3295 loc) · 121 KB
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