Support EPUB 3 Semantic Footnotes (epub:type="noteref") with Popover UI in Web Reader

[blacktea1891]

What's Your Idea?

I propose enhancing the web reader to properly support standard EPUB 3 semantic footnotes.

Specifically, the reader should intercept click events on anchor tags containing epub:type="noteref". Instead of triggering a native browser anchor jump, the reader should extract the text content from the corresponding target (usually an <aside epub:type="footnote"> or a specific <div> with the matching ID) and display it directly in a modern floating popover/dialog on the current screen.

If a popover UI is too complex for the current roadmap, fixing the native anchor jump within the current pagination logic (so it doesn't break the user's reading progress) would be an acceptable fallback.

Why Would This Be Helpful?

Currently, reading books with extensive footnotes (history, academic, or heavily annotated literature) is very frustrating on the web reader.

Because the underlying reader (Epub.js) uses an iframe and CSS columns to handle pagination, clicking a standard footnote link either fails to navigate entirely or breaks the current reading progress/page calculation. Users end up losing their place in the book. A floating popover solves this completely by allowing users to read the note while maintaining their visual context and reading flow.

Anything Else? (Optional)

This is the standard EPUB 3 HTML structure that triggers this behavior:
<sup><a epub:type="noteref" id="ref-1" href="#note-1">[1]</a></sup>
<aside epub:type="footnote" id="note-1">
<a href="#ref-1">[1]</a> This is the actual footnote content that should be displayed in the popover.
</aside>
Technical context: I noticed Issue #114 mentions reverting to infinite scrolling. If the reader switches to infinite scrolling, native anchor jumps might naturally start working again. However, a popover/dialog interceptor would still provide a far superior, modern UX compared to jumping to the bottom of a chapter and having to jump back.

I am not an Angular developer, but I have perfectly formatted EPUB 3 files with semantic footnotes ready. I would be very happy to provide test files and help QA/test the feature once a PR is drafted!

Want to Help Out?

I'm happy to help test and give feedback

Have You Considered Any Alternatives? (Optional)

The current alternative is abandoning the web reader entirely and using an external OPDS client (like KyBook or Moon+ Reader) that natively supports these popups. However, this defeats the purpose of Grimmory's excellent web-based streaming reading experience.

Before Submitting

• I've searched existing issues and confirmed this feature hasn't been requested yet

[coderabbitai[bot]]

🔗 Related PRs

#435 - fix(reader): implement signal-based state management and cleanup in EbookReaderComponent [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[blacktea1891]

@coderabbitai plan

[coderabbitai[bot]]

Caution

CodeRabbit could not initialize plan tracking. Please try again later.