From a06184f24f07ff54b8dc977a18956428489ee595 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Fri, 25 Sep 2026 13:27:01 +0200 Subject: [PATCH] Der Name auf der Teamseite hatte null Pixel -- und drei Messungen waren stumpf MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Weiter am Rundumcheck, diesmal der Handy-Rundgang. Von sechs Befunden war einer ein echter Layoutfehler, zwei waren zu kleine Schrift, und drei kamen daher, dass die Messung etwas nicht unterscheiden konnte. === AUF DEM HANDY KAPUTT === 1. DER NAME IN DER PERSONENKARTE WAR NULL PIXEL BREIT. Gemessen auf 412 px: `h3.tperson__name` mit `w=0` bzw. `w=15`. Der Name stand als Buchstabensaeule da oder gar nicht -- auf der Seite, die von Menschen handelt. `.tperson__text` trug `flex: 1; min-width: 0`. Das erlaubt dem Textblock, auf null zu schrumpfen, und Flexbox schrumpft lieber, als umzubrechen -- die Pille „zuletzt gesehen" daneben blieb stehen und nahm allen Platz. `min-width: 0` war trotzdem richtig gemeint (ohne sie blaeht ein langes Wort den Kasten auf); es fehlte nur die Untergrenze. Jetzt `min(14ch, 100%)`: vierzehn Zeichen, wenn so viel Platz ist, sonst der ganze Platz, der da ist. Die Pille bricht um -- `flex-wrap: wrap` stand am Kopf ohnehin schon, es fehlte nur der Grund, es zu benutzen. 2. ZWEI BESCHRIFTUNGEN UNTER DER LESBARKEITSGRENZE. `.u-weg__marke` 10,88 px, `.u-weg__aus` 11,2 px -- die Hausgrenze sind 11,5. Der Reflex dahinter: Eine Marke soll leise sein, also macht man sie klein. Leise wird sie aber durch Farbe und Gewicht; eine Schrift, die man nicht lesen kann, ist nicht leise, sondern weg. Derselbe Griff ist mir gestern dreimal an einem Tag passiert. === DREI MESSUNGEN, DIE ETWAS NICHT UNTERSCHEIDEN KONNTEN === 3. `pointer-events: none` IST KEIN BERUEHRZIEL. Die Terminpunkte im Monatsraster des Kalenders sind 8 x 8 px und nehmen ausdruecklich keine Beruehrung an -- angetippt wird die ZELLE. Sie als „zu klein" zu melden ist, als beanstande man die Groesse eines gemalten Knopfs. `pruef-breiten` kennt die Ausnahme seit jeher; im Handy-Rundgang hat sie gefehlt. 4. `font-size: 0` IST KEINE KLEINE SCHRIFT, SONDERN KEINE. Dieselben Punkte: Die Schrift wird auf null gesetzt, die Farbe bleibt. Gemeldet wurde „0px, zu klein". Die Grenze nach unten bleibt scharf -- alles zwischen 0,1 und 11,5 px ist weiterhin ein Befund, nur die glatte Null faellt heraus. Sie ist eine Aussage, keine Nachlaessigkeit. 5. `scrollWidth > clientWidth` SAGT BEI INLINE-ELEMENTEN NICHTS. Chromium liefert dort fuer `clientWidth` glatt null, und damit ist jeder Text breiter als sein Kasten. Der richtige Umgang mit einer unmoeglichen Messung ist, sie nicht zu machen -- nicht, ihr Ergebnis zu glauben. Dazu: Was per `clip-path: inset(50%)` fuer das Auge weggenommen ist (echte ` unter dem selbst + gebauten Sicht-Umschalter, Beschriftungen zu Symbolknoepfen. + Versteckt wird so etwas NICHT mit `display: none` (dann + ueberspringen manche Vorleseprogramme es), sondern mit einem + 1x1-Ausschnitt -- `clip-path: inset(50%)`. + + Solche Elemente sind ein Pixel gross und ihr Inhalt breiter. + `scrollWidth > clientWidth` ist damit IMMER wahr, und die + Meldung lautete: „Mara" (18>0), „Noch niemand zugeteilt" + (14>0). Nichts davon ist abgeschnitten -- es ist mit Absicht + nicht zu sehen. + + Dieselbe Erkennung benutzt `pruef-neue-seiten` beim + Ueberlappen; sie hat hier nur gefehlt. */ + if (st.clipPath && st.clipPath !== "none") return false; + if (st.clip && st.clip !== "auto") return false; return e.scrollWidth > e.clientWidth + 2; }) - .map((e) => `"${e.textContent.trim().slice(0, 22)}" (${e.scrollWidth}>${e.clientWidth})`) + .map((e) => `"${e.textContent.trim().slice(0, 22)}" (${e.scrollWidth}>${e.clientWidth}` + + `, ${e.tagName.toLowerCase()}.${String(e.className).split(" ")[0]}` + + `, ${getComputedStyle(e).display}, w=${Math.round(e.getBoundingClientRect().width)})`) .slice(0, 5), /* 3. Beruehrziele. 24x24 CSS-Pixel ist das Mindestmass nach WCAG 2.2 @@ -264,6 +303,24 @@ const messen = () => ({ if (r.width < 1 || r.height < 1) return false; const st = getComputedStyle(e); if (st.display === "none" || st.visibility === "hidden") return false; + /* ==== WAS KEINE BERUEHRUNG ANNIMMT (25.09.2026) ============== + + `pointer-events: none` heisst: Dieses Element ist fuer den + Finger nicht da -- die Beruehrung geht durch es hindurch an + das, was darunter liegt. Es als zu kleines Beruehrziel zu + melden, ist so, als beanstande man die Groesse eines + gemalten Knopfs. + + GEMELDET WURDEN die Terminpunkte im Monatsraster des + Kalenders: 8 x 8 px, `font-size: 0`, `pointer-events: none`. + Sie sind mit Absicht so -- drei Termine an einem Tag sollen + drei Punkte sein und nicht drei Zeilen, und angetippt wird + die ZELLE, die den Tagesdialog oeffnet. Die Begruendung steht + ausfuehrlich in kalender.css. + + Dieselbe Ausnahme kennt `pruef-breiten` seit jeher; sie hat + hier nur gefehlt. */ + if (st.pointerEvents === "none") return false; if (imSatz(e)) return false; return r.width < 24 || r.height < 24; }) @@ -365,7 +422,22 @@ const messen = () => ({ if (e.children.length || e.textContent.trim().length <= 3) return false; const r = e.getBoundingClientRect(); if (r.width <= 0 || r.height <= 0) return false; - return parseFloat(getComputedStyle(e).fontSize) < 11.5; + const st = getComputedStyle(e); + /* `font-size: 0` IST KEINE KLEINE SCHRIFT, SONDERN KEINE. + + Im Monatsraster des Kalenders wird aus jedem Termin ein + farbiger Punkt: Die Schrift wird auf 0 gesetzt, die Farbe + bleibt. Der Text ist damit nicht winzig, sondern bewusst + nicht dargestellt -- gelesen wird er im Tagesdialog. Ihn als + „0px, zu klein" zu melden, schickt einen an eine Stelle, an + der genau das beabsichtigt ist. + + DIE GRENZE NACH UNTEN BLEIBT SCHARF: Alles zwischen 0,1 und + 11,5 px ist weiterhin ein Befund. Nur die glatte Null faellt + heraus, und die ist eine Aussage, keine Nachlaessigkeit. */ + const g = parseFloat(st.fontSize); + if (!(g > 0)) return false; + return g < 11.5; }) .map((e) => `"${e.textContent.trim().slice(0, 18)}" ${getComputedStyle(e).fontSize}`) .slice(0, 3), diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 67107f71..70fba30e 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,8 +16,8 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +