screenshot of top section of web book with modal note open

how HTML and JavaScript make footnotes obsolete

God, I hate footnotes! I confess I tend to ignore them. And they’re important. But by the time I get to the part of the page where they are, half the time I’ve forgotten which one I was supposed to look at and have to go back up and find my place again.

The difficulty and time spent finding where you left off depends on the distance your eyes have to travel both ways. Then you have to use cognitive effort to put the new information in context with what you were reading. And each of these activities takes time and thought away from the thoughts you were having about what you were reading.

And they’re totally unnecessary. In a digital publication, why does distance even factor in? A footnote or an end note in a digital document is the vestigial tail of publishing. They are made necessary in printed form due to the physical limitations of paper.

But the inconvenience and disruption they cause make it necessary to do away with them in a digital document. They should not take you away from what you’re reading or make you waste time.

In Emma Goldman’s book, Anarchism and Other Essays, I did the footnotes like this:

screenshot of modal code in HTML document
the code for the modal and its clickable anchor

And that code makes this happen:

screenshot of top section of web book showing modal link
the green number indicates element user clicks to open the modal note
screenshot of top section of web book with modal note open
the note opens in a box with a black transparent overlay over the rest of the page

So they’re not footnotes anymore — they’re just non-pain-in-the-ass popup notes that overlay the text.

I only had to write the code once, copy/paste it, and change the ID names and text content for each one. Since that’s all it takes to save the reader a headache every time they want the information from the notes, this is going to be my standard. Now I need to make a style guide to keep my formatting consistent.

This text made me have to decide on a threshold for when a passage is too long for a blockquote and needs to be in the monologue format I used for parts of Frankenstein.

Blockquotes are for long quotations, but may not be so appropriate in HTML for monologues or anything longer than two or three paragraphs. I cut it off at two in Goldman’s book. But this makes a difference not just in the font, but in the margins:

screenshot depicting blockquote styling
blockquote has wider margins and is displayed in the default text font
screenshot depicting monologue styling for long passages of dialogue or citations
the monologue format is in a serif font and has narrower margins

Traditionally, quotation marks are used at the start of each paragraph of monologue to indicate exceptionally long quotes. But that’s kind of like looking for a needle in a haystack, and it’s distracting to look for punctuation when you’re reading.

What I’m trying to do is to give the reader visual cues that are not distracting to their reading experience but just obvious enough to make that distinction unconsciously and just think about what they’re reading. I don’t know if it’s clear to someone else without reading the editor’s note.

They clearly need work to bring the styling together, so that’s on the slate for the next part of today.

One more major thing I did with this one, because of a storage problem, was to make this entire book in one HTML document instead of a separate document for each chapter and linked together. So another visual cue I added was a darker gray background on alternating chapters.

Because we’re used to seeing subheadings in long articles online, I thought it might help reinforce the idea that these are standalone pieces. It’s easier to see when you’re scrolling back and forth when you’ve gone from one essay into another.

screenshot depicting difference in background colors in alternating chapter containers

And the menu button remains at the top now, rather than scrolling with the page. Otherwise, it would be difficult to navigate this behemoth. You should see it in a code editor. It’s 2117 lines long, but to be fair, that includes line breaks and comments I added to help myself navigate it. Along with anyone else who wants to use the code, as it’s under a Creative Commons share-alike license.

I need to do a textbook, journal, or critical analysis. Something with some meaty end notes that gives me a UX formatting problem to solve. But first I still need to add a photo of Emma Goldman because I forgot. And I have many, many illustrations to catch up on for the NFT versions of the FTs I’ve been sending to the Alexandria library.

Leave a Reply