[whatwg] Footnotes, end notes, side notes

Michel Fortin michel.fortin at michelf.com
Tue Apr 22 06:17:48 PDT 2008

Le 2008-04-21 à 8:19, Ian Hickson a écrit :
> On Tue, 31 Oct 2006, Michel Fortin wrote:
>> Interesting. If I understand well, this CSS proposal would allow a  
>> note
>> inserted in the middle of a paragraph to become a footnote. For  
>> instance
>> this:
>>    <p>This paragraph has a footnote<footnote>This is a footnote</
>>    footnote>.</p>
>> could be presented like this (where 1 is presumably superscript and
>> linked to the footnote):
>>    This paragraph has a footnote1.
>>    ______________
>>    1.  This is a footnote.
>> That'd very interesting. But the markup is poor for backward
>> compatibility and makes it difficult to include more than one  
>> paragraph
>> in a note. So I'm going to propose an improvement to this markup.
>> (For the next example: <fn> = footnote; <fnref> = footnote  
>> reference.)
>> What is needed to solve the backward compatibility problem is a  
>> second
>> way of indirection, so that the footnote can be placed elsewhere.  
>> This
>> is the first piece of the puzzle:
>>    <p>This paragraph has a footnote<fnref for="my-footnote"></ 
>> fnref>.</p>
>>    <fn id="my-footnote">
>>      <p>This footnote can contain block-level elements!</p>
>>    </fn>
>> In this example, a reference to the footnote is found in the  
>> paragraph,
>> and the footnote content is elsewhere in the document. The browser  
>> would
>> be in charge of numbering the marker correctly (or not, if the
>> stylesheet says so) and to put the referenced footnote in a list with
>> the other footnotes in the order they are reference.
>> Notice the empty content of <fnref>? That's substitution content for
>> backward compatibility: if you put a link to the footnote within the
>> <fnref> element, when displaying things as footnote the actual  
>> content
>> is substituted by the marker, but footnote-unaware browsers will show
>> the link. In the previous case, the fallback content for the  
>> reference
>> marker could have been:
>>    <sup><a href="#my-footnote">1</a></sup>
>> Since footnotes are referenced and reordered, you're free to place  
>> them
>> wherever you want. If you care about backward compatibility, you  
>> should
>> put them all together at the end of your article and there you have  
>> your
>> list of footnotes. Footnotes without reference are considered to be
>> referenced from where they are in the source. Or if you want them  
>> to be
>> styled as sidenotes, just put the notes before or after the paragraph
>> they relate to in the source, or even inline inside paragraphs  
>> (although
>> inline footnotes should be restricted to inline content), and hide  
>> the
>> marker.
>> The last piece of the backward compatibility puzzle is the <fnl>
>> (footnote list) element. This element is optional, but if present,
>> preceding footnotes inside the same sectioning element will be  
>> relocated
>> inside this element. <fnl> would be styled as an ordered list, and  
>> its
>> list items would be footnote elements (<fn>).
>>    <p>This paragraph has a footnote<fnref for="my-footnote"
>>> <sup><a href="#my-footnote">1</a></sup></fnref>.</p>
>>    <fnl>
>>    <fn id="my-footnote">
>>      <p>This footnote can contain block-level elements!</p>
>>    </fn>
>>    </fnl>
>> I suggest that footnotes be relocated at the end of the first  
>> <article>
>> element, or to the first <fnl> element following them in the  
>> source. It
>> goes without saying that footnotes already inside <fnl> stay where  
>> they
>> are, although they should be reordered in the order they are  
>> referred to
>> in the text.
> At this point, why not simplify the markup and remove the <fnref>? And
> turn the <fnl> and <fn> into a <section> and some <div>s or  
> something and
> you have backwards compatible markup that already does everything we  
> need
> without sacrificing any of the stylability...

The idea of relocating the content is that one may specify in some  
form from a stylesheet how the notes should be rendered -- sidenotes,  
footnotes, endnotes would all use the same markup with a different  
style. (By "relocating" I mean it should appear somewhere else in the  
rendering three, not moved to another element in the DOM by the way.)

The reason I came with this somewhat complex proposal is to satisfy  
the following cases which cannot be completely fulfilled with current  

1.  Permitting notes as actual footnotes (not endnotes) for paged media:
     given some styling, the browser relocates footnotes at the end of  
2.  Permitting notes with any content -- paragraphs, lists, code blocks
     (<pre><code>), etc. -- to degrade gracefully as endnotes, or  
     (given proper styling and placement in the source), in current  
3.  Permitting footnotes to be placed near the context they're  
     from when you don't care about backward compatibility (easier  
4.  Permitting footnotes to be rendered incrementally on paged media  
     the content is defined before the marker (or almost-incremental  
if the
     content of a footnote immediately follows the paragraph with its  

That said, I certainly acknowledge the argument that the feature may  
not be compelling enough for implementors to bother with a proposal of  
this complexity, and it is possible this proposal is just a little too  
complex for authors to use it without the help of some footnote markup  
generator tool (diminishing the value of point 3 above). So perhaps it  
should indeed be left out, even if the current state of affairs  
doesn't address the above points.

Michel Fortin
michel.fortin at michelf.com

More information about the whatwg mailing list