Footnote · Worked example

Sidenotes — variant 2.

Notes float in the right margin alongside the paragraph that triggers them. The variant-2 implementation handles narrow viewports without collapsing into the body text.

The argument for sidenotes

The bottom-of-page footnote is a print-era compromise11. See Edward R. Tufte, The Visual Display of Quantitative Information(Graphics Press, 1983), and the "Tufte CSS" project for a longer history of sidenote-as-academic-form. — it assumes a fixed-size sheet of paper and the reader's ability to glance down without losing place. The web is not a sheet of paper. The viewport scrolls; the bottom of the page may be anywhere; the reader who follows a footnote often loses the sentence that triggered it. Edward Tufte's books, and the wider tradition of broadside-with-marginalia academic design,22. Eighteenth-century broadside printing — the gloss in the margin alongside the body text — is the direct typographical ancestor of the modern academic sidenote. point at a different solution: notes in the margin, aligned with the line that triggers them.

↑ The two notes above are the technique. On a wide viewport they sit in the right margin; on a narrow viewport they collapse inline.

The markup

<p>
  ... main body sentence ending in a citation
  <span class="sidenote-ref">1</span>
  <span class="sidenote">
    Author, <em>Title</em> (Place: Publisher, Year), pp.
  </span>
  ... continuation of the body paragraph.
</p>

The CSS (wide viewport)

.sidenote {
  float: right;
  clear: right;
  width: 240px;
  margin-right: -260px;
  margin-top: 0.4em;
  font-size: 0.88em;
  line-height: 1.5;
  color: #6a6a6a;
  border-left: 2px solid var(--burgundy);
  padding-left: 0.8em;
}

.sidenote-ref {
  vertical-align: super;
  font-size: 0.7em;
  color: var(--burgundy);
  cursor: pointer;
}

The CSS (narrow viewport — variant 2's contribution)

On a viewport too narrow for a 240-pixel margin (most phones, most tablets in portrait), the variant-1 implementation collapses sidenotes into the body, which produces a confusing mid-sentence interruption. Variant 2 hides them behind the marker and reveals them on tap:

@media (max-width: 720px) {
  .sidenote {
    display: none;
    float: none;
    width: auto;
    margin: 0.6em 0;
    padding: 0.8em;
    background: var(--bg-soft);
    border-left: 3px solid var(--burgundy);
  }
  .sidenote.is-open { display: block; }
  .sidenote-ref {
    text-decoration: underline;
    text-decoration-style: dotted;
  }
}

A small JavaScript handler toggles the is-open class on the next sibling when the marker is tapped. On wide viewports the marker is purely visual and the script is inert.

What it gives you

Notes appear next to the line that cites them on wide screens — the academic ideal.
Notes remain accessible on narrow screens without breaking mid-paragraph reading.
Print fidelity is good: the print stylesheet collapses sidenotes into bottom-of-page footnotes for the printed article.

Trade-offs

Sidenote layouts require committing the right margin to the notes. If you also want a sidebar, a related-links column, or a table of contents in the margin, you have to choose. For academic prose where the citation apparatus is the most important thing in the margin, that is usually the right trade.