{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "silbentrennung-komposita", "name": "Silbentrennung für deutsche Komposita", "name_en": "German compound-word hyphenation for narrow columns and large headlines", "kurz": "Proof-Rahmen einer Verdener Fahrschule bei 320 px: links läuft „Führerscheinausbildung“ über, rechts trennt das Regelwerk an den Wortfugen, und eine Live-Messung zählt Überlauf, Trennungen und Zwangsumbrüche.", "kategorie": "Typo-Techniken", "kategorie_slug": "typo-techniken", "kategorie_nr": 15, "bau_chat": "C1", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "editorial", "präzise" ], "stimmung_roh": [ "präzise", "editorial" ], "technik": [ "css", "text-wrap-balance", "clamp" ], "technik_gruppen": [ "css" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Deutsche Wörter wie „Führerscheinausbildung“ oder „Sonderfahrtenpauschale“ sind länger als eine Telefonzeile in großer Schrift. Ohne Regeln läuft das Wort über den Rand, wird abgeschnitten oder reißt an beliebiger Stelle. Das Muster setzt ein festes Regelwerk: lang=\"de\" am Dokument, hyphens: auto mit hyphenate-limit-chars für Mindestlängen, ­ an den Fugen großer Headlines, für Schrägstriche und Adressen, geschützter Bindestrich (U+2011) für Kürzel wie „B‑197“ und text-wrap: balance bzw. pretty für ruhige Zeilen. Die Demo zeigt Vorher und Nachher in einem Rahmen von 320 px.", "warum_es_wirkt": "Ein deutsches Kompositum, das aus dem Bildschirm läuft, ist der häufigste Fehler auf übersetzten oder generierten Seiten. Wer an der Wortfuge trennt („Führerschein-/ausbildung“), liest das Wort in einem Zug. Wer mitten in der Silbe oder nach zwei Buchstaben trennt, stolpert. Feste Regeln machen große Headlines auf dem Telefon möglich, ohne die Schrift kleiner zu drehen.", "wann_einsetzen": "Auf jeder deutschen Seite. Pflicht bei großen Headlines (ab etwa 2,5rem auf dem Telefon), schmalen Spalten (Karten, Preislisten, Tabellenköpfe, Navigation im Footer) und bei Branchen mit langen Fachwörtern: Fahrschule, Kanzlei, Praxis, Pflege, Handwerk, Industrie, Verwaltung.", "wann_nicht": "Nicht bei Markennamen, Eigennamen und Wortmarken: dort hyphens: none und lieber kleiner setzen oder umformulieren. Nicht bei Versalzeilen mit großer Laufweite. Nicht bei Telefonnummern, Preisen, Kürzeln und Codes. Automatische Trennung ersetzt kein gutes Umschreiben: Wenn eine Headline vier Trennungen braucht, ist sie zu lang.", "varianten": [ "Headline: große H1 mit ­ an den Wortfugen, hyphens: manual, text-wrap: balance", "Spalte: schmale Karten und Preisliste mit hyphens: auto und hyphenate-limit-chars: 10 4 4", "Feinsatz: nach Schrägstrich und in Adressen, geschützter Bindestrich in Kürzeln, geschütztes Leerzeichen in Einheiten" ], "umsetzung": "1. lang=\"de\" am , fremdsprachige Wörter mit eigenem lang. 2. Fließtext und schmale Spalten: hyphens: auto; hyphenate-limit-chars: 10 4 4 (Wort ab 10 Zeichen, mindestens 4 vor und 4 nach der Trennung); overflow-wrap: break-word als Notbremse. 3. Große Headlines: hyphens: manual und ­ an den Wortfugen von Hand (Führer­schein­ausbildung). So trennt jeder Browser gleich, auch Safari ohne hyphenate-limit-chars. Dazu text-wrap: balance. 4. Lauftext: text-wrap: pretty gegen einzelne Wörter in der letzten Zeile. 5. nach Schrägstrichen („Theorie/Praxis“), in E-Mail-Adressen und URLs. 6. U+2011 (geschützter Bindestrich) in Kürzeln wie „B‑197“, U+00A0 zwischen Zahl und Einheit. 7. Marken und Namen: hyphens: none (Klasse .ohne-trennung). 8. Prüfen bei 320 px und 200 % Zoom: kein Wort läuft über, keine Trennung nach 2 Buchstaben.", "mobil": "Das Muster ist für das Telefon gemacht: bei 320 bis 390 px Breite läuft kein Wort über. Die Trennstellen in Headlines stehen fest, damit sie auf allen Geräten gleich aussehen.", "reduzierte_bewegung": "Das Muster bewegt nichts. In der Demo springt der Rahmen ohne Gleiten auf die neue Breite.", "barrierefreiheit": "Weiche Trennzeichen stören Screenreader nicht, das Wort wird ganz vorgelesen. Kein Text in Bildern, keine Verkleinerung unter 16 px für Lauftext. Kein waagerechtes Scrollen bei 320 px (WCAG 1.4.10). Trennungen bei 200 % Zoom und erhöhten Textabständen prüfen (WCAG 1.4.12)." }, "messwerte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": "450 Rahmenbreite, 150 Umschalter", "stagger_ms": "", "distanz": "Rahmen 320 bis 560 px", "sonstiges": "hyphenate-limit-chars: 10 4 4; H1 clamp(2.5rem, 1rem + 6.5vw, 6rem) aus dem Rezept", "herkunft": "eigene Festlegung", "quelle": "Rezept fahrschule-freundlich-buchbar, MDN hyphens" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 450 }, "gesehen_bei": [ { "seite": "MDN: hyphens", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Browser trennen nur, wenn das lang-Attribut gesetzt ist und ein Trennwörterbuch für die Sprache vorhanden ist. Bei hyphens: manual trennt der Browser nur an ­ (U+00AD) und am harten Bindestrich. Bricht eine Zeile um, entsteht kein Trennstrich. Baseline weit verfügbar seit September 2023.", "art": "artikel" }, { "seite": "Web Platform Features Explorer: hyphenate-limit-chars", "url": "https://web-platform-dx.github.io/web-features-explorer/features/hyphenate-limit-chars", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Chrome und Edge ab 109 (Januar 2023), Firefox ab 137 (April 2025), Safari ohne Unterstützung. Status „Limited availability“, blockiert durch Safari seit April 2025.", "art": "artikel" }, { "seite": "Web Platform Features Explorer: text-wrap: pretty und balance", "url": "https://web-platform-dx.github.io/web-features-explorer/features/text-wrap-pretty", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: pretty in Chrome ab 117 und Safari ab 26, Firefox ohne Unterstützung. balance ist Baseline seit 13.05.2024 (Chrome 114, Firefox 121, Safari 17.5), weit verfügbar ab 13.11.2026.", "art": "artikel" }, { "seite": "Fundus-Rezept fahrschule-freundlich-buchbar", "url": "https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/", "auszeichnung": "", "beobachtung": "Intern: Das Rezept begrenzt die H1 auf 6rem statt 8,5rem, weil deutsche Komposita wie „Führerscheinausbildung“ länger sind als die englischen Zeilen der Referenz. In 30 Demos steht hyphens, aber ohne gemeinsame Regel.", "art": "artikel" } ], "tutorials": [ { "titel": "MDN: hyphens", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens" }, { "titel": "MDN: hyphenate-limit-chars", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars" }, { "titel": "MDN: text-wrap", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap" } ], "kombinierbar_mit": [ "lesesatz-text-wrap", "fluide-typo-clamp-cqi", "headline-laufweite-zeilenabstand", "zoom-und-textabstand-robust", "versal-kondensiert-fit-to-width" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/", "meta": "https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/meta.json", "demo": "https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/demo" }, "herkunft": { "quelldateien": [ "Recherche Runde 4, 04.11.2026" ], "pruefnotizen": [ "Recherche Runde 4: Lücke im Bestand, Satzregeln für Deutsch fehlen als Muster. hyphens steht in 30 Demos ohne Regelwerk.", "Browserstand am 04.11.2026 über web-features-explorer und MDN geprüft. Safari kennt hyphenate-limit-chars nicht, deshalb in Headlines ­ von Hand.", "Automatische Trennung hängt vom Wörterbuch des Browsers ab. Die Demo misst live, ob der Browser Deutsch trennt, und sagt es an." ] }, "bau": { "status": "fertig", "kurz": "Proof-Rahmen einer Verdener Fahrschule bei 320 px: links läuft „Führerscheinausbildung“ über, rechts trennt das Regelwerk an den Wortfugen, und eine Live-Messung zählt Überlauf, Trennungen und Zwangsumbrüche.", "demo": true, "abhaengigkeiten": [], "werte": { "html": "; Marken und Namen class mit hyphens: none", "headline": "hyphens: manual + ­ an den Wortfugen (Führer­schein­ausbildung), text-wrap: balance", "fliesstext": "hyphens: auto; text-wrap: pretty", "schmale_spalte": "hyphens: auto; hyphenate-limit-chars: 10 4 4", "feinsatz": " nach @, - und / in Adressen; U+2011 in Kürzeln (B‑197); U+00A0 zwischen Zahl und Einheit", "h1_im_rahmen": "Bricolage Grotesque 700, 2.5rem/.98, opsz 96, -0.02em (Rezept-Minimum)", "rahmen_px": "320 bis 560, Schritt 8", "easing": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": 450, "ui_ms": 150, "schalter_knopf": "translate 16px mit cubic-bezier(0.34, 1.56, 0.64, 1) 450 ms (Federung nur auf dem kleinen Knopf)", "messung": "Range.getClientRects je Zeichen: Zeilenwechsel zwischen zwei Buchstaben = Trennung; ­ davor = an Wortfuge; ohne hyphens: auto = Zwangsumbruch", "browser_stand": "hyphenate-limit-chars Chrome 109, Firefox 137, Safari nein; text-wrap: pretty Chrome 117, Safari 26, Firefox nein; balance Baseline seit 13.05.2024" }, "ausloeser": "klick", "touch": "Regeln als große Schalterzeilen (Trefferfläche über die ganze Zeile), Breitenregler mit 28 px Höhe. Bei 320 bis 390 px stehen Vorher und Nachher untereinander, der Rahmen wird per zoom verkleinert statt waagerecht zu scrollen.", "reduziert": "Rahmen springt ohne Gleiten auf die neue Breite, Schalterknopf ohne Federung. Das Muster selbst bewegt nichts.", "korrekturen": {}, "geprueft": "04.11.2026", "notiz": "Rezept fahrschule-freundlich-buchbar, Marke Fahrschule Kurvenlage, Stadt Verden (Aller). Neu am 04.11.2026 (Runde 4). Abgrenzung: lesesatz-text-wrap regelt Maß und Zeilenumbruch, hier geht es um Trennung deutscher Komposita. Befund im Bau: automatische Trennung trennt nach Silben, nicht an Wortfugen (Chromium: „Rechtsan-waltskanzlei“, „Lehrma-terialpaket“), deshalb in Headlines und Kartentiteln ­ an den Fugen. Messung zählt Trennungen live. Selbsturteil 4.", "varianten": [ { "id": "headline", "name": "Headline", "wann": "Große H1 und H2 auf dem Telefon, besonders Fahrschule, Kanzlei, Pflege und Verwaltung mit langen Fachwörtern.", "werte": { "regeln": "lang, ­ an Fugen, hyphens: auto, hyphenate-limit-chars: 10 4 4, text-wrap: balance/pretty", "inhalt": "H2 2.5rem „Führer|schein|ausbildung für Berufs|tätige“" } }, { "id": "spalte", "name": "Spalte", "wann": "Preiskarten, Leistungskacheln und Tabellenköpfe im Zweierraster, rund 130 px breit.", "werte": { "regeln": "lang, hyphens: auto, hyphenate-limit-chars: 10 4 4, text-wrap: balance", "kartentitel": "Bricolage 700, 1.25rem/1.08, opsz 36", "raster": "repeat(2, minmax(0, 1fr)), gap 8px" } }, { "id": "feinsatz", "name": "Feinsatz", "wann": "Kontaktblöcke, Anmeldetexte und Fließtext mit E-Mail-Adressen, Kürzeln, Preisen und Markennamen.", "werte": { "regeln": "lang, hyphens: auto, , U+00A0 und U+2011, Marke hyphens: none", "schrift": "1.375rem/1.45" } } ] } }