footnotes-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
Line 95: Line 95:
=== Publications that discuss footnoting/endnoting on the web===
=== Publications that discuss footnoting/endnoting on the web===


* [http://www.piggin.net/footnoteprint.htm Macro-Typography of Footnotes]
* [http://daringfireball.net/2005/07/footnotes "About the Footnotes,"]''Daring Fireball'' by John Gruber
* [http://archiva.net/footnote/ Scholarship on the Web: Managing Footnotes & Presenting Footnotes & Endnotes]
* [http://blog.fawny.org/2005/07/24/footnote/ "There is No Such Thing as a Footnote,"] ''Fawny'' by Joe Clark
* [http://daringfireball.net/2005/08/notes_on_notes "Notes on Notes,"] ''Daring Fireball'' by John Gruber
* [http://www.piggin.net/footnoteprint.htm "Macro-Typography of Footnotes,"] by Jean-Baptiste Piggin.
* [http://archiva.net/footnote/ Scholarship on the Web: Managing Footnotes & Presenting Footnotes & Endnotes] by Paula Petrik


== See Also ==
== See Also ==

Revision as of 20:29, 11 March 2007

Footnotes Examples

Per the microformats process this is an examples page documenting existing real world examples of footnotes and endnotes published on the Web.

The Problem

How should footnotes and endnotes be marked up?

Participants

Real-World Examples

Weblogs

<div class="footnotes">

  <hr />
   
    <ol>

    ...

     <li id="fn2-2007-03-04">
     <p>It took me six weeks to choose the exact shade of Daring Fireball’s 
     background color, <code>#4a525a</code>. 
     <a href="#fnr2-2007-03-04"  class="footnoteBackLink"  title="Jump back to footnote 2 in the text.">↩</a>
     </p>
     </li>

     ...

    </ol>

</div>

Essays/Tutorials

<div id="footnotes">

  ...
  
  <p><a href="#fn2ref" class="note">2</a><a name="fn2text" id="fn2text"></a>
E. Landells, <em>The Boys’ Own Toymaker: A Practical Illustrated Guide 
to the Useful Employment of Leisure Hours</em> (London: Griffith and Farran, 
1860), vii.</p>

  ...

</div>
<div id="footnotes">
  ...

  <p><sup><a href="#fn3ref" class="note">3</a></sup><a name="fn3text" id="fn3text"></a>
Paula Petrik, “The Paraphernalia of Childhood: Advice on Toys” from 
“Playthings for the Republic’s Children: American Culture, Toys, and the 
Business of Play,” unpublished manuscript.</p>

  ...

</div>
  • Formatting Footnotes with JavaScript and CSS is a technique by Timothy Groves that displays footnotes inline with text, then hides/displays the note content with JavasCript. Groves uses the following markup structure:
    • This technique is problematic from a microformats perspective for several reasons: numbers are not used, each note does not have a unique ID, and its difficult or impossible to tell the difference between an annotation and the rest of the text without JavaScript and/or CSS. (Jeremy Boggs)
   <p>Lorem ipsum dolor sit amet...<span class="footnote">This is a footnote.</span>...</p>


Existing Practices

Common Patterns Discovered

  • Use of "footnotes" as a class or ID attribute value for differentiating footnote content from the body of the publication.

Publications that discuss footnoting/endnoting on the web

See Also