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.
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.
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.
[unleserlich].durchgestrichen:.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.
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.
[unleserlich].durchgestrichen:.Kommentieren Sie beim betreffenden Block — wir besprechen sie beim nächsten Familientreffen.
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.
[unleserlich].[durchgestrichen: Wort].[Müller?].[unleserlich][durchgestrichen: Wort]
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.
Damit alle Briefe einheitlich transkribiert werden — egal ob Tante Hedwig oder Cousin Paul tippt — hier unsere Regeln.
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Route | frontend/src/routes/hilfe/transkription/+page.svelte with export const prerender = true; |
static | no +page.server.ts — pure content; ships as static HTML at build |
| Auth boundary | follow decision queue on issue #320 | — | default authenticated() unless permitAll() is chosen for /hilfe/** |
| Page container | max-w-[1100px] mx-auto px-6 pt-12 pb-16 bg-surface-page |
max 1100px · py 48–64 | narrower than the document-edit max (1320) — optimises reading width |
| Section gap | space-y-12 between logical sections |
48px | not space-y-10 — the 48px gap signals deliberate breathing room |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| H1 title | font-serif text-[32px] font-bold text-ink tracking-[-0.01em] mb-4 |
32px · 700 | Merriweather; uses tracking tighten to hold the weight |
| Intro paragraph | font-serif text-[17px] leading-[1.65] text-ink-2 max-w-[640px] |
17px · 1.65 | max-width 640px is ≈ 66ch — optimum reading measure |
| Named-relative copy | literal "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 |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Card container | flex 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 accent | mint accent left-border distinguishes from rule cards (which have no accent border) |
| Icon bubble | w-[22px] h-[22px] flex-shrink-0 text-accent mt-0.5 — inline info SVG |
22px | lowercase "i" glyph. Use same SVG in both themes; stroke inherits from text-accent |
| Body text | font-sans text-sm text-ink-2 leading-[1.5] |
14px · 1.5 | sans-serif here deliberately (not Merriweather) — signals "meta/helper" vs. primary content |
| Wikipedia link | text-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" annotation | text-xs text-ink-3 ml-1 — plain <span>, real text node |
12px | NOT CSS ::after — must be in the DOM for screen readers to announce it |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Label | font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-ink-3 mb-5 |
11px · 700 · 2.4 tracking | project pattern, see layout.css. Used for "Regeln" and "Noch in Klärung" |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Grid container | grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 |
gap 20px | breakpoints: 1-col <640 · 2-col 640–1024 · 3-col ≥ 1024 |
| Card | bg-white border border-line rounded-sm shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6 flex flex-col gap-3.5 |
padding 24px · gap 14px | project card pattern from layout.css, minus the explicit brand-sand border (uses border-line token for theme-adaptive border) |
| Card top-line | flex items-center gap-2.5 — icon + H3 inline |
gap 10px | H3 is the clickable landmark if we add anchor navigation later |
| Icon chip | w-8 h-8 rounded-full bg-brand-sand-muted text-ink flex items-center justify-center flex-shrink-0 |
32px | muted sand circle, navy glyph inside. Glyph: emoji OR inline SVG — see per-rule icons below |
| H3 title | font-serif text-[19px] font-bold text-ink leading-tight |
19px · 700 | Merriweather serif carries the visual weight of the rule |
| Explanation body | font-serif text-[15px] leading-[1.55] text-ink-2 |
15px · 1.55 | one sentence, max two. Inline <code> for the bracketed-output syntax in-line |
| Inline code | font-mono text-[14px] text-ink bg-muted px-1 rounded-sm |
14px | for [unleserlich], [durchgestrichen: Wort], [Müller?] etc. |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Box container | bg-paper border border-dashed border-[#D4D1C4] dark:border-line-2 rounded-sm px-4 py-3.5 mt-1.5 |
padding 14px 16px | paper-cream bg (#FAF8F1 light, muted accent-tint dark) + dashed border creates a visual "this is an example, not a rule" cue |
| "Beispiel" label | font-sans text-[10px] font-bold uppercase tracking-[0.12em] text-ink-3 mb-2.5 |
10px · 700 | tiny top label so the row below can be dense without ambiguity |
| Kurrent SVG | w-24 h-9 flex-shrink-0 — inline SVG, per-rule path data |
96×36 | five unique SVGs — one per rule. Stroke #2a2a2a light / #d9dce0 dark, stroke-width 1.4. See Per-rule Beispiel visuals below |
| Arrow | text-accent text-xl font-normal flex-shrink-0 |
20px · mint | Unicode →. Kept in the colour of the brand accent so it reads as a design element, not a primary control |
| Output token | font-mono text-[13px] text-ink bg-white border border-line rounded-sm px-2 py-1 truncate |
13px | truncate so a long output like [durchgestrichen: gestern] doesn't blow the card width |
| Rule | Kurrent drawing | Overlay | Output |
|---|---|---|---|
| Nicht lesbare Wörter | Two short cursive waves | Semi-opaque grey smudge ellipse rgba(100,90,75,.35) over right half | [unleserlich] |
| Durchgestrichene Wörter | One 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 continuation | none | Sommers |
| Unsichere Namen | Cursive capital M (zigzag) + cursive word | Soft grey smudge rgba(100,90,75,.2) over last 3 chars | [Müller?] |
| Dialekt & Fremdwörter | Longer continuous cursive wave (9 peaks) | none — signals "just copy it" | pardonnez-moi |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Strip container | bg-brand-sand-muted border-y border-line py-9 -mx-6 mt-14 mb-14 |
py 36px · full-bleed | negative margin breaks out of the 1100px container to hit the page edges at ≤ 1100; visually distinct from white rule-cards |
| Inner wrapper | max-w-[1052px] mx-auto px-6 |
matches container | restores the reading column inside the full-bleed band |
| Intro line | font-serif text-[15px] text-ink-2 mb-4.5 max-w-[640px] |
15px | collaborative voice: "treffen Sie eine plausible Wahl + notieren Sie es in den Kommentaren" |
| Chip row | flex flex-wrap gap-2.5 |
gap 10px | wraps 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-medium |
h≈32 · 13px | dashed border reinforces "provisional / open" semantics. Wiggle prefix 〰 in accent colour |
| Chip suffix examples | italic 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 |
| Element | Tailwind | Px / value | Note |
|---|---|---|---|
| Card | flex gap-4.5 items-start bg-white border border-line rounded-sm px-8 py-7 max-w-[720px] |
max 720px · p 28/32 | narrower than rule cards — invites a more personal read |
| Chat-bubble icon | w-7 h-7 text-accent flex-shrink-0 — speech-bubble SVG |
28px · mint | signals "comment / feedback" non-verbally |
| H4 | font-serif text-lg font-bold text-ink mb-2 |
18px · 700 | "Fehlt eine Regel?" |
| Body | font-serif text-[15px] leading-[1.55] text-ink-2 |
15px | three clauses: stolpern-über → Kommentar → Familientreffen |
| Element | Tailwind / CSS | Px / value | Note |
|---|---|---|---|
| Page size | @page { margin: 1.5cm; } |
1.5cm | A4 default; leaves margin for hole-punching |
| Body override | body { 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-break | ensures no rule splits across pages |
| Kurrent SVG in print | inline SVG renders natively; no change needed | — | if the printer is monochrome, strokes still read at #2a2a2a |
| Wikipedia link | append 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 |
| Key | de | en | es |
|---|---|---|---|
| richtlinien_title | Transkriptions-Richtlinien | Transcription Guidelines | Normas de transcripción |
| richtlinien_intro | 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. | 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_text | Das 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_link | Wikipedia → | Wikipedia → | Wikipedia → |
| richtlinien_new_tab | (öffnet in neuem Tab) | (opens in new tab) | (abre en pestaña nueva) |
| richtlinien_rules_label | Regeln für die Transkription | Transcription rules | Reglas de transcripción |
| richtlinien_rule_unleserlich_title | Nicht lesbare Wörter | Illegible words | Palabras ilegibles |
| richtlinien_rule_unleserlich_body | Wenn 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_title | Durchgestrichene Wörter | Struck-through words | Palabras tachadas |
| richtlinien_rule_durchgestrichen_body | Auch 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_title | Das lange s (ſ) | The long s (ſ) | La s larga (ſ) |
| richtlinien_rule_langes_s_body | Das ſ 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_title | Unsichere Namen | Uncertain names | Nombres inciertos |
| richtlinien_rule_name_body | Wenn 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_title | Dialekt, Fremdwörter, fremde Zitate | Dialect, foreign words, foreign quotes | Dialecto, palabras extranjeras, citas |
| richtlinien_rule_dialekt_body | Plattdeutsch, 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_label | Beispiel | Example | Ejemplo |
| richtlinien_klaerung_label | Noch in Klärung | Still to be decided | Aún por decidir |
| richtlinien_klaerung_intro | Diese 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_abkuerzungen | Abkürzungen | Abbreviations | Abreviaturas |
| richtlinien_klaer_datumsformate | Datumsformate | Date formats | Formatos de fecha |
| richtlinien_klaer_umbrueche | Originale Zeilenumbrüche | Original line breaks | Saltos de línea originales |
| richtlinien_klaer_caps | Alte Groß-/Kleinschreibung | Old capitalisation | Mayúsculas antiguas |
| richtlinien_closing_title | Fehlt eine Regel? | Missing a rule? | ¿Falta una regla? |
| richtlinien_closing_body | Stolpern 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. |
export const prerender = true; builds to HTML at build time. Updates ship as git commits, not runtime data.goto(), no history.back()). Preserves the user's existing tab — important for transcribers who might open this page mid-session.@media print block in the page's <style> scope. Test via page.emulateMedia({ media: 'print' }) in Playwright.<a> tags. Keep the semantic markup ready.<h1> page title → <h2> section labels ("Regeln", "Noch in Klärung") → <h3> per rule card. Do not skip levels. Screen readers navigate by heading.role="presentation" aria-hidden="true". The Beispiel row's meaning lives in the output token.<span aria-hidden="true"> next to the H3 title — the H3 carries the rule's name and is what screen readers read.#d9dce0 on paper-dark (#0a1d2e) = 11.2:1 AAA.rgba(166,218,216,0.04) (not 0.12) for the bg; dashed border carries the delineation.prefers-reduced-motion is a no-op. Don't add hover-scale on chips or cards — the page is reference content, not interactive.min-h-[44px] py-2.5).::after — that's invisible to AT.overflow-wrap: break-word or the hyphen between words).| Component | Status | Responsibility |
|---|---|---|
routes/hilfe/transkription/+page.svelte |
new | Prerendered static page. Composes header, info-card, rule grid, klaerung strip, closing. Imports message strings via Paraglide. |
lib/components/RichtlinienRuleCard.svelte |
new | One rule: icon chip, title, body, Beispiel box. Props: { icon, title, body, beispiel } where beispiel is { svg: Component, output: string }. |
lib/components/KurrentSample.svelte |
new (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.svelte |
new (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}.json |
extend | Add the 23 new keys listed in the Paraglide table above. All three languages in the same commit. |
/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./hilfe/transkription.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.HelpPopover (see Markus's review on #320).