[whatwg] Footnotes, endnotes, sidenotes

[Michel Fortin]

Le 31 oct. 2006 à 11:53, Håkon Wium Lie a écrit :

> I agree. W3C recently published a proposal on how to achieve
> footnote/endnote presentations using the same markup [1]. The proposal
> is quite simple. Given this markup:
>
>   <div class=note>..</div>
>
> you would achieve footnoes with:
>
>   .note { position: footnote }
>
> ane endnotes with:
>
>   .note { position: endnote }
>
> Comments welcome.

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.


Potential issues:

*  Can <fnl> and <fn> be styled as an numbered list in Internet
    Explorer (list-style-type: decimal)? I can't test that right now.

*  The name "footnote" refers to a specific presentation style, so
    it may be a good idea to change that name; how about "annotation"?
    On the other side, maybe we could keep "footnote" while mentioning
    in the spec that this element may be styled differently than a
    footnote, as sidenote for instance.

*  I don't like the name <fnl>, maybe someone will have a better idea.


Michel Fortin
michel.fortin at michelf.com
http://www.michelf.com/