Kenneth Friedman
Putting things aside.

I love marginal notes. Marginal notes can also be referred to as side notes, marginalia, apostils, or glosses. If you aren't sure what they are: you're reading one now.

Like footnotes and endnotes, marginal notes can be used to add comments and references that helpful but not critical.

Marginal notes have the distinct advantage of not requiring the reader to leave their current position in the text. A reader can simply glance to the side to read a marginal note, and then glance back to the text they were reading. If an author wants to make a note, the reader shouldn't have to flip to end of the book to see the comment. If there's a side comment to be made, it should be on the side, literally.

For some reason, writing tools have not caught on to the advantage of marginal notes. There is no native support for marginal notes in Word or Pages. You can't add marginal notes in an email or Medium piece. And don't even try to have marginal notes on your next think piece on Medium.com

Somehow we now all have the most powerful tool of all time — a tool that can compute anything computable — and yet we don't have the abililty to easily create layouts that Edgar Allan Poe was using in the 1800s and monks were using in 1000 AD.

Marginal Note CSS

In 2005, Gruber bemoaned the fact that footnotes in HTML were tricky. In 2019, they still are.

Surprisingly, there are not many guides to enabling marginal notes with a clean implementation. The most popular method is likely to use Tufte CSS. But that comes with tons of other features that attempt to replicate the style of Edward Tufte's books. I'm only interested in the marginal notes part. I also want the implementation to only require HTML and CSS. No Javascript should be necessary.

HTML5 brought us the <aside> tag, although comically does not (by default) put the content aside.

We can fix this with CSS, which is effectivelyWith one small exception: instead of using the more semantically correct <aside> tag, I I actually use a <span class="aside"> tag. It allows me to have slightly more control over the layout, which I discuss in the next section. how this site implements marginal notes as well.

There are just three steps to implement marginal notes:

  1. Restrict the width of the body text, to allow space on the side for marginal notes
  2. Put the marginal notes in a special tag, such as <aside> tag.
  3. Add the CSS to push the <aside> tag content outside of the body text.

I'll detail how this website implements these three steps, although there many ways to do it that should work.

1. Restricting the Width of Body Text

I keep the body text of my articles within a <main> tag, and then I put a 20% width margin on the right side, like so:

main {
  margin-right: 20%;
}

2. Marginal Notes In a Special Tag

The second step is to place all marginal notes in a special tag.

The easiest, and semantically correct, tag to use is the <aside> tag. For example:

<p>This sentence is body text.</p>
<aside>And this is the marginal note.</aside>
<p>This is another part of body text.</p>
produces the following:

This sentence is body text.

This is another part of body text.

While this is the easiest way to do it, the <aside> tag has a strange limitation. The <aside> tag, if placed within a paragraph, will split the paragraph into two parts. Therefore, if you want a marginal note that is verticallyNotice how this marginal note is spaced within the paragraph? spaced within a paragraph, you need to use a span element. This is how my site (the one you are currently reading) works. It's not quite as elegant, but it enables a marginal note like the one you see in the middle of this paragraph.

The following code snippet shows how to use a <span> tag to enable to enable the marginal note, instead of aside. To make it understandble to anyone reading the raw HTML, I name the CSS class aside. However, the name of that class could be anything, so long as it matches the name of the CSS in the next step.

<p>This sentence is body text,
<span class='aside'>This is the marginal note within the paragraph.</span>
and this is the remainder of the body text.</p>
This produces the following:

This sentence is body text, And this is the marginal note. and this is the remainder of the body text.

3. CSS To Push Content Aside

The final (necessary) step is to add the CSS to push the marginal note into the margin. Without it, the marginal note will either cut the body text into parts (if you use the <aside> tag) or it will not look different than the rest of the body text (if you use the <span> tag).

The following CSS will work regardless of whether you use the <aside> tag or a <span> tag with the class name aside. If you consistenly only use one, some of the lines of the CSS are not necessary, but shouldn't hurt.

aside, .aside {
 display: inline;
 float: right;
 position: relative;
 width: 20vw;
 margin-right: -22vw;
 font-size: 16px;
}

Here is that snippet again, with what each line does:

aside, .aside { /* works for "aside" tag and class name "aside" */
 display: inline; /* prevents parent paragraph from breaking */
 float: right; /* positions the note to the right of the content */
 position: relative; /* forces note to be relative its the normal position */
 width: 20vw; /* limits the width of the marginal note */
 margin-right: -22vw; /* sets the distance away from the body text */
 font-size: 16px; /* makes font slightly smaller */
}

4. Marginal Notes on Mobile (Optional)

This is an optional step, but one I strongly recommend: ensuring marginal notes look good on mobile layouts.

Phone screens are too small to have two columns of text. So marginal notes need to be moved "in line" with the body text.

It's still possible to do this without using any JavaScript, simply by using CSS queries.

Here's a video of a responsive marginal note in action:

This site adds the following CSS, to keep marginal notes in-line, but visually distinct by changing the font color, changing the font size, and indenting marginal notes on the left and right.

@media (max-width: 768px) {
  aside, .aside {
    display: block;
    float: none;
    margin: 5% 10% 5% 10%;
    width: 80%;
    font-size: 15px;
  }
}
And once again, here's the commented version of that CSS snippet.
@media (max-width: 768px) { /* applies when screen width is under 768 */
 aside, .aside { /* works for "aside" tag and class name "aside" */
  display: block; /* forces parent paragraph to break */
  float: none; /* stops content from floating */
  margin: 5% 10% 5% 10%; /* adds indentation on all sides */
  width: 80%; /* forces width of the marginal note */
  font-size: 15px; /* makes font slightly smaller */
 }
}

Bringing it all Back Home

This guide showed the three steps needed to get beautiful marginal notes on websites, along with an optional step to make the marginal notes responsive (without the need for JS).

If you want a fully working example, you can either copy paste the example below, or download an HTML file that only contains a working, responsive, marginal note article.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>KF: Marginal Note Example</title>
  <style>
   main {
    max-width: 500px; /*provides maximum, in case screen is huge*/
    width: 60%;   /*keeps body text width resonable*/
    margin: 0 auto;  /*centers main on page*/
   }
   
   /*Marginal Notes on Desktop*/
   aside, .aside {
    display: inline;
    float: right;
    position: relative;
    width: 20vw;
    margin-right: -24vw;
    font-size: 16px;
    color:red;
   }
   
   /*Marginal Notes on mobile*/
   @media (max-width: 768px) {
    aside, .aside {
     display: block;
     float: none;
     margin: 5% 10% 5% 10%;
     width: 80%;
     font-size: 15px;
     color:red;
    }
   }
  </style>
 </head>
 <body>
  <main>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et sodales neque. Suspendisse rhoncus ut risus sit amet malesuada. Proin eu tincidunt ex, eu efficitur mauris. Nam sollicitudin finibus mi. Phasellus auctor mattis diam, non pulvinar sem egestas at. Pellentesque ultricies mi eu mi ultrices, at semper nibh lobortis. Pellentesque eros purus, euismod viverra metus vitae, laoreet vehicula risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae maximus orci. Nulla vitae laoreet elit. Fusce at turpis tincidunt, scelerisque justo non, tristique enim.</p>
   <p>Maecenas faucibus sed justo eget fringilla. Nullam feugiat laoreet felis id convallis. <span class="aside">This is a marginal note using a <em>span</em> tag</span> Curabitur accumsan pulvinar magna ut egestas. Aenean sed purus fringilla purus dapibus pharetra sit amet quis dolor. Aenean vitae elit ante. Cras fermentum nulla a imperdiet efficitur. Fusce dignissim risus nulla, sit amet hendrerit libero ultricies eleifend.</p>
   <p>Morbi sed condimentum arcu. Duis eros tellus, elementum et leo facilisis, facilisis finibus lorem. Suspendisse suscipit ultrices sollicitudin. Nulla gravida eget nulla ut bibendum. Donec faucibus congue ante nec sollicitudin. Fusce a maximus urna. Etiam eu viverra nibh. Suspendisse molestie enim ex, nec pulvinar sapien rutrum sed. Curabitur eu mattis libero. In sed efficitur elit, congue placerat sapien. Proin fringilla est at erat tempus, ac commodo leo ullamcorper. Nunc nec ante viverra, euismod nulla ac, ultrices est. Pellentesque vel finibus massa, at tincidunt ligula. Vivamus in metus a diam consequat aliquam.</p>
   <p>Suspendisse varius consequat ullamcorper. Vivamus neque urna, dapibus vel placerat at, pretium non odio. <aside>This is a marginal note using the semantic <em>aside</em> tag.</aside>Proin molestie porta malesuada. Duis tristique luctus lacus ut rutrum. Sed lacus elit, lacinia imperdiet iaculis vel, viverra sed dolor. Integer tempus augue hendrerit condimentum egestas. Ut aliquam varius rutrum. Curabitur tempus enim ut libero vehicula, non rutrum justo ornare. Cras nisl nibh, suscipit convallis nulla non, egestas laoreet justo. Sed fringilla ligula eu elit luctus, non eleifend magna placerat.</p>
   <p>Demo of Marginal Notes by <a href="http://kennethfriedman.org">Kenneth Friedman</a>.</p>
  </main>
 </body>
</html>