From 9f74167f84be251f79f14618143517cceb07398e Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 19:03:30 +0200 Subject: [PATCH] Sprungmarken brechen um statt zu scrollen, keine Silbentrennung in Ueberschriften Rueckmeldung 22.08.2026: "ich will nicht dass man die hin und her schieben muss man soll die alle sehen aber nicht schieben muessen." Richtig, und aus zwei Gruenden: Eine Wischleiste verbirgt, DASS es noch mehr gibt -- was rechts aus dem Bild ragt, existiert fuer die meisten Menschen schlicht nicht. Dazu kam ein haesslicher Scrollbalken quer ueber die Seite. Jetzt brechen die Knoepfe um, alle fuenf sind auf einen Blick da, auch bei 320px. Der Text in den Knoepfen darf dabei mitbrechen (white-space: normal) -- ohne das sprengt ein langer Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf schmalen Bildschirmen die Zeile und der waagerechte Ueberlauf waere durch die Hintertuer zurueck. Dabei mitgefunden: "hyphens: auto" auf Ueberschriften. Auf dem Handy stand dadurch "Alles, was vorher ge-klaert sein sollte". Der Browser trennt damit nach Silben, auch wenn ueberhaupt kein Platzproblem besteht. In Fliesstext ist das ein Gewinn, in grossen Ueberschriften sieht es billig aus -- und genau die sind das Erste, was jemand sieht. overflow-wrap: break-word bleibt und faengt echte Ueberlaeufe weiterhin ab. Pruefskript: die Sprungmarken-Leisten waren als "absichtlich scrollbar" von der Ueberlaufpruefung ausgenommen. Diese Ausnahme ist raus -- sonst wuerde ein zurueckkehrender Ueberlauf dort nie auffallen. 45/45 weiterhin sauber. Co-Authored-By: Claude Opus 5 --- assets/css/webdesign.css | 15 ++++++++++++--- server/pruefe-webdesign-handy.mjs | 8 ++++++-- webdesign/faq.html | 29 ++++++++++++++++++++++------- webdesign/leistungen.html | 30 ++++++++++++++++++++---------- 4 files changed, 60 insertions(+), 22 deletions(-) diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index 2ed8ef65..106e6839 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -146,10 +146,19 @@ body.wd::after { letter-spacing: -.015em; margin: 0 0 .5em; color: var(--wd-text); - /* Verhindert, dass lange deutsche Komposita ("Buchhaltungsverwaltungs- - seiten") auf dem Handy aus dem Kasten laufen. */ + /* Lange deutsche Komposita ("Buchhaltungsverwaltungsseiten") duerfen auf + dem Handy nicht aus dem Kasten laufen — dafuer reicht + overflow-wrap: break-word. Es greift NUR im Notfall, wenn ein Wort + sonst wirklich ueberlaufen wuerde. + + "hyphens: auto" stand hier zusaetzlich und ist wieder raus: der + Browser trennt damit nach Silben, auch wenn gar kein Platzproblem + besteht. Auf dem Handy stand dadurch "Alles, was vorher ge-klaert + sein sollte" in der Ueberschrift. In Fliesstext ist Silbentrennung + ein Gewinn, in grossen Ueberschriften sieht sie schlicht billig aus — + und genau die sind das Erste, was jemand von der Seite sieht. */ overflow-wrap: break-word; - hyphens: auto; + hyphens: manual; } .wd h1 { font-size: clamp(2.15rem, 5.6vw, 3.9rem); font-weight: 800; } .wd h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); font-weight: 800; } diff --git a/server/pruefe-webdesign-handy.mjs b/server/pruefe-webdesign-handy.mjs index adf9fa4c..2a721f06 100644 --- a/server/pruefe-webdesign-handy.mjs +++ b/server/pruefe-webdesign-handy.mjs @@ -72,8 +72,12 @@ for (const pfad of SEITEN) { for (const el of document.querySelectorAll("body *")) { const s = getComputedStyle(el); if (s.display === "none" || s.visibility === "hidden") continue; - // Absichtlich waagerecht scrollbare Leisten ausnehmen - if (el.closest(".ls-sprung, .fq-sprung, .wd-tabelle-rahmen")) continue; + /* Nur noch die Tabellen sind absichtlich waagerecht scrollbar. + Die Sprungmarken-Leisten (.ls-sprung, .fq-sprung) waren es + frueher auch und standen deshalb hier — seit sie umbrechen + (Rueckmeldung 22.08.2026) muessen sie mitgeprueft werden, + sonst faellt ein zurueckkehrender Ueberlauf nie auf. */ + if (el.closest(".wd-tabelle-rahmen")) continue; const r = el.getBoundingClientRect(); if (r.width === 0 || r.height === 0) continue; if (r.right > vp + 1.5) { diff --git a/webdesign/faq.html b/webdesign/faq.html index 3fd89ff9..fe343c0b 100644 --- a/webdesign/faq.html +++ b/webdesign/faq.html @@ -23,14 +23,29 @@ padding-bottom: .5rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--wd-rand); } - /* Sprungmarken wie auf der Leistungsseite: waagerecht wischbar statt - über vier Zeilen umbrechend. */ - .fq-sprung { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem; scroll-snap-type: x proximity; } + /* Sprungmarken. + Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026: + "ich will nicht dass man die hin und her schieben muss man soll die + alle sehen aber nicht schieben muessen" -- voellig richtig. Eine + Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild + ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein + haesslicher Balken quer ueber die Seite. + Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf + dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer + Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die + Zeile und der waagerechte Ueberlauf waere durch die Hintertuer + zurueck. */ + .fq-sprung { + display: flex; flex-wrap: wrap; gap: .5rem; + padding: .2rem 0 1rem; + } .fq-sprung a { - flex: 0 0 auto; scroll-snap-align: start; - padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; - border-radius: 999px; border: 1px solid var(--wd-rand); - font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap; + flex: 0 1 auto; + padding: .55rem 1rem; min-height: 44px; + display: inline-flex; align-items: center; justify-content: center; + border-radius: 12px; border: 1px solid var(--wd-rand); + font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); + white-space: normal; text-align: center; line-height: 1.25; } .fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); } diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html index dc1eb5b8..4e30929f 100644 --- a/webdesign/leistungen.html +++ b/webdesign/leistungen.html @@ -16,19 +16,29 @@