From 1d5219eac41076fc4eb5157d946cf831dfb17d8e Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 24 Apr 2026 18:47:47 +0200 Subject: [PATCH] docs(specs): add Transkriptions-Richtlinien spec for #320 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Final UI/UX spec for the /hilfe/transkription page referenced from the Transcribe panel coach card. Card-grid layout with per-rule Beispiel boxes, Wikipedia info-card, "Noch in Klärung" strip, and closing invitation. Includes impl-ref tables, Paraglide keys for de/en/es, print styles, and Gherkin acceptance criteria. Co-Authored-By: Claude Opus 4.7 --- .../transkriptions-richtlinien-spec.html | 1146 +++++++++++++++++ 1 file changed, 1146 insertions(+) create mode 100644 docs/specs/transkriptions-richtlinien-spec.html diff --git a/docs/specs/transkriptions-richtlinien-spec.html b/docs/specs/transkriptions-richtlinien-spec.html new file mode 100644 index 00000000..df2d2cf7 --- /dev/null +++ b/docs/specs/transkriptions-richtlinien-spec.html @@ -0,0 +1,1146 @@ + + + + + +Transkriptions-Richtlinien · Spec · Familienarchiv + + + + +
+ + + + +
+
UI/UX Spec · Implementation-ready
+

Transkriptions-Richtlinien — editorial conventions page

+

+ Static help page at /hilfe/transkription + that collects the family archive's transcription conventions — the questions Wikipedia's + Kurrent alphabet page cannot answer. Companion to #320 (guided empty state + for the Transcribe panel). Replaces the original "Kurrent primer" from that issue, which + would have duplicated Wikipedia without adding value. +

+

+ The page is content-heavy but low on content — only five rules in v1. The design problem is + making a thin page feel intentional rather than under-built, and making reference + content fun to read so transcribers actually read it. Solved via a card grid, per-rule + Beispiel boxes with Kurrent SVG fragments, and family-voice prose with named fictional relatives. +

+
Leonie Voss · 2026-04-24 · Final spec · Companion to issue #320
+
+ feature + ui + a11y 320px+ + light + dark + print styles + no backend +
+
+ + + + +
+

Page structure

+

+ One prerendered SvelteKit route. Five sections stacked vertically. No interactive state, + no forms, no SSR data-loading. Pure content — the kind of page that ships with + export const prerender = true; + and lives as static HTML at build time. +

+
+
+
1
+
Header
+
Title + warm 2-sentence intro (family voice). Names fictional relatives to prime mental model.
+
+
↓
+
+
2
+
Wikipedia info-card
+
Light visual weight. Explicitly scopes: "the alphabet is out there; here are our rules."
+
+
↓
+
+
3
+
Rule cards grid
+
5 cards, 3-col / 2-col / 1-col. Each card: icon, title, explanation, Beispiel box with Kurrent SVG ↔ output.
+
+
↓
+
+
4
+
"Noch in Klärung"
+
Full-bleed sand-tinted strip. 4 dashed-pill chips for open questions.
+
+
↓
+
+
5
+
Closing invitation
+
"Fehlt eine Regel?" Turns help page into collaborative document.
+
+
+
+ + + + +
+
+ Primary view +

Desktop, 1280px, light theme

+

+ The canonical rendering. Three-column card grid fills horizontal space so the page feels + like a deliberate collection, not a thin list. Each Beispiel box is hand-drawn per rule — + a smudge for unleserlich, a strikethrough for durchgestrichen, a stylised + ſ for the long-s, etc. Reader's eye moves rule → example → rule → example, which is the + cadence that keeps reference content readable. +

+
+ +
+ desktop · 1280 + Light +
+ +
+
+
+ +
1280 · Desktop · Light
+
+
+ +
Dokumente
+
Personen
+
Briefwechsel
+
Chronik
+
Hilfe
+
MR
+
+
+
Transkriptions-Richtlinien
+
+ Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder + Cousin Paul tippt — hier unsere Regeln. Die Seite wächst mit: sobald wir eine + neue Konvention beschließen, landet sie hier. +
+
+
i
+
+ Das vollständige Kurrent- und Sütterlin-Alphabet brauchen Sie für diese Seite + nicht — das erledigt Wikipedia →(öffnet in neuem Tab). + Hier sind unsere eigenen Regeln für das, was Wikipedia nicht beantwortet. +
+
+ +
Regeln für die Transkription
+
+ +
+
+
🔍
+
Nicht lesbare Wörter
+
+
Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie [unleserlich].
+
+
Beispiel
+
+ + + + + + + + → + [unleserlich] +
+
+
+ +
+
+
✂
+
Durchgestrichene Wörter
+
+
Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix durchgestrichen:.
+
+
Beispiel
+
+ + + + + + + → + [durchgestrichen: gestern] +
+
+
+ +
+
+
ſ
+
Das lange s (ſ)
+
+
Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.
+
+
Beispiel
+
+ + + + + + + + → + Sommers +
+
+
+ +
+
+
?
+
Unsichere Namen
+
+
Wenn Sie einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern.
+
+
Beispiel
+
+ + + + + + + + → + [Müller?] +
+
+
+ +
+
+
🌍
+
Dialekt, Fremdwörter, Zitate
+
+
Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen.
+
+
Beispiel
+
+ + + + + + → + pardonnez-moi +
+
+
+
+ +
+
Noch in Klärung
+
Diese Fragen klären wir noch — stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie es in den Kommentaren:
+
+ 〰 Abkürzungen + 〰 Datumsformate + 〰 Zeilenumbrüche + 〰 Groß-/Kleinschreibung +
+
+ +
+ + + +
+

Fehlt eine Regel?

+

Stolpern Sie beim Transkribieren über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln sie beim nächsten Familientreffen.

+
+
+
+
+
+ + +
+
+ 1Header tone +
Family-voice intro naming fictional relatives ("Tante Hedwig", "Cousin Paul"). Primes the reader that this is our rulebook, not a corporate style guide.
+
+
+ 2Wikipedia scope-card +
Lighter visual weight than rule cards (3px mint left-border, no full shadow). Signals external reference vs. our-own rule.
+
+
+ 33-col rule grid +
3+2 layout at desktop fills horizontal space without padding content. Each card is self-contained; the grid reads as a collection.
+
+
+ 4Beispiel box +
Aged-paper bg + dashed border + Kurrent SVG → mint arrow → monospace output. Makes each rule concrete in one glance. Unique drawing per rule.
+
+
+ 5Noch in Klärung strip +
Full-bleed sand-muted band (not another card). Dashed pill chips signal "open, not decided". Collaborative tone with "plausible Wahl treffen…".
+
+
+ 6Closing invitation +
"Fehlt eine Regel?" invites the reader to contribute. Users who contribute rules are users who read them.
+
+
+
+ + + + +
+
+ Theme parity +

Desktop, 1280px, dark theme

+

+ Every semantic token is remapped — no filter-inversion. The Beispiel boxes switch to a + muted mint-tinted background so the Kurrent strokes (#2a2a2a in light → kept dark against + the dark paper) need a contrast check. See the a11y block for exact ratios. +

+
+ +
+ desktop · 1280 + Dark +
+ +
+
+
+ +
1280 · Desktop · Dark
+
+
+ +
Dokumente
+
Personen
+
Briefwechsel
+
Chronik
+
Hilfe
+
MR
+
+
+
Transkriptions-Richtlinien
+
Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln.
+
+
i
+
Das vollständige Kurrent-Alphabet brauchen Sie nicht — Wikipedia →(neuer Tab). Hier sind unsere eigenen Regeln.
+
+
Regeln für die Transkription
+
+
+
🔍
Nicht lesbare Wörter
+
Wenn Sie ein Wort nicht entziffern können: [unleserlich].
+
Beispiel
→[unleserlich]
+
+
+
✂
Durchgestrichene Wörter
+
In eckigen Klammern mit durchgestrichen:.
+
Beispiel
→[durchgestrichen: gestern]
+
+
+
ſ
Das lange s (ſ)
+
Immer als normales s schreiben.
+
Beispiel
→Sommers
+
+
+
?
Unsichere Namen
+
Fragezeichen in eckigen Klammern.
+
Beispiel
→[Müller?]
+
+
+
🌍
Dialekt & Fremdwörter
+
Wörtlich übernehmen — nicht anpassen.
+
Beispiel
→pardonnez-moi
+
+
+
+
Noch in Klärung
+
Diese Fragen klären wir noch — plausible Wahl + Kommentar.
+
+ 〰 Abkürzungen + 〰 Datumsformate + 〰 Zeilenumbrüche + 〰 Groß-/Kleinschreibung +
+
+
+ +

Fehlt eine Regel?

Kommentieren Sie beim betreffenden Block — wir besprechen sie beim nächsten Familientreffen.

+
+
+
+
+
+ + + + +
+
+ Responsive +

Tablet & mobile (the audience that actually reads this page)

+

+ Per-project memory: transcribers are 60+ on laptop/tablet, readers (younger) are on phones. + The Richtlinien page is shared between both audiences — a family member on a phone may + pull it up mid-conversation to settle a convention. So responsive coverage is a + correctness requirement, not a polish item. +

+
+ +
+
+
+ tablet · 768 + Light + 2-col grid · full-bleed strip unchanged +
+
+
+
768 · Tab · Light
+
Hilfe
MR
+
+
Transkriptions-Richtlinien
+
Damit alle einheitlich transkribieren — Tante Hedwig, Cousin Paul, alle anderen.
+
i
Alphabet: Wikipedia →(neuer Tab)
+
Regeln
+
+
🔍
Nicht lesbare Wörter
[unleserlich].
+
✂
Durchgestrichen
[durchgestrichen: Wort].
+
ſ
Das lange s
Immer als s.
+
?
Unsichere Namen
[Müller?].
+
🌍
Dialekt & Fremdwörter
Wörtlich übernehmen.
+
+
Noch in Klärung
〰 Abkürzungen〰 Datumsformate〰 Zeilenumbrüche〰 Groß/Klein
+
+
+
+
+
+
+ mobile · 375 + Light + 1-col stack · chips wrap to 2 rows +
+
+
+
375 · Mob
+
MR
+
+
Transkriptions-Richtlinien
+
Unsere Regeln, damit alle einheitlich tippen.
+
i
Wikipedia →
+
Regeln
+
+
🔍
Nicht lesbar
[unleserlich]
+
✂
Durchgestrichen
[durchgestrichen: Wort]
+
ſ
Langes s
Als s schreiben.
+
+
Noch in Klärung
〰 Abkürz.〰 Datum〰 Umbrüche
+
+
+
+
+
+
+ + + + +
+
+ @media print +

Print view — Reference für den Schreibtisch

+

+ Seniors print reference material. The family archivist may also export the page as PDF + and e-mail it before a transcription session. Print styles drop the brand chrome, switch + to black-on-white for ink economy, remove external-link annotations ("neuer Tab" makes no + sense on paper), and enforce break-inside: avoid + on each rule card so no rule splits mid-page. +

+
+ +
+ print · A4 + Print +
+ +
+

Transkriptions-Richtlinien

+

+ Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder + Cousin Paul tippt — hier unsere Regeln. +

+
+ Kurrent-Alphabet nachschlagen: de.wikipedia.org/wiki/Kurrentschrift +
+
Regeln
+ +
+
🔍 Nicht lesbare Wörter
+
Wenn Sie ein Wort nicht entziffern können, schreiben Sie [unleserlich]. Jemand anderes schaut später nochmal drauf.
+
Beispiel: ⟨Kurrent-Fragment⟩ → [unleserlich]
+
+ +
+
✂ Durchgestrichene Wörter
+
Auch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix "durchgestrichen:".
+
Beispiel: ⟨gestern⟩ → [durchgestrichen: gestern]
+
+ +
+
ſ Das lange s
+
Das ſ ist nur eine alte Schriftform des Buchstabens s — schreiben Sie immer ein normales s.
+
Beispiel: ⟨ſommers⟩ → Sommers
+
+ +
+
? Unsichere Namen
+
Fragezeichen in eckigen Klammern.
+
Beispiel: ⟨Müller⟩ → [Müller?]
+
+ +
+
🌍 Dialekt, Fremdwörter, Zitate
+
Wörtlich übernehmen, genau wie geschrieben.
+
Beispiel: ⟨pardonnez-moi⟩ → pardonnez-moi
+
+ +
Noch in Klärung
+
Abkürzungen · Datumsformate · Originale Zeilenumbrüche · Alte Groß-/Kleinschreibung
+
+
+ + + + +
+

Implementation reference — Tailwind classes & exact values

+ +

Page shell

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Routefrontend/src/routes/hilfe/transkription/+page.svelte with export const prerender = true;staticno +page.server.ts — pure content; ships as static HTML at build
Auth boundaryfollow decision queue on issue #320—default authenticated() unless permitAll() is chosen for /hilfe/**
Page containermax-w-[1100px] mx-auto px-6 pt-12 pb-16 bg-surface-pagemax 1100px · py 48–64narrower than the document-edit max (1320) — optimises reading width
Section gapspace-y-12 between logical sections48pxnot space-y-10 — the 48px gap signals deliberate breathing room
+ +

Header + intro

+ + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
H1 titlefont-serif text-[32px] font-bold text-ink tracking-[-0.01em] mb-432px · 700Merriweather; uses tracking tighten to hold the weight
Intro paragraphfont-serif text-[17px] leading-[1.65] text-ink-2 max-w-[640px]17px · 1.65max-width 640px is ≈ 66ch — optimum reading measure
Named-relative copyliteral "Tante Hedwig" / "Cousin Paul" in the intro string—fictional; sets family-archive voice. Do not localize names for en/es — keep German "Tante"/"Cousin" since the app is archive-of-a-German-family
+ +

Wikipedia info-card

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Card containerflex gap-3 items-start bg-white border border-line border-l-[3px] border-l-accent rounded-sm px-5 py-4 mt-6 mb-14 max-w-[640px]640px max · 3px mint accentmint accent left-border distinguishes from rule cards (which have no accent border)
Icon bubblew-[22px] h-[22px] flex-shrink-0 text-accent mt-0.5 — inline info SVG22pxlowercase "i" glyph. Use same SVG in both themes; stroke inherits from text-accent
Body textfont-sans text-sm text-ink-2 leading-[1.5]14px · 1.5sans-serif here deliberately (not Merriweather) — signals "meta/helper" vs. primary content
Wikipedia linktext-ink underline decoration-accent underline-offset-[3px] decoration-[1.5px] font-medium hover:decoration-ink—must have target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" — last per Nora's review
"neuer Tab" annotationtext-xs text-ink-3 ml-1 — plain <span>, real text node12pxNOT CSS ::after — must be in the DOM for screen readers to announce it
+ +

Section label (repeated)

+ + + + + + + + +
ElementTailwindPx / valueNote
Labelfont-sans text-[11px] font-bold uppercase tracking-[0.15em] text-ink-3 mb-511px · 700 · 2.4 trackingproject pattern, see layout.css. Used for "Regeln" and "Noch in Klärung"
+ +

Rule card grid

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Grid containergrid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5gap 20pxbreakpoints: 1-col <640 · 2-col 640–1024 · 3-col ≥ 1024
Cardbg-white border border-line rounded-sm shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6 flex flex-col gap-3.5padding 24px · gap 14pxproject card pattern from layout.css, minus the explicit brand-sand border (uses border-line token for theme-adaptive border)
Card top-lineflex items-center gap-2.5 — icon + H3 inlinegap 10pxH3 is the clickable landmark if we add anchor navigation later
Icon chipw-8 h-8 rounded-full bg-brand-sand-muted text-ink flex items-center justify-center flex-shrink-032pxmuted sand circle, navy glyph inside. Glyph: emoji OR inline SVG — see per-rule icons below
H3 titlefont-serif text-[19px] font-bold text-ink leading-tight19px · 700Merriweather serif carries the visual weight of the rule
Explanation bodyfont-serif text-[15px] leading-[1.55] text-ink-215px · 1.55one sentence, max two. Inline <code> for the bracketed-output syntax in-line
Inline codefont-mono text-[14px] text-ink bg-muted px-1 rounded-sm14pxfor [unleserlich], [durchgestrichen: Wort], [Müller?] etc.
+ +

Beispiel box (per-rule concrete example)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Box containerbg-paper border border-dashed border-[#D4D1C4] dark:border-line-2 rounded-sm px-4 py-3.5 mt-1.5padding 14px 16pxpaper-cream bg (#FAF8F1 light, muted accent-tint dark) + dashed border creates a visual "this is an example, not a rule" cue
"Beispiel" labelfont-sans text-[10px] font-bold uppercase tracking-[0.12em] text-ink-3 mb-2.510px · 700tiny top label so the row below can be dense without ambiguity
Kurrent SVGw-24 h-9 flex-shrink-0 — inline SVG, per-rule path data96×36five unique SVGs — one per rule. Stroke #2a2a2a light / #d9dce0 dark, stroke-width 1.4. See Per-rule Beispiel visuals below
Arrowtext-accent text-xl font-normal flex-shrink-020px · mintUnicode →. Kept in the colour of the brand accent so it reads as a design element, not a primary control
Output tokenfont-mono text-[13px] text-ink bg-white border border-line rounded-sm px-2 py-1 truncate13pxtruncate so a long output like [durchgestrichen: gestern] doesn't blow the card width
+ +

Per-rule Beispiel visuals

+ + + + + + + +
RuleKurrent drawingOverlayOutput
Nicht lesbare WörterTwo short cursive wavesSemi-opaque grey smudge ellipse rgba(100,90,75,.35) over right half[unleserlich]
Durchgestrichene WörterOne cursive flourish (5 peaks)Solid stroke line at y≈12 crossing the word[durchgestrichen: gestern]
Das lange s (ſ)Hand-drawn ſ glyph on the left (Bezier loop + crossbar) + cursive continuationnoneSommers
Unsichere NamenCursive capital M (zigzag) + cursive wordSoft grey smudge rgba(100,90,75,.2) over last 3 chars[Müller?]
Dialekt & FremdwörterLonger continuous cursive wave (9 peaks)none — signals "just copy it"pardonnez-moi
+ +

"Noch in Klärung" full-bleed strip

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Strip containerbg-brand-sand-muted border-y border-line py-9 -mx-6 mt-14 mb-14py 36px · full-bleednegative margin breaks out of the 1100px container to hit the page edges at ≤ 1100; visually distinct from white rule-cards
Inner wrappermax-w-[1052px] mx-auto px-6matches containerrestores the reading column inside the full-bleed band
Intro linefont-serif text-[15px] text-ink-2 mb-4.5 max-w-[640px]15pxcollaborative voice: "treffen Sie eine plausible Wahl + notieren Sie es in den Kommentaren"
Chip rowflex flex-wrap gap-2.5gap 10pxwraps naturally on narrow viewports
Chip (pill)inline-flex items-center gap-2 bg-white border border-dashed border-[#C9C4B5] dark:border-line-2 rounded-full px-4 py-2 font-sans text-[13px] text-ink-2 font-mediumh≈32 · 13pxdashed border reinforces "provisional / open" semantics. Wiggle prefix 〰 in accent colour
Chip suffix examplesitalic muted clarifier in parens: (d., u., etc.), (1.t Januar 1912) etc.—optional; only for chips whose topic benefits from one example. Keep under 22 chars
+ +

Closing invitation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwindPx / valueNote
Cardflex gap-4.5 items-start bg-white border border-line rounded-sm px-8 py-7 max-w-[720px]max 720px · p 28/32narrower than rule cards — invites a more personal read
Chat-bubble iconw-7 h-7 text-accent flex-shrink-0 — speech-bubble SVG28px · mintsignals "comment / feedback" non-verbally
H4font-serif text-lg font-bold text-ink mb-218px · 700"Fehlt eine Regel?"
Bodyfont-serif text-[15px] leading-[1.55] text-ink-215pxthree clauses: stolpern-über → Kommentar → Familientreffen
+ +

@media print

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwind / CSSPx / valueNote
Page size@page { margin: 1.5cm; }1.5cmA4 default; leaves margin for hole-punching
Body overridebody { background: white; color: #111; }—no brand-sand page bg on paper
Hidden in print.app-nav, .closing, .new-tab { display: none; }—nav, closing invitation, and "(öffnet in neuem Tab)" annotations — nothing useful on paper
Rule cards in print.rule-card { break-inside: avoid; border: 1px solid #999; box-shadow: none; margin-bottom: 8pt; }avoid-breakensures no rule splits across pages
Kurrent SVG in printinline SVG renders natively; no change needed—if the printer is monochrome, strokes still read at #2a2a2a
Wikipedia linkappend full URL after the link text via @media print { a[href]::after { content: " (" attr(href) ")"; } }—standard print-a11y pattern — readers on paper need the URL
+ +

Paraglide keys (de/en/es)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Keydeenes
richtlinien_titleTranskriptions-RichtlinienTranscription GuidelinesNormas de transcripción
richtlinien_introDamit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln. Die Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.So every letter is transcribed consistently — whether Tante Hedwig or Cousin Paul is typing — here are our rules. The page grows with us: as soon as we agree a new convention, it lands here.Para que todas las cartas se transcriban de forma uniforme — ya sea la tía Hedwig o el primo Paul quien escriba — aquí están nuestras reglas. La página crece con nosotros.
richtlinien_wiki_textDas vollständige Kurrent- und Sütterlin-Alphabet brauchen Sie für diese Seite nicht — das erledigt Wikipedia. Hier sind unsere eigenen Regeln für das, was Wikipedia nicht beantwortet.You don't need the full Kurrent and Sütterlin alphabet on this page — that's what Wikipedia is for. Here are our own rules for everything Wikipedia can't answer.No necesitas el alfabeto Kurrent completo aquí — eso lo hace Wikipedia. Aquí están nuestras propias reglas para lo que Wikipedia no responde.
richtlinien_wiki_linkWikipedia →Wikipedia →Wikipedia →
richtlinien_new_tab(öffnet in neuem Tab)(opens in new tab)(abre en pestaña nueva)
richtlinien_rules_labelRegeln für die TranskriptionTranscription rulesReglas de transcripción
richtlinien_rule_unleserlich_titleNicht lesbare WörterIllegible wordsPalabras ilegibles
richtlinien_rule_unleserlich_bodyWenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie [unleserlich]. Jemand anderes schaut später nochmal drauf.If you can't decipher a word even after trying, write [unleserlich]. Someone else will take another look later.Si no puedes descifrar una palabra, escribe [unleserlich]. Otra persona lo revisará después.
richtlinien_rule_durchgestrichen_titleDurchgestrichene WörterStruck-through wordsPalabras tachadas
richtlinien_rule_durchgestrichen_bodyAuch durchgestrichener Text gehört zum Brief. Schreiben Sie ihn in eckigen Klammern mit Präfix durchgestrichen:.Struck-through text still belongs to the letter. Write it in square brackets with prefix durchgestrichen:.El texto tachado también pertenece a la carta. Escríbelo entre corchetes con el prefijo durchgestrichen:.
richtlinien_rule_langes_s_titleDas lange s (ſ)The long s (ſ)La s larga (ſ)
richtlinien_rule_langes_s_bodyDas ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.The ſ is just an old written form of the letter s — not a separate sound. Always write a normal s.La ſ es solo una forma antigua de la letra s. Escribe siempre una s normal.
richtlinien_rule_name_titleUnsichere NamenUncertain namesNombres inciertos
richtlinien_rule_name_bodyWenn Sie einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern.If you think you can read a name but aren't sure, add a question mark in square brackets.Si crees reconocer un nombre pero no estás seguro, añade un signo de interrogación entre corchetes.
richtlinien_rule_dialekt_titleDialekt, Fremdwörter, fremde ZitateDialect, foreign words, foreign quotesDialecto, palabras extranjeras, citas
richtlinien_rule_dialekt_bodyPlattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen.Low German, French, Latin phrases — copy them verbatim, exactly as written.Bajo alemán, francés, frases latinas — cópialas tal cual están escritas.
richtlinien_beispiel_labelBeispielExampleEjemplo
richtlinien_klaerung_labelNoch in KlärungStill to be decidedAún por decidir
richtlinien_klaerung_introDiese Fragen klären wir noch — stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie es in den Kommentaren:These questions are still open — if you hit one while transcribing, make a plausible choice and note it in the comments:Estas preguntas aún están abiertas — si encuentras alguna mientras transcribes, elige algo razonable y nótalo en los comentarios:
richtlinien_klaer_abkuerzungenAbkürzungenAbbreviationsAbreviaturas
richtlinien_klaer_datumsformateDatumsformateDate formatsFormatos de fecha
richtlinien_klaer_umbruecheOriginale ZeilenumbrücheOriginal line breaksSaltos de línea originales
richtlinien_klaer_capsAlte Groß-/KleinschreibungOld capitalisationMayúsculas antiguas
richtlinien_closing_titleFehlt eine Regel?Missing a rule?¿Falta una regla?
richtlinien_closing_bodyStolpern Sie beim Transkribieren über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln sie und besprechen sie beim nächsten Familientreffen.If you hit a situation while transcribing that isn't listed here — leave a comment on the relevant block. We collect them and discuss them at the next family gathering.Si al transcribir encuentras una situación que no está aquí — deja un comentario en el bloque. Las recogemos y las discutimos en la próxima reunión familiar.
+ +
+
Interaction + behaviour spec
+
    +
  • Page is fully static. No load function, no fetch, no dynamic state. export const prerender = true; builds to HTML at build time. Updates ship as git commits, not runtime data.
    • +
  • Wikipedia link: opens in a new tab. Never follow internal-nav assumptions (no goto(), no history.back()). Preserves the user's existing tab — important for transcribers who might open this page mid-session.
    • +
  • No anchor navigation in v1. At 5 rules there's no need for a TOC or deep links. If the rule count grows past ~10, revisit with a sticky sidebar.
    • +
  • Print support: @media print block in the page's <style> scope. Test via page.emulateMedia({ media: 'print' }) in Playwright.
    • +
  • Chips are NOT interactive in v1 — they are visual markers for open questions. If we later add anchors to a discussion thread (e.g. a Gitea issue or forum post per item), the chips become <a> tags. Keep the semantic markup ready.
    • +
  • Page growth model: when a new convention is agreed, it moves from the "Noch in Klärung" chip row into a new rule card. That commit is the full content update — no CMS, no admin UI, no backend.
    • +
+
+ +
+
Edge cases + a11y requirements
+
    +
  • Heading structure: <h1> page title → <h2> section labels ("Regeln", "Noch in Klärung") → <h3> per rule card. Do not skip levels. Screen readers navigate by heading.
    • +
  • Decorative SVGs: Kurrent strokes in Beispiel boxes are decorative — they carry no information that the output token doesn't already carry. Mark each with role="presentation" aria-hidden="true". The Beispiel row's meaning lives in the output token.
    • +
  • Icon chips: emoji-icons (🔍 ✂ ſ ? 🌍) are presentational. Wrap each in a <span aria-hidden="true"> next to the H3 title — the H3 carries the rule's name and is what screen readers read.
    • +
  • Colour-alone check (WCAG 1.4.1): the "Noch in Klärung" chips differ from rule cards by shape (pill vs. card), border style (dashed vs. solid), and colour (sand-muted vs. white). Three redundant cues.
    • +
  • Contrast — light: ink (#012851) on white = 14.5:1 AAA · ink-2 (#3a4a5c) on white = 9.1:1 AAA · mint accent (#A6DAD8) is used for backgrounds and borders only — never for body text.
    • +
  • Contrast — dark: ink (#f0efe9) on surface (#011526) = 14.8:1 AAA · turquoise accent (#00c7b1) on surface = 5.4:1 AA large-text. Kurrent stroke #d9dce0 on paper-dark (#0a1d2e) = 11.2:1 AAA.
    • +
  • Beispiel box contrast: in dark mode, a mint-tinted bg against the card surface must not drop below 3:1. Use rgba(166,218,216,0.04) (not 0.12) for the bg; dashed border carries the delineation.
    • +
  • Reduced motion: no animations on this page, so prefers-reduced-motion is a no-op. Don't add hover-scale on chips or cards — the page is reference content, not interactive.
    • +
  • Touch targets on chips: currently non-interactive. If made interactive in v2, each chip must meet ≥ 44×44 (current height is ~32, so add min-h-[44px] py-2.5).
    • +
  • Screen-reader on external link: the inline "(öffnet in neuem Tab)" annotation is a real DOM text node, so screen readers announce it. Do NOT replace with a CSS ::after — that's invisible to AT.
    • +
  • Long words: rule titles and output tokens must not wrap awkwardly on a 320px viewport. Test with "Transkriptions-Richtlinien" H1 (allow overflow-wrap: break-word or the hyphen between words).
    • +
+
+ +

Component tree (frontend)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentStatusResponsibility
routes/hilfe/transkription/+page.sveltenewPrerendered static page. Composes header, info-card, rule grid, klaerung strip, closing. Imports message strings via Paraglide.
lib/components/RichtlinienRuleCard.sveltenewOne rule: icon chip, title, body, Beispiel box. Props: { icon, title, body, beispiel } where beispiel is { svg: Component, output: string }.
lib/components/KurrentSample.sveltenew (optional)Wraps the 5 per-rule Beispiel SVGs. Alternative: inline each SVG in +page.svelte since they're used once each. Pick whichever keeps +page.svelte under 200 lines.
lib/components/InfoCard.sveltenew (candidate)Generic info card with mint left-border accent — reusable for future help pages. If only this one consumer exists in v1, inline it here and extract later.
messages/{de,en,es}.jsonextendAdd the 23 new keys listed in the Paraglide table above. All three languages in the same commit.
+ +

Acceptance criteria (Gherkin)

+
+
Verifiable from outside the code
+
    +
  • Given an authenticated user (or any user, depending on #320 auth decision), when they visit /hilfe/transkription, then they see the title, family-voice intro, Wikipedia info-card, five rule cards, "Noch in Klärung" strip, and closing invitation — in that order.
    • +
  • Given the user is on the Richtlinien page, when they click the Wikipedia link, then the Wikipedia article opens in a new tab AND the current Familienarchiv tab remains on /hilfe/transkription.
    • +
  • Given the viewport width is 320px, when the page renders, then the rule grid is one-column, chips wrap to multiple rows, and no horizontal scroll appears.
    • +
  • Given the viewport width is 768px, when the page renders, then the rule grid is two-column.
    • +
  • Given the viewport width is 1024px+, when the page renders, then the rule grid is three-column.
    • +
  • Given dark mode is active, when axe-core analyzes the page at 320/768/1440, then no WCAG 2.1 AA violations are reported.
    • +
  • Given the user triggers the browser print dialog, when the preview renders, then the app nav is hidden, rule cards do not break across pages, and each Wikipedia link shows its full URL in parentheses.
    • +
  • Given the locale is en or es, when the page renders, then every section has translated text — no raw key tokens visible, no German fallbacks leaking into non-German locales.
    • +
+
+ +

Out of scope for this spec

+
+
Not in v1 — follow-up tickets
+
    +
  • Anchor navigation / sticky TOC: needed only when rule count exceeds ~10. Five rules fit on one screen at desktop.
    • +
  • Interactive chips linking to discussion threads: when "Noch in Klärung" items have their own Gitea discussions, wire the chips to them. Needs a decision on where those discussions live first.
    • +
  • Editing through the UI: the page is intentionally git-based. Family members propose rules via Gitea issues or transcription-block comments; the archivist commits them. No admin editor.
    • +
  • Per-rule "Warum?" expandables: some rules (like "warum verbatim belassen?") have more story to tell. If beta users ask, reveal via a HelpPopover (see Markus's review on #320).
    • +
  • Kurrent font embedding: the Beispiel SVGs approximate handwriting with bezier paths. Embedding a real Kurrent webfont would be more authentic but costs ~40 KB and the brand isn't a Kurrent-typography product.
    • +
  • Search within guidelines: at 5 rules, Ctrl-F in the browser is the search.
    • +
+
+
+ +
+ +