Hi, here's some style code for a floating statusbar popup that appears at the bottom left of screen, to display <a href> links, notes and images (for e-readers that dont show the former) and for other html platforms in general to show the latter.
I posted some musings about this
here a few years ago, so this' just an update.
The method to add notes, the main part to it, references attribute selectors in a similar way that <a href> links are added, linking multiple selectors that look back as new ones are referenced to add them as paragraphs.
The attribute names are p1 to p5 and the method to add them looks like:
Code:
<a href="http://example.com" p1="..." p2="..." p3="...">example</a>
<img src="../20/example.jpg" p1="..." p2="..."/>
<i p1="...">example</i>
Other notes:
- This code should be usable with most html content, but requires minor differences depending on whether there's a need to show <a href> links or not, so I'll post two versions of it.
- The a:not([href^="#"]):not([href^="../"]) qualification is to prevent internal chapter and footnote paths appearing.
- To indicate interactivity text linking non <a href> notes are are colored.
- You may want to alter the width value currently set to 100%.
- There's also a template to add images at the end along with explanation of how to link them & some limitations.
The version that shows <a href> links
[
See updated post]
The version that omits <a href> links
[
See updated post]