# Side-by-Side Split — 5 Variations

Five layout variations of the side-by-side split transcription concept. All share the core idea: PDF scan on one side, editable transcript on the other, with collaborative presence. They differ in information architecture, scroll behavior, and how the connection between scan and text is communicated.

Familienarchiv
Exploration — Round 2
2026-04-04 · @leonievoss
Design space

All five variations place the PDF scan and transcript editor next to each other. The key design decisions that differentiate them are: (1) how scroll positions stay linked between the two panels, (2) where the toolbar and presence indicators live, (3) how paragraph boundaries are expressed, and (4) what happens with the existing bottom panel (metadata, discussion, history).

A

## Side-by-side split variations

PDF left, transcript right. Draggable divider. Each variation explores a different approach to linking the scan with the text and organizing the editing UI.

Document detail → Transcribe mode · WRITE_ALL permission

### V1 — Plain split, synchronized scroll

V1
The simplest version: a clean vertical split. Both panels scroll independently but are linked — scrolling the transcript moves the PDF to the corresponding region and vice versa. A thin turquoise position marker on the PDF's right edge shows what the transcript cursor maps to. The toolbar sits at the top of the transcript panel. Bottom panel stays below the whole split.
50/50 default split, resizable — toolbar in transcript header, bottom panel retained below both panels.
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 Oma Inge · Z. 3–4
Metadaten
Transkription
Diskussion 3
Verlauf

#### V1 · Plain split, synchronized scroll

    /* Simplest variant. Two panels, synced scroll, turquoise position marker on PDF edge.
     * Scroll sync: transcript scroll position (normalized 0-1) maps to PDF scroll position.
     * Bidirectional: scrolling PDF also moves the transcript highlight.
     * Debounced sync (50ms) to avoid jitter. User can break sync by scrolling the "other" panel
     * (a small "re-sync" button appears in the toolbar).
     * Bottom panel survives as-is below the split — Transcription tab shows "editing inline" hint. */

Element | Value | Notes
--- | --- | ---
Split layout
PDF panel | flex:1, min-width:300px | Existing PdfViewer, scroll-synced
Transcript panel | 380px default, min:280px, max:60vw | Resizable via drag handle
Position marker | 3px wide, turquoise, right edge of PDF | Height = (visible transcript lines / total) * PDF height
Scroll sync | Bidirectional, debounced 50ms | "Re-sync" button if user scrolls independently
Toolbar
Height | 32px, bg:surface, border-bottom | Edit/Preview/History + presence right
Presence dots | 5px circles, user-color, name beside | Max 4 visible, +N overflow

### V2 — Split with minimap and comment gutter

V2
Builds on V1 with two additions: a minimap on the far right showing the full transcript at a glance (like VS Code), and a narrow comment gutter between line numbers and text where users can leave line-level comments. The minimap shows user cursors as colored dots and the current viewport as a translucent highlight. The gutter shows small speech-bubble icons on lines with comments.
Split + minimap (32px) + comment gutter (28px) — power-user variant with maximum contextual information.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
HR
Heinrich R.
→
MR
Martha R.
✎ Transkribieren
Liebe Martha,
Dein Heinrich
Bearbeiten
Vorschau
[unleserlich]
Du
Oma Inge
2
+
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 Z. 6, Sp. 34 2 Kommentare offen
Metadaten
Diskussion 3
Verlauf

#### V2 · Split with minimap & comment gutter

    /* Power-user variant. Adds two elements to V1:
     * 1. Minimap (32px, far right): compressed view of all transcript lines as 1px bars.
     *    Viewport highlight (turquoise tint rectangle). User cursor dots (colored, positioned by line).
     *    Click minimap to jump to that position.
     * 2. Comment gutter (28px, between line numbers and text):
     *    Empty circles on uncommented lines (show on hover only).
     *    Filled navy circles with count on lines that have comments.
     *    Click to open a comment popover (reuses existing CommentThread component).
     *    Line-level comments are a new comment type: annotationId=null, lineNumber=N.
     * Bottom panel: Transcription tab removed (now inline). Discussion tab shows document-level comments only. */

Element | Value | Notes
--- | --- | ---
Minimap
Width | 32px, bg:sand, border-left:line | Sticky, does not scroll with transcript
Viewport bar | turquoise 20% opacity, 1px border turquoise | Height proportional to viewport/total ratio
Line bars | 1px height, left:4px right:4px, border opacity .4 | Width proportional to line character count
Cursor dots | 4px circles, user-color, centered horizontally | Positioned at user's line offset
Comment gutter
Width | 28px, bg:page, border-right:line | Icons 14px circles, vertically aligned per line
Has comments | navy bg, white text, font-size:6px count | Click opens popover with CommentThread
Empty | sand bg, border:line, "+" icon | Visible on hover only to reduce noise

### V3 — Paragraph-aware split

V3
The transcript side is organized into named paragraph blocks instead of a flat line list. Each paragraph has a small header ("Anrede", "Hauptteil", "Schluss") and a body area. The currently active paragraph is highlighted with a mint border, and the PDF auto-scrolls to show the corresponding region. Users click a paragraph to focus it. This gives structure to the transcription and makes it easier to divide work ("I'll do paragraph 3, you do paragraph 4").
Paragraph blocks with named sections — structured editor, active paragraph highlighted, PDF region linked.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
Du
Oma Inge
✎ Transkribieren
Liebe Martha,
Dein Heinrich
Bearbeiten
Vorschau
+ Abschnitt
✓ Gespeichert
§ 1 — Anrede ✓
Liebe Martha,
§ 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.
§ 3 — Familie
Du
Die Kinder sollen wissen, dass ich an sie denke. Sag dem kleinen Fritz, er soll auf seine Mutter aufpassen.
§ 4 — Schluss ✓
In ewiger Liebe,
Dein Heinrich
+ Neuen Abschnitt hinzufügen
4 Abschnitte § 3 aktiv Oma Inge · § 2
Metadaten
Diskussion 3
Verlauf

#### V3 · Paragraph-aware split

    /* Structured variant. Transcript is divided into named paragraph blocks.
     * Each paragraph:
     *   - Header: section number + label (editable) + presence indicator + checkmark if reviewed.
     *   - Body: contenteditable div, full paragraph text.
     *   - Active paragraph: mint border + box-shadow glow. PDF auto-scrolls to corresponding region.
     * PDF region highlight: dashed turquoise rectangle over the approximate area matching the active paragraph.
     *   (User can drag to adjust the PDF region mapping — stored as normalized Y coordinates.)
     * "+ Abschnitt" button in toolbar creates a new paragraph block at the end.
     * Paragraphs can be reordered via drag handle in the header.
     * This variant makes task division explicit: "I'll do §2, you do §3."
     * Trade-off: requires users to define paragraph boundaries upfront — less fluid than line-by-line. */

Element | Value | Notes
--- | --- | ---
Paragraph blocks
Block container | border:1px line, radius:6px, overflow:hidden | Active: border-color:mint, box-shadow:0 0 0 1px mint
Header | bg:sand, py:3px px:8px, font:6px/600 uppercase | Section number + label + presence + status
Body | Tinos 16px/1.7, padding:6px 10px, contenteditable | User-color left border when being edited
PDF region | dashed turquoise border, rgba(.05) fill, absolute | Mapped via normalized Y coords per paragraph
Interactions
Add paragraph | Dashed border placeholder at bottom | Also via toolbar "+ Abschnitt" button
Reorder | Drag handle in paragraph header | Draggable within the paragraph list
Rename | Double-click section label to edit | Default labels: Anrede, Hauptteil, Schluss

### V4 — Split with inline discussion threads

V4
Google Docs-style: the transcript is a plain text editor, but users can select a range of text and start a discussion thread on it. Threads appear as highlighted text with a small thread icon in the right margin. Clicking a thread opens a compact comment popover next to the highlighted text. This merges the "transcribe" and "discuss" workflows into one — family members can debate a difficult word ("Is this 'Breslau' or 'Braunau'?") right where it appears.
Split + inline text-anchored discussion threads — select text to start a thread, threads shown as highlights with margin icons.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
✎ Transkribieren
Liebe Martha,
Dein Heinrich
Bearbeiten
Vorschau
[unleserlich]
💬 Diskutieren
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. Sag dem kleinen Fritz,
12
er soll auf seine Mutter aufpassen.
2
1
Diskussion — “Breslau” (Z. 4)
OI
Oma Inge
Ich bin mir sicher, das ist “Breslau” — Heinrich war im Lazarett dort stationiert.
DU
Du
Stimmt, danke! Lass ich so.
✓ Lösen
✓ Gespeichert 12 Zeilen 2 offene Diskussionen
Metadaten
Diskussion 5
Verlauf

#### V4 · Split with inline discussion threads

    /* Google Docs-style inline threads. Key additions:
     * 1. Text-anchored threads: select a word/phrase → click "Diskutieren" → creates an orange-highlighted
     *    range with a numbered circle in the right margin.
     * 2. Click the margin circle to open/close a discussion popover at the bottom of the transcript panel.
     * 3. Thread popover: orange left border, user avatar + name + message, reply input, "Lösen" (resolve) button.
     * 4. Resolved threads: highlight removed, margin icon turns to a checkmark, thread hidden by default.
     * 5. Thread anchors survive text edits via character offset tracking (reanchor on edit).
     * This merges transcription + discussion into one workflow — no need to switch to Discussion tab
     * for transcription-specific questions like "Is this word X or Y?"
     * Thread data model: new table transcription_threads (document_id, anchor_start, anchor_end, resolved). */

Element | Value | Notes
--- | --- | ---
Thread highlights
Active highlight | bg:rgba(orange,.15), border-bottom:2px orange | Inline span wrapping the anchored text range
Margin icon | 16px circle, orange-tint bg, orange border, count | Positioned absolute, aligned to the highlighted line
Resolved | highlight removed, icon → gray checkmark | Toggle "show resolved" in toolbar to review
Thread popover
Container | border-top:line, bg:white, border-left:3px orange | Docked to bottom of transcript panel
Message | 14px avatar + 12px name bold + 13px body | Reuses existing CommentThread message pattern
Reply input | text input + "Lösen" resolve button | Green resolve button right-aligned

### V5 — Multi-page split with page navigator

V5
Optimized for multi-page letters (the common case — many letters are 2-4 pages). The transcript panel has a page navigator strip at the top showing page thumbnails. Clicking a page loads that PDF page on the left and scrolls the transcript to the corresponding section. The transcript is divided by [Seitenwechsel] markers that create clear page boundaries. A progress indicator shows how many pages are fully transcribed.
Split + page navigator strip + per-page progress — designed for 2-8 page letters, page-level task tracking.
Desktop · 1040px
←
Brief von Heinrich an Martha, 14. Mai 1943
Fortschritt
2/3
Du
Oma Inge
✎ Transkribieren
Bearbeiten
Vorschau
[unleserlich]
✓ Gespeichert
✓ Seite 1 15 Zeilen · Oma Inge
Liebe Martha, ich schreibe Dir heute aus dem Lazarett in Breslau...
Seite 2 aktiv
16
Die Versorgung hier ist gut, besser als
17
an der Front. Wir bekommen täglich
18
Suppe und manchmal sogar Brot mit
19
Butter. Der Kamerad im Bett neben mir
20
kommt aus Leipzig und erzählt mir
21
von seiner Familie. Das gibt Trost.
22
23
Hoffentlich ist der kleine Fritz artig.
24
[unleserlich — 2-3 Zeilen]
Seite 3 noch leer
Klicke hier, um mit Seite 3 zu beginnen
Seite 2 von 3 24 Zeilen gesamt Oma Inge · Z. 16–17
Metadaten
Diskussion 3
Verlauf

#### V5 · Multi-page split with page navigator

    /* Optimized for multi-page letters (the common case).
     * Page navigator: strip above PDF with page dots, arrow buttons, "Seite N von M" label.
     *   - Dot colors: green = fully transcribed, navy = active, gray = empty.
     *   - Click dot or arrow to switch PDF page and auto-scroll transcript.
     * Transcript: continuous scroll with [Seitenwechsel] dividers.
     *   - Page 1 divider: green tint, checkmark, collapsed to summary line when not active.
     *   - Active page divider: blue tint, solid border.
     *   - Empty page divider: dashed border, sand bg, "click to start" hint.
     * Progress bar in topbar: Fortschritt N/M, turquoise fill, visible at a glance.
     * Line numbers are global (continuous across pages) so references stay stable.
     * Per-page attribution: status bar shows who transcribed each page.
     * Data model: transcription text uses "---[Seite N]---" markers to delimit pages. */

Element | Value | Notes
--- | --- | ---
Page navigator
Strip | h:22px, bg:white, border-bottom:line, centered | Above PDF area
Page dots | 6px circles: green(done), navy(active), gray(empty) | Click to switch page
Arrows | ← → text buttons, 8px, muted | Keyboard: Ctrl+PgUp/PgDn
Page dividers in transcript
Done page | green-tint bg, checkmark, collapsed summary | Click to expand and re-edit
Active page | blue-tint bg, solid border, "aktiv" label | Lines below are editable
Empty page | sand bg, dashed border, CTA text | "Klicke hier, um zu beginnen"
Progress
Topbar bar | 60px × 4px, border bg, turquoise fill | Fraction label: "2/3" in turquoise bold

## Implementation Guide — Side-by-Side Split Variations

### 1. Variation Comparison

Var. | Key idea | Best for | Complexity
--- | --- | --- | ---
V1 | Plain split, synced scroll | Simplest start, works for all letter types | Low
V2 | + Minimap + comment gutter | Long letters, power users who want overview | Medium
V3 | Paragraph blocks with named sections | Dividing work ("I'll do section 2") | Medium
V4 | + Inline discussion threads on text | Debating unclear words/passages collaboratively | High
V5 | Multi-page navigator + per-page progress | Multi-page letters (2-8 pages), task tracking | Medium

### 2. Recommended Build Order

1. V1 as the foundation — split layout, scroll sync, toolbar, presence, auto-save. This is the MVP.
2. V5 page navigator next — multi-page letters are the common case and V1 alone doesn't address page boundaries well.
3. V4 inline threads — the highest-value UX innovation. Merges transcription and discussion workflows.
4. V2 minimap + gutter — nice-to-have for long documents, can be toggled on/off in user preferences.
5. V3 paragraph blocks — alternative to V1's line-by-line approach. Consider as an opt-in "structured mode" rather than a replacement.

V1 + V5 together form the complete baseline experience. V4 is the most innovative addition.

### 3. Composability

These variations are not mutually exclusive. They can be layered:

- V1 (base split) + V5 (page nav) = most practical combination for real-world use
- V1 + V5 + V4 (threads) = full-featured collaborative transcription
- V1 + V2 (minimap) = power-user mode, togglable via toolbar
- V3 (paragraph mode) is the only one that fundamentally changes the editor — it replaces V1's line-by-line model with block-level editing. Treat as an alternative mode, not an addition.

### 4. Shared Technical Foundation (all variations)

- Split container: New `TranscriptionSplitView.svelte` component wrapping PDF + editor with a draggable divider. Uses CSS `flex` with a resizable right panel.
- State management: `transcribeMode: boolean` on the document detail page. When active, replaces the PDF-only view with the split view. Bottom panel tabs remain visible.
- Scroll sync: `IntersectionObserver` on PDF pages + scroll listener on transcript. Normalized position (0-1) maps between both panels. Debounced 50ms.
- Auto-save: Debounced 2s `PATCH /api/documents/{id}` with `{ transcription: string }`. Save indicator in status bar.
- Presence: WebSocket at `/ws/transcription/{documentId}`. Broadcasts: `{ userId, displayName, color, cursorLine, status: "editing"|"viewing" }`.
- Y.js integration: CRDT for conflict-free concurrent editing. Y.Text document synced via WebSocket provider.

### 5. Mobile Strategy (all variations)

On screens <768px, the split becomes a stacked layout:

- PDF as a 100px fixed-height strip at top with pinch-to-zoom
- Tap PDF strip to expand to 50% viewport height (push transcript down)
- Transcript fills remaining space
- Toolbar collapses to icon-only (Edit/Preview icons, presence dots, save indicator)
- Status bar becomes a single line: save state + active user count

### 6. Accessibility (all variations)

- Split panels: `role="region"` with `aria-label="PDF Scan"` and `aria-label="Transkription"`
- Resize handle: `role="separator"` with `aria-orientation="vertical"`, keyboard-adjustable via arrow keys
- Transcript lines: minimum 16px font (18px in accessibility preference)
- All toolbar buttons: `aria-label` + keyboard shortcut in `title`
- Save status: `aria-live="polite"` region
- Presence changes: `aria-live="polite"` announcements ("Oma Inge hat begonnen zu bearbeiten")
- Focus order: toolbar → transcript editor → status bar. PDF panel is separately focusable for zoom/pan.