# Jekyll footnotes as Edward Tufte inspired sidenotes

DevFeed: [Jekyll footnotes as Edward Tufte inspired sidenotes](<https://devfeed.tech/articles/jekyll-footnotes-as-edward-tufte-inspired-sidenotes-25273.md>)

Original publisher: [Read original article](<https://kau.sh/blog/jekyll-footnote-tufte-sidenote/>)

Author: Kaushik Gopal

Published: 2020-07-21T07:00:00Z

Content type: tutorial

Language: en

Sources: [Kaushik Gopal's Site](<https://devfeed.tech/sources/kaushik-gopal-s-site.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>)

## AI overview

The article explains how to implement Tufte-inspired sidenotes in a Jekyll blog by adapting kramdown footnotes. It uses JavaScript and jQuery to position notes in the page margin and discusses handling image loading and browser resizing.

## Source excerpt

I've been looking into Tufte CSS recently. Tufte CSS -inspired by the teachings of the legendary Edward Tufte1- provides suggestions and tools to style web articles for improved legibility. I've started to incorporate some of those principles here while still trying to keep the authenticity of my original design. Most of these changes have been in the realm of CSS however the sidenotes feature was a slightly trickier beast. I've implemented this feature in my blog theme "Henry" for both Hugo & Jekyll. Jekyll kramdown comes built in with a footnotes feature that I've used here for some time. It works pretty well for the most part. The only problem though is -as the names suggests- it displays the notes all the way at the bottom of the articles near the footer. Your browser doesn't support HTML5 video. Download the video instead. Edward Tufte instead suggests the use of "sidenotes": Sidenotes are like footnotes, except they don't force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. So my objective was to use the existing kramdown pipes and generate the footnotes, but display them off to the side in the margin instead of at the bottom. Pulling this off is tricky with pure CSS but is baby talk for javascript. So I pulled out my trusty old jQuery2 chops and got this fun side project done. source You can find the js source code here. As is the case with these things though, the devil is in the details. I got the basic functionality down in about an hour but adding the finishing touches took more testing and improving. Here's some of the ones I had to tackle: Image loading throws the position off: ## Since jQuery loads eagerly, it typically wouldn't wait for the images to load before calculating the position. This would cause the position to be off sometimes. Your browser doesn't support HTML5 video. Download the video instead. This is a one-line fix in jQuery: $(window).on("load", function() { // executes after e