{"id":3092,"date":"2021-11-02T15:23:06","date_gmt":"2021-11-02T15:23:06","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3092"},"modified":"2023-06-12T14:43:17","modified_gmt":"2023-06-12T14:43:17","slug":"css-tutorial-a-terrible-way-to-do-footnotes-in-html","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-a-terrible-way-to-do-footnotes-in-html\/","title":{"rendered":"CSS Tutorial – A (terrible?) way to do footnotes in HTML"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Terence Eden\u00a0poked around<\/a>\u00a0with a way to do footnotes using the\u00a0<details><\/code>\/<summary><\/code>\u00a0elements. I think it\u2019s kind of clever. Rather than a hyperlink that jumps down to explain the footnote elsewhere, the details are right there next to the text. I like that proximity in the code. Plus, you get the native open\/close interactivity of the disclosure widget.<\/p>\n

It\u2019s got some tricky parts though. The\u00a0<details><\/code>\u00a0element is block-level, so it needs to become inline to be the footnote, and sized\/positioned to look \u201cright.\u201d I think it\u2019s a shame that it won\u2019t sit within a\u00a0<p><\/code>\u00a0tag, so that makes it impractical for my own usage.<\/p>\n

Craig Shoemaker in the comments forked the original to fiddle with the CSS, and that inspired me to do the same.<\/p>\n

Rather than display the footnote text itself right inline (which is extra-tricky), I moved that content to a fixed-position location at the bottom of the page:<\/p>\n

<\/div>\n
<div class=\"fake-p\">\r\n  The most cited work in history, for example, is a 1951 paper<details>\r\n    <summary>1<\/summary>\r\n    <div class=\"details-content\">Lowry, O. H., Rosebrough, N. J., Farr, A. L. & Randall, R. J. J. Biol. Chem. 193, 265\u2013275 (1951).<\/div>\r\n  <\/details> describing an assay to determine the amount of protein in a solution.\r\n<\/div>\r\n\r\n<div class=\"fake-p\">\r\n  Sunlight poured like molten gold<details>\r\n    <summary>2<\/summary>\r\n    <div class=\"details-content\">Not precisely, of course. Trees didn\u2019t burst into flame, people didn\u2019t suddenly become very rich and extremely dead, and the seas didn\u2019t flash into steam. A better simile, in fact, would be \u2018not like molten gold.\u2019<\/div>\r\n  <\/details> across the sleeping landscape.\r\n<\/div>\r\n\r\n<div class=\"fake-p\">\r\n  My blog was recently featured in an academic paper<details>\r\n    <summary>3<\/summary>\r\n    <div class=\"details-content\"><span itemscope itemtype=\"http:\/\/schema.org\/ScholarlyArticle\"><span itemprop=\"citation\"><span itemprop=\"author\" itemscope itemtype=\"http:\/\/schema.org\/Person\"><span itemprop=\"name\"><span itemprop=\"familyName\">Eishita<\/span><span>, <\/span><span itemprop=\"givenName\">Farjana Z.<\/span><\/span><\/span><span> & <\/span><span itemprop=\"author\" itemscope itemtype=\"http:\/\/schema.org\/Person\"><span itemprop=\"name\"><span itemprop=\"familyName\">Stanley<\/span><span>, <\/span><span itemprop=\"givenName\">Kevin G.<\/span><\/span><\/span><span> & <\/span><span itemprop=\"author\" itemscope itemtype=\"http:\/\/schema.org\/Person\"><span itemprop=\"name\"><span itemprop=\"familyName\">Esquivel<\/span><span>, <\/span><span itemprop=\"givenName\">Alain<\/span><\/span><\/span> <q><cite itemprop=\"headline\">Quantifying the differential impact of sensor noise in augmented reality gaming input<\/cite><\/q> <span>(<\/span><time itemprop=\"datePublished\" datetime=\"2015\">2015<\/time><span>)<\/span> <span itemprop=\"publisher\" itemscope itemtype=\"http:\/\/schema.org\/Organization\"><span itemprop=\"name\">Institute of Electrical and Electronics Engineers (IEEE)<\/span><\/span><span>.<\/span> DOI: <a itemprop=\"url\" href=\"https:\/\/doi.org\/10.1109\/gem.2015.7377202\">https:\/\/doi.org\/10.1109\/gem.2015.7377202<\/a><\/span><\/span><\/div>\r\n  <\/details> which pleased me greatly.\r\n<\/div><\/pre>\n
details,\r\nsummary {\r\n  display: inline;\r\n  vertical-align: super;\r\n  font-size: 0.75rem;\r\n  padding: 0 0.25rem;\r\n}\r\nsummary {\r\n  cursor: pointer;\r\n}\r\n.details-content {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  max-width: 90%;\r\n  padding: 1rem;\r\n  font-size: 1rem;\r\n  background: lightyellow;\r\n  box-shadow: 0 0 100px black;\r\n  border-top-left-radius: 4px;\r\n  border-top-right-radius: 4px;\r\n}\r\n\r\n\/* Details don't like being inside a p *\/\r\n.fake-p {\r\n  margin: 0 0 1rem 0;\r\n}\r\n\r\nbody {\r\n  font: 100%\/1.4 system-ui;\r\n  margin: 0;\r\n  padding: 2rem 2rem 20rem 2rem;\r\n}\r\n<\/pre>\n