#my code

im missing some of the shorts but they arent in the main playlist (bfdi.tv) and im doing the yt boycott so.

also uhh you can download them here, and the captions. theyre mostly all only in 720p bc i dont have too much space on my webserver and its slow enough as is without transfering 4k files lol

also, the whole website* is size responsive

other than some text and the download buttons being hidden , it is completely useable and scales on mobile

The full explanation of how it works and my thought process is up on my site, but here I'll skip over a lot of that.

Now, I’m not super tapped into the state of the art for AO3 workskins, it’s possible and indeed very plausible to me that I’m not actually the first to think of some of this. AO3 is an old site and everything I’m using is just a clever combination of features HTML has had for decades.

But as far as I’m aware‍—though my experience is just existing in a couple of small fandom communities and making a half‍-​hearted google search‍—I know of three main ways you can implement footnotes.

Dead simple: just put ¹ in the chapter, and expect the reader scroll down or keep another tab open to crossreference the endnotes. (Or just keep the footnotes nearby.)

Standard trick: just use anchor links (e.g. <a id="from-fn1" href="to-fn1">1</a>) to auto scroll down to the end, where a matching link (<a href="from-fn1">↩︎</a>) will take you back to the top. This is what many tutorials recommend, and it’s what conversion software like pandoc will spit out.

Advanced trick: include the footnotes in the workskin, coded so that when you hover over the link the footnote will expand out inline.

That the first of these sucks goes without saying.

The second one is decently functional‍—most existing sites with footnotes do this. I find it interrupts the reading experience pretty badly, and the juice is perhaps not worth the squeeze, when you’re doing that whole jarring transition just for a quick joke from an author who may or may not actually be funny.

The third one is pretty nice… with a lot of technical warts. Editing the css instead of the actual content is extremely inelegant, requires a unique skin per fic, makes you deal with quote weirdness, and you can’t use italics or other formatting. On top of that, readers with workskins disabled (or those exported the text) will lose your footnotes entirely.

Finally the mobile experience with these hover‍-​centric approaches can often be hit or miss. (Worse, there’s no “the” mobile experience, since some, like iOS, have browsers with special behavior to interact with hover elements.)

So, what does my solution look like?  I have a demo embedded on my site, but obviously you can't do that on tumblr.  You check out this codepen if that's your speed, I guess.

First, you’ll need a workskin. I assume you know how that works.  The code you need to add for this is several dozen lines, so I'll put it at the end of this post.  Paste that into your workskin, and then you just need to add the actual footnotes to the fic.

For that you need to edit the HTML of your fic. I also assume you know how that works. To add notes, put this where you want the link to appear:

<span class="note"><a id="fn-ID" href="#fn-ID"></a><a href="#-"></a><span>[</span><span class="txt" >TEXT< /span><span>]</span></span>

Replace TEXT the contents of the note, and ID with a sequence of number or letters unique to this note. If you forget or duplicate an ID, the note may not open when clicked.

Now you should be good to go. Specifically, doing this will give you:

TEXT is hidden by default, and only the first link is displayed

Links will say “note” by default. If you add any text before the first </a>, it will override this. (e.g. † or 1).

If you click the link, TEXT will appear, and the link is hidden, and the second link appears in the same place.

If you click the second link, the note is once again hidden

If you hover over the link, the note will appear, slightly transparent.

if the <span class="note"> is changed to <span class="note no-hover"> then the hovering behavior is suppressed. (Good for longer notes, though it may be better to consistently pick one or the other.)

If the <span class="note"> is changed to <span class="note float"> then the note will float over the text instead of appearing inline.note(You can combine this with no-hover in a way I hope is obvious.)e

Footnotes require different code. Put this where you want the link to appear:

^{<a id="from-fn-ID href="fn-ID">note</a>}

(ID is once again selected to be unique, and ‘note’ may be replaced with a symbol or number of your choice. It probably should be a number, for clarity’s sake.)

Put this where you want the footnote to reside (e.g. at the end of the chapter), with the same ID:

<a class="fn-anchor" id="fn-ID"></a><div class="footnote" >TEXT< a href="#-"></a><a class="fn-back" href="#from-fn-ID"></a></div>

A minor limitation to be aware of is that you can only have a single footnote open at once; clicking another closes the one already opened. In particular, this means nested footnotes will not work out of the box.

This is fixable; the workskin provided includes code specifically for displaying footnotes‍-​within‍-​footnotes, but making them actually work requires careful attention to the HTML. Specifically, the link with href="#-" must be changed to say href="#fn-PID" where PID is the ID of the footnote containing the sub‍-​footnote.

That’s all that comes to mind. I’ve done what I can to make this code work, checked for and fixed edge cases and polished away cruft borne of iteration and false starts. I’ve tried to keep this bare and functional‍—you can get fancier with the borders and hover effects, you could add box‍-​shadows, but if you know how to do all that… well, do it.

I’m sure a CSS expert could fix this up further (the floating bits in particular feel like I’m bumbling without a rich understanding), but I think what I have is an improvement over a lot of what’s out there‍—I hope it serves you well!

If do use this code, consider crediting me and linking back here? I’d like to have my spores out there.

Anyway, here's the code for people who don't want to open neocities or codepen for some reason:

Okay, @virmbot.

Story goes I was at a bar with idle time so I got my phone out to pick something to draw and your Polybius design was one of the last things I had saved. So I started messing around...

...and then planning...

...and then when I got home to my laptop, executing.

Hope you like it!

Closer look below