FiveThirtyEight style in-text footnotes for bookdown

Question

I'm creating a project using {bookdown}, and I would like to format my footnotes to appear directly in the text when the superscript is selected, as happens in FiveThirtyEight articles (see here for an example). The idea is that when a user clicks on the footnotes, the paragraph expands to show the footnote text, and then compresses back to normal when the footnote is closed.

I have found a few resources where this is implemented:

• Stackoverflow question here
• https://medium.com/@bnjmnbnjmn/in-line-notes-with-only-html-css-f181c5ceef59
• https://www.viget.com/articles/of-note-better-text-annotations-for-the-web/

However, these solutions all seem to assume that the actual footnote text is within a <span> tag that has an associated class. However, this does not appear to be the case for HTML footnotes generated from {bookdown} and Pandoc. The HTML looks like this:

<p>
  "Figures and tables with captions will be placed in "
  <code>
    "figure
  </code>
  " and "
  <code>
    "table"
  </code>
  " environments, respectively."
  <a href="#fn1" class="footnote-ref" id = "fnref1"><sup>1</sup></a>
</p>

<div class="footnotes">
  <hr>
  <ol start="1">
    <li id="fn1">
      <p>
        "Here is a fancy footnote."
        <a href="intro.html#fnref1" class="footnote-back">"<-"</a>
      </p>
    </li>
  </ol>
</div>

So not only are the footnotes placed in an unclassed <p> tag, rather than a classed <span> tag, the footnotes themselves are also in a completely separate <div>, rather than appearing within the same tag as the rest of the text, as is the case in the linked examples.

I've created a bookdown reprex to try and make this work with a combination of CSS and javascript, based on the linked examples above. The GitHub repo is here, and the rendered output here. I've successfully hidden the footnotes at the bottom of the page, but have not been able to get the footnotes to display in-text when the footnote superscript is selected.

Is there a way to style footnotes in this way using {bookdown}? Or is this a constraint of Pandoc?

Answer 1

Pandoc gives you full control over the the output via filters. The following is a Lua filter which uses the HTML/CSS method to hide/show footnotes. See this R Studio article on how to use Lua filters with bookdown.

-- how many notes we've seen yet.
local note_number = 0

local fn_opening_template = [[<span id="fn-%d"><!--
--><label for="fn-%d-toggle"><sup>%d</sup></label><!--
--><input type="checkbox" hidden id="fn-%d-toggle"/>
]]
local fn_close = '</span>'

local style_css = [[<style>
input[type=checkbox][id|=fn] + span {display:none;}
input[type=checkbox][id|=fn]:checked + span {display:block;}
</style>
]]

-- Use custom HTML for footnotes.
function Note (note)
  note_number = note_number + 1
  local fn_open = fn_opening_template:format(
    note_number, note_number, note_number, note_number)
  return {
    pandoc.RawInline('html', fn_open),
    pandoc.Span(
      pandoc.utils.blocks_to_inlines(note.content),
      pandoc.Attr(string.format('fn-%d-content', note_number))
    ),
    pandoc.RawInline('html', fn_close)
  }
end

function Meta (meta)
  local header_includes = meta['header-includes']
  -- ensure that header_includes is a MetaList
  if not header_includes then
    header_includes = pandoc.MetaList{}
  elseif header_includes.t ~= 'MetaList' then
    header_includes = pandoc.MetaList {header_includes}
  end
  table.insert(
    header_includes,
    pandoc.MetaBlocks{pandoc.RawBlock('html', style_css)}
  )
  meta['header-includes'] = header_includes
  return meta
end