EDIT April 2015: I took it off the site because it was kind of bad 🙂
There’s a hubbub1 going around about a fun plugin for popover footnotes called Bigfoot.
I think it’s cool. I definitely prefer that reading experience.
this new thing
Some people on Twitter said they prefer Grantland’s sidenotes, except for their behavior on mobile, where they basically don’t work. They imagined a solution that involves swiping/dragging, and enlisted me to work on it.
I’m not sure how to capture that kind of touch event and I’m curious to find out I guess.
I’m starting by recreating Grantland’s sidenotes, and then I’m going to go watch The Hobbit with my dad.
One thing that’s cool about the popular plugin is that it’s easy to drop in and use. What I’ve added to my site isn’t, because it makes assumptions about the structure of your HTML layout. I bet it could be abstracted in a way that’s broadly usable but I’m not sure how. Happy to take input on that!2
assumptions it makes
Here are the assumptions I’m currently making:
That your HTML layout looks something like this:
<div class="post"> <div class="body">...</div> <div class="sidenotes"><ol></ol></div> <div class="clearfix"></div> </div>
And your CSS (Sass here) looks something like this:
.post .body width: 70% float: left .sidenotes width: 25% float: left .clearfix clear: both
I’m also assuming that your footnotes look a lot like the ones generated by my favored markdown-to-html processor, kramdown, which … I have no idea if that’ll be a dealbreaker for interoperablity.
Here’s what the code looks like3:
$ -> # grab the sidenotes divs $sidenotes_container = $(".sidenotes") # grab the sidenotes list $sidenotes = $sidenotes_container.find "ol" # iterate over the footnotes at the bottom of the post # and work some magic on them $(".footnotes li").each (index, item) -> # wrap the footnote in a jQuery object $footnote = $(item) # move the footnote from the bottom to the right $footnote.remove().appendTo $sidenotes # remove the little arrow that links back to the source $footnote.find(".reversefootnote").remove() # find the source link from within the body of the post $source = $(".footnote").eq(index) # grab the previous sidenote, if there is one $previous_sidenote = $footnote.prev() $previous_sidenote = if $previous_sidenote.length then $previous_sidenote else undefined # let's set the vertical position of the current sidenote # if the previous one is kind of long, we need to push this one down # if not, it should be aligned with the source link $footnote.offset -> aligned_top = $source.offset().top if $previous_sidenote? and $previous_sidenote.offset().top + $previous_sidenote.height() >= aligned_top top: $previous_sidenote.offset().top + $previous_sidenote.height() + 5 else top: aligned_top
gripes / todos
- looks bad on mobile, and when resizing the windows. Should have some responsiveness, possibly including that swiping thing @smarterbits imagined
- when you click a footnote link, nothing seems to happen. maybe the related sidenote should pulse briefly to attract the eye
- I don’t like how posts without sidenotes kind of look unbalanced now. This makes me want to have at least one footnote per post? Weird.
I noticed it linked by Dr. Drang, who praised it for being “webby”, and Marco Arment who praised it for being like Instapaper. ↩
truthfully I’m eager to make some kind of open source thing that people use and collaboratively improve. ↩