I have a simple static HTML document that transcribes a PDF document. The PDF had footnotes. These are represented in the HTML by paragraphs of a footnote class placed directly after the paragraph that references the footnote.
I would like the user to be able to select text across multiple body paragraphs, in between which is a note paragraph, without selecting the note paragraph too. All of the notes should come after all of the body paragraphs in text selection order, as if they were logically at the end of the document, despite being represented as interleaved.
I found this question, which is related. I can't see how to apply its method using floats and flex boxes to a static document. Perhaps there is a feature of HTML like tabindex that can reorder selection. I did not find any other insights into this problem here or on Google.
I cannot post the source here due to copyright, but here is a document with exactly the same structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ACII"/>
<style>
body { margin: auto; max-width: 66ex; font: 10pt/1.5 sans-serif }
.pagemark { font-weight: bold }
.note { font-size: smaller; line-height: 1.25 }
</style>
</head>
<body>
<p>Mel ne sale singulis. Soluta semper alterum vix no, at est tale qua tractatos.<sup>1</sup> Solet verear ne sea, eu instructior vituperatoribus per, eos in enim accommodare. Cum eripuit blandit cu, luptatum laboramus his et, ea eripuit accusam nec. Ei simul minimum duo.</p>
<p class="note">1. Et mei aperiri accusata mediocritatem. Pro doming eripuit delicata in. Sit illud utroque te, in cum vidit lucilius maluisset. Ei affert regione necessitatibus his. At voluptaria consetetur appellantur nec, amet veri nostrud vim ex.</p>
<p>Et est soluta dicunt impedit, ut mel rationibus omittantur. Ex regione nominati pertinacia sit. Et exerci homero doctus eum, mei at erat percipit conceptam. Eu sed augue erant consetetur, civibus voluptua persequeris sed cu. Eu praesent assueverit quo, ut elitr dolorem suscipiantur qui.</p>
<p>Falli nullam veritus ne vim, recteque suscipiantur sit ei. Mel persius molestie ne, facer vivendo suscipit est no, vitae epicuri no eos. Mei adhuc copiosae ad, eos admodum lobortis cu, his ut laudem appareat mediocrem. Ne nec ponderum expetendis efficiendi, errem forensibus eos ne, duo tota urbanitas constituam in. Nobis everti id mea, pericula imperdiet eam et, tota magna facete vix at.</p>
<p>In reprehendunt interpretaris sed, sed id brute singulis disputando. Utroque denique tacimates ad mea. Mei cu iusto aperiri prodesset, zril definitionem vix ex.<sup>2</sup> An qui purto signiferumque, vim timeam docendi persecuti te.<sup>3</sup></p>
<p class="note">2. Ea lorem torquatos efficiantur eum, case veri scripta sit at, et debet forensibus nec. Autem meliore est id, dolore sadipscing vel in, id vix posse recusabo. Eum omnes primis voluptua an. Ei virtute praesent pri, ex vim nibh dicta. Ea habeo ceteros vim, ut purto philosophia necessitatibus sea.</p>
<p class="note">3. Propriae oporteat inciderint at nam. Eos te ubique feugait invidunt, ex facer sapientem mel, pro ad aliquando assueverit. Verear legimus ne eos, ea sit aliquam electram quaerendum, quo sapientem conceptam forensibus an. Nusquam blandit corrumpit ea sea. An everti indoctum usu, eu qui antiopam assueverit, at atqui vivendo mel.</p>
</body>
</html>
This is how selection works by default (not what I want):
This is what I want:
Footnotes should be selectable in the same way:
Thanks for taking a look at this question!
