Display a critical apparatus on the web by driving every view from one encoded TEI source and giving readers a choice of layout rather than imposing print conventions. The best-practice pattern: a clean reading text with unobtrusive inline markers, variants revealed on demand, a global "show all apparatus" toggle, and a witness key always one click away. Anchor each entry precisely to its lemma, keep sigla legible with on-demand expansion, and make every interaction work by keyboard and on mobile. The web lets you offer inline, footnote and side-panel views over the same data — use that, do not pick one and force it.

How should the apparatus be encoded so the front-end is free?

Encode once, render many ways. TEI's app/lem/rdg with parallel segmentation ties each variant to its place in the reading text:

<p>the council met at
  <app>
    <lem wit="#A">Constantinople</lem>
    <rdg wit="#B #C">Constantinopolis</rdg>
  </app>
  in autumn</p>

Because the variant is anchored to its lemma, your renderer can place a marker on the exact word and let the display decide whether that becomes a tooltip, a footnote or a side-panel row. Get the encoding right and layout becomes a presentation choice, not a data problem.

Where on the page should variants go?

There is no single correct place — the web's advantage is offering several over identical data:

Layout	Best for	Watch out for
Inline reveal (tooltip/popover)	quick lookup, narrow screens	must be keyboard-operable, not hover-only
Foot of text (collapsible)	systematic reading	keep the lemma link visible
Side panel / margin	wide screens, dense apparatus	collapses badly on mobile

Offer at least two and let the reader switch. A scholar collating variants wants everything at once; a first-time reader wants the text clean.

How do you link a variant to the exact word?

Anchor markers to the lemma span and make the relationship two-way. Clicking the marked word highlights the apparatus entry; clicking the entry scrolls to and highlights the word. Carry a stable id through from TEI so this survives re-rendering:

<span id="app142" class="lemma">Constantinople</span>
<button aria-controls="app142-detail" aria-expanded="false">variants</button>

Without precise anchoring, readers cannot tell which of several nearby words a variant concerns — the single most confusing apparatus failure.

How do you keep sigla readable on the web?

Print readers memorise a fixed siglum key; web readers jump in from a search result with no such context. So:

• Keep a witness list (siglum to manuscript) permanently one click away.
• On hover or focus over a siglum, show the full witness name and shelfmark.
• Consider a first-mention expansion so "A" reads as "A (Bodl. MS Add. 4022)".

Should variants show by default or stay hidden?

Hide by default for a calm reading text, but never hide their existence. A subtle marker (a small superscript, a tinted word, a margin tick) tells the reader an apparatus entry is there, and one tap reveals it. Add a global "show all apparatus" switch so a collator can flip the whole text into full-apparatus mode at once.

How do you make it work on mobile?

Margins do not exist on a narrow screen and hover does not exist on touch. Replace them:

Desktop margin apparatus  ->  mobile: tap marker -> bottom sheet
Hover tooltip             ->  mobile: tap -> dismissible popover
Cramped side panel        ->  mobile: collapsible block below the line

Make tap targets large, keep reveals dismissible and persistent, and test on a real phone, not just a resized browser.

A working checklist

Before you call the apparatus display done, confirm: one TEI source drives all views; markers anchored precisely to lemmata; two-way highlighting; witness key one click away; sigla expand on focus; hidden-by-default with visible markers; a global show-all toggle; keyboard-operable; and a real mobile pass. Each item is a place editions routinely break.

Key Takeaways

• Encode the apparatus once in TEI (app/lem/rdg) and render multiple layouts from it.
• Offer inline, footnote and side-panel views; let readers choose rather than imposing one.
• Anchor every entry precisely to its lemma and make highlighting two-way.
• Keep a witness key one click away and expand sigla on hover or focus.
• Hide variants by default but always show an unobtrusive marker that they exist.
• Provide a global "show all apparatus" toggle for systematic readers.
• Replace margins and hover with tap-to-expand patterns on mobile.

Frequently Asked Questions

Where should the apparatus appear on a web page?

Give readers a choice rather than forcing one layout. The strongest pattern is an inline marker that reveals the variants on demand, backed by an option to show all apparatus at the foot of the text or in a side panel, so both close readers and skimmers are served.

Should the apparatus be inline, footnote-style, or in a margin?

All three are valid; the web's advantage is you can offer them as toggles over the same TEI data. Marginal or side-panel apparatus suits wide screens; collapsible footnotes suit narrow ones. Drive every view from one encoded source.

How do I link a variant to the exact word it concerns?

Anchor each apparatus entry to its lemma in the reading text using the TEI parallel-segmentation or double-end-point method, then render a marker on that span. Clicking the word highlights the entry and vice versa.

How do I keep siglum abbreviations clear to readers?

Expose a witness list (a key of sigla to manuscripts) that is always one click away, and on hover or focus show the full witness name. Never assume a web reader has memorised your sigla the way a print reader of a fixed apparatus might.

Is it better to show variants by default or hide them?

Hide by default for a clean reading experience, but make their presence visible with an unobtrusive marker and make revealing them trivial. Offer a global 'show all apparatus' switch for users who want everything at once.

How do I make the apparatus work on mobile?

Avoid hover-only reveals and cramped marginal columns. Use tap-to-expand markers, a bottom sheet or collapsible block for the entries, and ensure targets are large enough to hit, since margin apparatus has no room on a narrow screen.

Related reading

• Make digital editions accessible
• Add search to a digital edition
• Parallel-text editions
• Encode a critical apparatus in TEI
• Transform TEI to HTML