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.
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).
PDF left, transcript right. Draggable divider. Each variation explores a different approach to linking the scan with the text and organizing the editing UI.
/* 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 |
/* 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 |
/* 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 |
/* 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 |
/* 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 |
| 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 |
V1 + V5 together form the complete baseline experience. V4 is the most innovative addition.
These variations are not mutually exclusive. They can be layered:
TranscriptionSplitView.svelte component wrapping PDF + editor with a draggable divider. Uses CSS flex with a resizable right panel.transcribeMode: boolean on the document detail page. When active, replaces the PDF-only view with the split view. Bottom panel tabs remain visible.IntersectionObserver on PDF pages + scroll listener on transcript. Normalized position (0-1) maps between both panels. Debounced 50ms.PATCH /api/documents/{id} with { transcription: string }. Save indicator in status bar./ws/transcription/{documentId}. Broadcasts: { userId, displayName, color, cursorLine, status: "editing"|"viewing" }.On screens <768px, the split becomes a stacked layout:
role="region" with aria-label="PDF Scan" and aria-label="Transkription"role="separator" with aria-orientation="vertical", keyboard-adjustable via arrow keysaria-label + keyboard shortcut in titlearia-live="polite" regionaria-live="polite" announcements ("Oma Inge hat begonnen zu bearbeiten")