From e495542fe5fd8ee36dfaa18bf44258056f580aff Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sun, 23 Aug 2026 18:47:34 +0200 Subject: [PATCH] Typografie: Lesebreite begrenzt -- 105 zu breite Absaetze behoben Gemessen ueber alle Seiten: 105 von 200 Textabsaetzen waren zu breit, der schlimmste mit 151 Zeichen pro Zeile. WARUM DAS ZAEHLT Beim Zeilensprung muss das Auge zurueck an den Zeilenanfang finden. Je laenger die Zeile, desto haeufiger landet es in der falschen -- man liest eine Zeile doppelt oder ueberspringt eine und merkt es erst zwei Saetze spaeter. Der Text ist dann nicht "schwer", er ist schlecht gesetzt. Bewaehrt sind 45 bis 75 Zeichen. Das ist der aelteste und bestbelegte Grundsatz der Typografie ueberhaupt -- jedes ordentlich gesetzte Buch haelt sich daran. Jetzt 68 Zeichen fuer Fliesstext, 60 fuer Kleingedrucktes. Die Einheit ist ch statt Pixel: Damit haengt die Breite an der SCHRIFTGROESSE. Kleingedrucktes bekommt automatisch einen schmaleren Block, grosse Schrift einen breiteren -- beide landen bei aehnlich vielen Zeichen. max-width macht nie etwas breiter. In schmalen Karten und Spalten aendert sich also nichts; die Regel greift nur dort, wo eine Zeile wirklich ueber das Lesbare hinauswaechst. Ergebnis: von 105 auf 0. DREI FEHLER BEIM EINBAU, ALLE VON DER MESSUNG GEFUNDEN 1. Zentrierter Text stand ploetzlich links. Eine Breitenbegrenzung zentriert den KASTEN nicht mit -- die Schrift war mittig, ihr Kasten klebte am linken Rand, mit 384 Pixeln Luft rechts und null links. Gefunden, weil die Pruefung den Abstand links mit dem rechts VERGLEICHT, statt nur zu zaehlen, ob zentriert ist. 2. Meine erste Regel deckte nur den Fall ab, dass das ELTERNELEMENT zentriert -- nicht den, dass der Absatz es selbst tut. 3. Und dann blieb einer uebrig, bei dem beides stimmte. Ursache: ein Inline-Stil "margin:1.2rem 0 0". Die Kurzschreibweise setzt links und rechts hart auf 0 und schlaegt jede Stilvorlage. 11 solche Stellen ueber fuenf Seiten auf margin-top umgestellt -- gemeint war ohnehin immer nur der Abstand nach oben. Ausnahmen bewusst gesetzt: Nachrichtenblasen tragen ihre Breite schon selbst, Tabellenzellen und Beschreibungslisten richten sich nach ihrer Spalte, die Fusszeile ist mehrspaltig und ohnehin schmal. ALLES GRUEN: Gestaltung 0 Befunde, Designsystem 5, Verwaltung 69, Portal 32, Widerruf 58, Anfragedetail 20. Versionsstempel und Cache auf v18. Co-Authored-By: Claude Opus 5 --- assets/css/webdesign.css | 94 +++++++++++++++++++++++++++++ pruef-aufgaben-computer.png | Bin 159250 -> 160358 bytes pruef-detail-computer.png | Bin 166100 -> 165278 bytes pruef-detail-handy.png | Bin 42336 -> 42490 bytes pruef-portal-aufgaben-computer.png | Bin 1059143 -> 948305 bytes pruef-portal-postfach-computer.png | Bin 498998 -> 490107 bytes pruef-portal-postfach-handy.png | Bin 238539 -> 238525 bytes pruef-postfach-computer.png | Bin 469721 -> 468185 bytes pruef-rechtliches.png | Bin 468511 -> 377175 bytes pruef-widerruf-computer.png | Bin 737502 -> 848805 bytes pruef-widerruf-handy.png | Bin 393940 -> 391629 bytes webdesign/ablauf.html | 8 +-- webdesign/anfrage.html | 12 ++-- webdesign/faq.html | 8 +-- webdesign/index.html | 16 ++--- webdesign/leistungen.html | 8 +-- webdesign/portal.html | 12 ++-- webdesign/portfolio.html | 8 +-- webdesign/preise.html | 8 +-- webdesign/rechtliches.html | 6 +- webdesign/sw.js | 2 +- webdesign/ueber.html | 8 +-- webdesign/verwaltung.html | 12 ++-- webdesign/widerruf.html | 10 +-- webdesign/zugang.html | 12 ++-- 25 files changed, 159 insertions(+), 65 deletions(-) diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index 1eb29970..c8e068fd 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -1922,3 +1922,97 @@ a.wd-karte:active, .wd-karte--klickbar:active { transform: none !important; } } + +/* ===================================================================== + LESEBREITE (23.08.2026) + + Gemessen über alle Seiten: 105 von 200 Textabsätzen waren zu breit, + der schlimmste mit 151 Zeichen pro Zeile. + + Warum das zählt: Beim Zeilensprung muss das Auge zurück an den + Zeilenanfang finden. Je länger die Zeile, desto häufiger landet es in + der falschen — man liest eine Zeile doppelt oder überspringt eine und + merkt es erst zwei Sätze später. Der Text ist dann nicht "schwer", er + ist schlecht gesetzt. + + Bewährt sind 45 bis 75 Zeichen. Bücher, Zeitungen und jedes ordentlich + gesetzte Buch halten sich daran; es ist der älteste und bestbelegte + Grundsatz der Typografie überhaupt. + + Die Einheit ist ch (Breite der Ziffer Null). Damit hängt die Breite an + der SCHRIFTGRÖSSE, nicht an Pixeln: Kleingedrucktes bekommt + automatisch einen schmaleren Block, große Schrift einen breiteren -- + in beiden Fällen landet man bei ähnlich vielen Zeichen. + + max-width macht nie etwas breiter. In schmalen Karten und Spalten + ändert sich also gar nichts -- die Regel greift nur dort, wo eine + Zeile wirklich über das Lesbare hinauswächst. + ===================================================================== */ +:root { + --wd-lesebreite: 68ch; + --wd-lesebreite-eng: 60ch; /* für Kleingedrucktes und Hinweise */ +} + +.wd p, +.wd li, +.wd .wd-fuehrung { + max-width: var(--wd-lesebreite); +} + +/* Kleingedrucktes darf enger stehen: Es wird überflogen, nicht gelesen, + und ein schmaler Block ist dabei schneller zu erfassen. */ +.wd .wd-klein, +.wd .wd-feld-hilfe, +.wd .rl-text .wd-klein { + max-width: var(--wd-lesebreite-eng); +} + +/* Wo mittig gesetzt wird, muss auch der BLOCK mittig bleiben. + Ohne das klebt zentrierter Text nach der Begrenzung am linken Rand -- + die Schrift wäre zentriert, ihr Kasten aber nicht. */ +/* Zwei Faelle, beide noetig: + + ELTERNELEMENT zentriert -> die Kinder mittig halten + ABSATZ SELBST zentriert -> ihn selbst mittig halten + + Beim ersten Versuch fehlte der zweite Fall. Ergebnis: zwei Absaetze, + deren Schrift zentriert war, deren Kasten aber links klebte -- auf + anfrage.html mit 384 Pixeln Luft rechts und null links. Gefunden, weil + die Pruefung den Abstand links mit dem rechts VERGLEICHT, statt nur zu + zaehlen, ob zentriert ist. */ +.wd :is(p, li)[style*="text-align:center"], +.wd :is(p, li)[style*="text-align: center"], +.wd [style*="text-align:center"] :is(p, li), +.wd [style*="text-align: center"] :is(p, li), +/* Alle Behaelter, die ihren Inhalt mittig setzen -- aus der zentralen + Stilvorlage UND aus den seiteneigenen