Footnotes That Work in RSS Readers

Currently using Feedbin as my RSS reader, I recently encountered a neat interactive feature within the app. A numbered button-like element, which turned out to be a footnote, caught my eye in one of Harry's blog posts. Hovering over it revealed the corresponding note.

The blog post's HTML for this footnote is structured as follows:

<p>...they’d managed to place 27.9MB of images onto the Critical Path. 
Almost 30MB of previously non-render blocking assets had just been 
turned into blocking ones on purpose with no escape hatch. Start 
render time was as high as 27.1s over a cable connection<sup><a href="https://www.php.cn/link/b22511377f9a12f2c227ef2628933a3d">1</a></sup>.</p>

A simple anchor link pointing to https://www.php.cn/link/b22511377f9a12f2c227ef2628933a3d, and the <sup></sup> tag provides the visual cue of a footnote link. The default styling is as expected.

The HTML for the footnotes at the post's end looks like this:

<div>
  <ol>
<li>
     <p>5Mb up, 1Mb down, 28ms RTT. <a href="https://www.php.cn/link/a1cae678af59c92bbf86e04d9949aad7">↩</a></p>
    </li>
  </ol>
</div>

Incidentally, I noticed Harry utilizes scroll-behavior for smooth scrolling and clever :target styling.

In essence, the system comprises:

1. A link to access the footnote.
2. A return link to the original text.

No complex libraries are involved; just semantically correct HTML. This approach should function in any RSS reader that correctly handles hash links and element IDs.

Feedbin's unique contribution lies in its enhanced UI styling and interactive elements. Inspection reveals that Feedbin hides the original markup and replaces it with custom elements. This suggests the use of a JavaScript function (possibly named "Bigfoot") triggered upon article loading.

This functionality builds upon a functional, basic HTML structure. To test this markup's behavior across different RSS readers, I'll be experimenting with various platforms and welcome feedback on your reader's response in the comments section.

Azul, an abstract strategy board game created by Michael Kiesling and published by Plan B Games¹ in 2017, supports two to four players. Players gather tiles to complete a 5x5 board. Tiles are collected by taking all tiles of a single color, placing them in a row, and taking turns until all round tiles are claimed. Then, one tile from each completed row moves to the player's 5x5 board, while the others are discarded. Scoring depends on tile placement. Rounds continue until a player fills a row across their 5x5 board.

1. Plan B Games also produces notable titles such as Century and Reef.↩

The above is the detailed content of Footnotes That Work in RSS Readers. For more information, please follow other related articles on the PHP Chinese website!