Pattern 03
Footnotes without losing place
Inspect a note and return to the exact reading anchor.
The problem
Opening a note can displace the passage, cover it or return the reader to the top of a chapter.
The pattern
Attach the note to its text anchor and preserve its parts: origin reference, quoted phrase, explanatory text and alternative reading where supplied. Choose inline expansion, a mobile sheet or a study panel by note length and available space.
Compare the alternatives
Inspect a note and return to the exact reading anchor.
A · Inline expansion
Useful for a short note; check how expansion shifts the passage.
B · Bottom sheet
Quoted phrase
Note text
Keep the origin visible above a dismissible note.
C · Study panel
A longer note can sit alongside the text.
Original wireframe proposals · No live controls · Grey rows represent schematic text, not loading states · Labelled placeholders are not Scripture quotations
Download this wireframe as SVGFailure modes
Hover-only access; a modal with no usable close control; merging quoted wording and editorial explanation; closing to a different reading position.
Bible and faith considerations
Do not label translation footnotes as AI commentary. Publisher material and personal notes have different ownership and permissions.
What to validate
Test opening and closing with touch, keyboard and screen reader at large text sizes. Confirm focus and the visible reading position return to the note anchor.
Research-informed design proposal. These visual alternatives have not been tested with users in this atlas. Source findings, documented behaviour and this proposed adaptation are different kinds of evidence.
Sources and adaptation
This card is an original design synthesis. The following sources inform its content distinctions, interaction approach or review requirements; they do not validate the whole pattern.
- Footnote structureMarker semantics reviewed · Does not prescribe inline, sheet or panel presentation.
- Accessible modal dialog patternInteraction guidance reviewed · Native apps require corresponding platform mechanisms.