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