# Inline Collaborative Transcription

Four layout concepts for side-by-side PDF scan viewing and collaborative transcription editing. Users can follow along the original handwritten letter while multiple family members contribute to and refine the transcript together.

Familienarchiv
Exploration
2026-04-04 · @leonievoss
Context

The scanned documents are images of handwritten letters — there is no text layer in the PDFs. Family members need to manually transcribe these letters, often collaboratively. The current transcription panel shows read-only text in the bottom panel. These mockups explore how to make transcription a first-class inline editing experience where the scan and transcript are always visible together, and multiple users can contribute simultaneously.

Key constraints: Senior users (60+) need large text and clear visual connection between scan and transcript. The existing annotation system (draw rectangle on PDF + comment thread) stays separate — transcription is a different workflow: line-by-line text entry that maps to the full document, not a specific region.

T

## Transcribe a letter

Open a scanned letter, read the handwriting, type the transcript line by line while seeing the original. Other family members can join and edit the same transcript in real time.

Document detail → Transcribe mode · Any user with WRITE_ALL

### A — Side-by-side split

A
The document detail page gains a vertical split: PDF scan on the left, transcription editor on the right. A draggable divider lets users adjust the ratio. The transcription editor shows line numbers and highlights which line maps to the user's scroll position in the PDF. Multiple users' cursors appear as colored carets.
Desktop split — PDF left (flex:1), transcript right (400px default, resizable). Mobile: bottom sheet.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
✎ Transkribieren
Annotieren
Liebe Martha,
Dein Heinrich
Bearbeiten
Vorschau
Verlauf
Du
Oma Inge
Onkel Klaus
1
Liebe Martha,
2
3
ich schreibe Dir heute aus dem Lazarett
4
in Breslau. Mach Dir keine Sorgen,
5
es geht mir den Umständen
6
entsprechend gut. Der Arzt sagt
7
[unleserlich]
8
Wochen noch dauern wird.
9
10
Die Kinder sollen wissen, dass ich
11
an sie denke. Sag dem kleinen Fritz,
12
er soll auf seine Mutter aufpassen.
13
14
In ewiger Liebe,
15
Dein Heinrich
✓ Gespeichert 15 Zeilen Zeile 6, Spalte 34 Zuletzt: Oma Inge, vor 2 Min.
Metadaten
Transkription
Diskussion 3
Verlauf
Mobile · 320px
14:23●●● WiFi 🔋
← Brief von Heinrich, 14.05.1943 Transkr.
Liebe Martha,
2 aktiv ✓ Gespeichert
1Liebe Martha,
2
3ich schreibe Dir heute aus dem
4Lazarett in Breslau. Mach Dir keine
5Sorgen, es geht mir den
6Umständen entsprechend gut.
7[unleserlich]
8Wochen noch dauern wird.

#### A · Side-by-side split

    /* Desktop: existing topbar + "Transkribieren" toggle button replaces bottom panel transcription tab.
     * Activating transcription mode opens a vertical split: PDF left (flex:1) + transcript right (400px default).
     * Draggable handle between panels (pointer-events on 4px strip, cursor:col-resize).
     * Transcript toolbar: Edit/Preview/History tabs + presence dots (WebSocket: who is online + who is editing).
     * Line numbers (mono 12px) + text (serif 16px, editable contenteditable divs or textarea rows).
     * Colored left-border per active user (2px, distinct hue from a 6-color palette).
     * "[unleserlich]" placeholder for illegible passages — italic, muted, bracketed.
     * Status bar: save state (auto-save debounced 2s) + line count + cursor position + last editor.
     * Mobile: PDF collapses to a fixed-height thumbnail strip (100px) at top, transcript fills remaining space.
     * Tap thumbnail strip to expand PDF to 60% height (push transcript down). */

Element | Value | Notes
--- | --- | ---
Desktop — split view
PDF panel | flex:1, min-width:300px, bg:#D4D0C8 | Existing PdfViewer component, scroll synced with transcript
Transcript panel | 400px default, min:280px, max:60vw, resizable | border-left:1px solid line, bg:surface
Resize handle | 4px wide, cursor:col-resize, bg:line | Centered dot indicator (2px × 20px)
Toolbar | h:32px, bg:surface, border-bottom, flex row | Edit/Preview/History + presence group right-aligned
Line number | DM Mono 12px, muted, width:24px, text-align:right | Sticky on horizontal scroll if transcript is wide
Transcript text | Tinos 16px/1.6, color:ink, contenteditable | 18px for senior mode preference
User highlight | border-left:2px solid [user-color], bg:rgba([user-color],.08) | 6 distinct hues, assigned round-robin
Status bar | h:24px, bg:sand, border-top, mono 11px | Auto-save indicator + line info + last editor
Mobile
PDF strip | 100px fixed height, bg:pdf-bg, border-bottom:2px mint | Tap to expand to 60vh. Pinch-zoom supported.
Transcript | flex:1, padding:12px 16px, serif 16px | Line numbers: mono 10px, inline before text

### B — Overlay slide-over panel

B
The PDF stays full-width. Clicking "Transkribieren" slides a semi-transparent panel from the right over the PDF. The panel has ~60% opacity background so the scan bleeds through underneath, keeping visual context. Users type the transcript line by line with the scan always partially visible behind.
Desktop overlay — 480px panel, 60% opacity surface bg, slides from right. Mobile: full bottom sheet.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
✎ Transkribieren
Liebe Martha,
Dein Heinrich
Bearbeiten
Vorschau
Du
Oma Inge
✕
1
Liebe Martha,
2
3
ich schreibe Dir heute aus dem Lazarett
4
in Breslau. Mach Dir keine Sorgen,
5
es geht mir den Umständen
6
entsprechend gut. Der Arzt sagt
7
[unleserlich]
8
Wochen noch dauern wird.
9
10
Die Kinder sollen wissen, dass ich
11
an sie denke.
✓ Gespeichert 11 Zeilen Oma Inge bearbeitet Z. 3-4
Metadaten
Diskussion 3
Verlauf

#### B · Overlay slide-over panel

    /* The PDF viewer stays full-width — no resize, no layout shift.
     * "Transkribieren" button toggles a slide-over panel from the right (transform: translateX).
     * Panel: position:absolute, top:0, right:0, bottom:0, width:480px.
     * Background: rgba(255,255,255,.92) + backdrop-filter:blur(8px) — scan bleeds through slightly.
     * Left border: 2px solid mint (brand accent) to clearly separate from PDF.
     * Close button (×) in toolbar top-right to dismiss panel.
     * Same transcript editor as Mockup A: line numbers + editable lines + presence.
     * Pro: zero layout shift, PDF zoom/pan unaffected. Con: obscures right side of scan. */

Element | Value | Notes
--- | --- | ---
Panel | 480px, position:absolute right:0, z:20 | backdrop-filter:blur(8px), rgba(255,255,255,.92)
Left accent | border-left:2px solid mint | Brand color boundary
Transition | transform 200ms ease-out | translateX(100%) → translateX(0)
Shadow | -4px 0 24px rgba(0,0,0,.1) | Depth cue separating from PDF

### C — Interleaved paragraph sync

C
A single scrollable column interleaves cropped scan regions with their transcription blocks. Each paragraph of the letter is shown as: scan excerpt (cropped from the PDF page) + editable transcript block below it. Scrolling moves through the letter naturally — read the scan, then read/edit the transcript, then the next scan section. Great for very long letters.
Single-column interleaved — scan crop + transcript block pairs. Works identically on mobile and desktop (just wider).
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
Du
Oma Inge
✎ Transkribieren
Liebe Martha,
Abschnitt 1 — Anrede ✓
Liebe Martha,
Abschnitt 2 — Hauptteil
Oma Inge
ich schreibe Dir heute aus dem Lazarett in Breslau. Mach Dir keine Sorgen, es geht mir den Umständen entsprechend gut. Der Arzt sagt [unleserlich] Wochen noch dauern wird.
Abschnitt 3
Du
Die Kinder sollen wissen, dass ich an sie denke. Sag dem kleinen Fritz, er soll auf seine Mutter aufpassen.
Dein Heinrich
Abschnitt 4 — Schluss ✓
In ewiger Liebe,
Dein Heinrich
✓ Gespeichert 4 Abschnitte 2 Bearbeiter aktiv

#### C · Interleaved paragraph sync

    /* A fundamentally different layout: no split view. Instead, a single centered column (max-width:800px).
     * Each "section" = a card with two halves:
     *   Top half: cropped region of the PDF scan (rendered via canvas crop or CSS clip-path from the full PDF).
     *   Bottom half: editable transcript text for that section.
     * User defines section boundaries by drawing horizontal lines on the PDF (like the annotation tool but simpler).
     * Sections are numbered and labeled (Anrede, Hauptteil, Schluss — or custom labels).
     * Presence: per-section indicator showing who is editing that block.
     * Pro: natural reading flow, works great on mobile without layout changes. Con: requires section-splitting UX. */

Element | Value | Notes
--- | --- | ---
Column | max-width:800px, centered, bg:sand, padding:24px | Scrollable single column
Section card | border-radius:8px, overflow:hidden, mb:20px | Top: scan crop (pdf-bg). Bottom: surface + transcript.
Scan crop | min-height:80px, bg:pdf-bg, centered paper snippet | Canvas-based crop from PDF page at defined Y offsets
Transcript block | Tinos 16px/1.7, padding:12px 16px, contenteditable | Per-section editing. User color left-border when active.
Section label | Montserrat 11px/600, uppercase, tracking-wide, muted | "Abschnitt 1 — Anrede" etc.

### D — Enhanced bottom panel with scroll sync

D
Keeps the existing bottom panel architecture but enhances the "Transkription" tab with inline editing, scroll synchronization to the PDF above, and collaborative presence. The most conservative approach — minimal layout changes from the current design. The panel simply becomes editable instead of read-only, and gains a toolbar + presence indicators.
Existing bottom panel, enhanced — drag-to-resize remains, adds edit mode + scroll sync + presence. Least disruptive to ship.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
Annotieren
↓ Herunterladen
Liebe Martha,
Dein Heinrich
Metadaten
Transkription
Diskussion 3
Verlauf
Du
Oma Inge
Bearbeiten
Vorschau
[unleserlich]
[Seitenwechsel]
✓ Gespeichert vor 5s
1
Liebe Martha,
2
3
ich schreibe Dir heute aus dem Lazarett
4
in Breslau. Mach Dir keine Sorgen,
5
es geht mir den Umständen
6
entsprechend gut. Der Arzt sagt
7
[unleserlich]
8
Wochen noch dauern wird.
9
10
Die Kinder sollen wissen, dass ich
Zeile 6, Spalte 34 15 Zeilen Oma Inge bearbeitet Z. 3-4

#### D · Enhanced bottom panel

    /* Minimal change from current architecture. The existing DocumentBottomPanel + PanelTranscription stay.
     * Changes:
     *   1. PanelTranscription gains an "edit mode" toggle (currently read-only whitespace-pre-wrap text).
     *   2. Edit mode: contenteditable line-by-line editor with line numbers (same as mockups A/B).
     *   3. Scroll sync: scrolling the transcript highlights a position marker on the PDF's right edge.
     *      - Implemented via: transcript scroll offset → normalized position → turquoise bar on PDF.
     *   4. Presence indicators shown in the tab bar (right side) and in the status bar.
     *   5. Mini toolbar above transcript: Edit/Preview + quick-insert buttons ([unleserlich], [Seitenwechsel]).
     *   6. Transcription tab gets a turquoise dot when someone is actively editing.
     * Pro: ships fastest, reuses all existing panel infrastructure. Con: vertical space is limited. */

Element | Value | Notes
--- | --- | ---
Panel min height | 200px when transcription tab active in edit mode | Existing drag-to-resize + open/close stays
Mini toolbar | h:28px, bg:surface, border-bottom:subtle, flex row | Edit/Preview + [unleserlich] + [Seitenwechsel] quick-insert
Scroll sync bar | 3px wide, turquoise, absolute right:0 on PDF area | Height proportional to visible transcript lines / total lines
Active tab dot | 5px turquoise circle, absolute top-right of tab | Visible when ≥1 user is editing in real time
Quick-insert btns | [unleserlich] and [Seitenwechsel] | Insert at cursor. Rendered as italic muted inline markers.

## Implementation Guide — Inline Collaborative Transcription

### 1. Concept Summary

Four approaches to the same user need: see the original scan and type/edit a transcript simultaneously, with multiple family members contributing. The documents are scanned handwritten letters (image-only PDFs, no text layer). The transcription must be editable inline — not in a separate "edit" page.

Mockup | Layout | Pros | Cons | Complexity
--- | --- | --- | --- | ---
A | Vertical split (PDF left, transcript right) | Both always visible, resizable, familiar pattern | PDF loses width on narrow screens | Medium
B | Slide-over panel on top of PDF | No layout shift, PDF stays full-width | Obscures right side of scan | Low
C | Interleaved scan crops + transcript blocks | Best reading flow, works on mobile natively | Requires section-splitting UX, complex PDF cropping | High
D | Enhanced existing bottom panel | Fastest to ship, no new layout needed | Vertical space squeeze, scan partially hidden | Low

### 2. Shared Components Across All Mockups

- Collaborative editing engine: Use Y.js (CRDT) or similar for real-time multi-user editing. Each user gets a distinct color from a 6-color palette.
- Presence indicators: Colored dots (5px circles) with user name. "Editing" = colored fill, "online" = green fill, "idle" = gray.
- Line-by-line editor: Transcript stored as an array of lines. Each line is a `contenteditable` div or a textarea row. Line numbers (mono font, right-aligned, muted).
- Auto-save: Debounced 2-second save via `PATCH /api/documents/{id}` with `transcription` field. Status indicator: "Gespeichert" (green) / "Speichert..." (muted) / "Nicht gespeichert" (error red).
- [unleserlich] markers: Inline placeholder for illegible text — rendered as `font-style:italic; color:ink-3;` in square brackets. Insertable via toolbar button or keyboard shortcut (`Ctrl+Shift+U`).
- [Seitenwechsel] markers: Page-break indicator — a horizontal rule with "Seite 2" label, inserted when the letter spans multiple pages.

### 3. Existing Code to Extend

- `PanelTranscription.svelte` — currently read-only. Needs edit mode toggle.
- `DocumentBottomPanel.svelte` — existing drag-to-resize panel with tabs. Mockup D enhances this directly.
- `DocumentViewer.svelte` — wraps PdfViewer. Mockups A/B need a split or overlay sibling.
- `+page.svelte` (document detail) — orchestrates all sub-components. New state: `transcribeMode` (boolean).
- `DocumentTopBar.svelte` — needs a "Transkribieren" toggle button (same pattern as existing annotate button).

### 4. Data Model Changes

- The `Document.transcription` field (text) already exists. No schema change needed for basic single-user editing.
- For collaborative editing: add a `transcription_versions` table (document_id, user_id, content, timestamp) for version history.
- For real-time sync: WebSocket endpoint `/ws/transcription/{documentId}` broadcasting Y.js updates.

### 5. Recommendation

Start with Mockup D (enhanced bottom panel) as the MVP — it requires the least layout changes and builds on existing components. Once validated with users, upgrade to Mockup A (side-by-side split) for the full experience. Mockup C (interleaved) is the most innovative but requires significant PDF rendering work (canvas-based section cropping) and a section-splitting UX that adds complexity.

### 6. Accessibility

- Transcript editor must be keyboard-navigable: Tab moves between lines, Enter inserts a new line, Escape exits edit mode.
- Screen reader: `aria-live="polite"` region for save status and presence changes.
- Minimum font size: 16px for transcript text (18px in "senior mode" user preference).
- All toolbar buttons must have `aria-label` attributes.
- Focus management: entering transcribe mode should focus the first editable line.
- Color is never the only cue for user presence — each user's name is always shown alongside their color dot.