Up: My web site

My web site has sidenotes. This paragraph¹¹1 This is a sidenote (or footnote) that is long just for sake of being long — lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua and all that — taking up space so that the sidenote below it gets pushed down.  has two examples.²²2 Here is a sidenote/footnote example that got pushed down. 

Here is a paragraph “The film Mulholland Drive is good:”³³3 A very uninspired piece of writing on my part, but it helps for demonstration purposes. 

<p>The film Mulholland Drive<sup id="fnref:cite1"><a href="#fn:cite1" class="footnote" rel="footnote" role="doc-noteref">1</a></sup><span class="sidenote"><span class="sidenote-ref display-none" aria-hidden="true"><sup id="fnref:cite1">1</sup></span><span class="sidenote-def display-none" aria-hidden="true"><span class="sidenote-def-num">1</span> <i>Mulholland Dr.</i>, written and directed by David Lynch (Les Films Alain Sarde, Asymmetrical Productions, Babbo Inc.,&nbsp;2001).&nbsp;</span></span> is good.</p>

There a two parts to this.

First, there is the footnote reference, which will only be shown on small screens:

<sup id="fnref:cite1">
  <a href="#fn:cite1" class="footnote" rel="footnote" role="doc-noteref">1</a>
</sup>

Second, there is the sidenote, which will be shown on wide screens:

<span class="sidenote">
  <span class="sidenote-ref" aria-hidden="true">
    <sup id="fnref:cite1">1</sup>
  </span>

  <span class="sidenote-def" aria-hidden="true">
    <span class="sidenote-def-num">1</span>
    [SNIP]
  </span>
</span>

The sidenote consists of a sidenote-ref, which is the number you see in the main text body, and a sidenote-def, which appears in the sidebar.

Additionally, there is the list of footnotes at the end:

<div class="footnotes" role="doc-endnotes"><hr>
  <ol>
    <li id="fn:cite1">
      <p>[SNIP]&nbsp;<a href="#fnref:cite1" class="reversefootnote" role="doc-backlink">↩︎</a></p>
    </li>
  </ol>
</div>

To do: Describe the ARIA setup of this.

Styling sidenotes

Sidenotes have a fixed width, and are floated to the right:

.sidenote-def {
  width: 14rem;

  float: right;

Additionally, the sidenote is moved out of the main content body with a negative right margin:⁴⁴4 The use of calc() isn’t strictly needed here, but if I had used -16rem here, it wouldn’t have been as obvious that this is the width of the sidenote plus the width of the gap. 

  margin-right: calc(-14rem - 2rem);

Sidenotes are forced, with clear, below other floating elements (i.e. other sidenotes, primarily):

  clear: both;

  margin-bottom: 1.5rem;
}

Switching between sidenotes and footnotes

On large screens, footnote references and the list of footnotes (at the bottom of the page) are hidden:

@media screen and (min-width: 920px) {
  .footnotes,
  sup:has([role~="doc-noteref"]) {
    display: none;
  }
}

Sidenotes (both the reference in the main body with the sidenote-ref class and the definitions in the sidebar with the sidenote-def class) are not shown by default, but only visible on larger screens:

.sidenote-def,
.sidenote-ref {
  display: none;
}

@media screen and (min-width: 920px) {
  .sidenote-def,
  .sidenote-ref {
    display: inline;
  }
}

Credits

Thanks to Roma Komarov, whose help with sidenotes has been invaluable.