Scholarship on the Web.

When historians and other academic writers began moving prose onto the web in the late 1990s and through the 2000s, the dominant tools — Word's "Save as HTML", Adobe Acrobat's web export, the early CMS templates — almost uniformly broke the relationship between argument and footnote. The marker would render as plain text. The note itself would either land at the bottom of the page (out of context) or in a separate file (out of reach). Hover behavior didn't exist. Print fidelity was a fight.

The Footnote series is a small set of working pages that address the problem from the CSS-and-markup side rather than the import-tool side. The lead essay sets out what an academic footnote actually has to do, and the worked examples implement specific approaches: superscripted markers styled by CSS, sidenotes in the right margin, and DHTML pop-ups that reveal the note on demand.

The pages have been linked widely in the web-typography and microformats communities (the microformats wiki and discuss list, MetaFilter's Ask threads on citation, the early CSS-creator forums) and from academic resource pages and citation-style guides.

Pages in this series

Scholarship on the Web — the endnotes essay. The lead essay. Why citation apparatus matters for academic prose on the web, and what the practical options are.

Worked example — superscripted CSS markers. The simplest case. Markers rendered with CSS, notes at the bottom of the page with same-page anchor links.

Worked example — sidenote (variant 2). Notes float in the right margin alongside the paragraph that triggers them. Variant 2 handles narrow viewports.

Worked example — DHTML pop-up footnotes. Note text revealed on hover via DHTML. Useful for high-density academic prose; documented accessibility limitations.