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 effectively^††With 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:

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:

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.

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.

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

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.

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.