Terminal: die Wortmarke steht gerade

Der Betreiber sah einen losen Klotz mitten im Wort. Ursache war der Bogen des
`P` in der uebernommenen Figlet-Zeichnung: eine Zelle in der zweiten Zeile, unter
der in der ersten nichts stand. Figlet-Schriften sind fuer echte
Terminalschriften gezeichnet und tragen in IBM Plex Mono nicht.

Jetzt selbst gezeichnet: jeder Buchstabe sechs Zellen breit (das `I` zwei), eine
Zelle Abstand, und keine Zelle ohne Nachbarn darueber. Nicht von Hand abgezaehlt,
sondern aus einer Buchstabentabelle gesetzt — von Hand hatte ich mich prompt
verzaehlt und die Buchstaben liefen ineinander, was im Browser sofort zu sehen
war.

Groesser als vorher (15px statt 11px, am Telefon 10px): die neue Zeichnung ist
51 Zellen breit statt 62, bei gleicher Schriftgroesse wirkte sie deshalb
kleiner.

Zwischendurch stand hier „CluPilot Cloud" mit grauem zweiten Wort wie im Logo.
Auf Wunsch des Betreibers wieder raus — nur die Wortmarke.

2508 Tests gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
main
nexxo 2026-08-02 23:16:28 +02:00
parent 43efac966b
commit 8538fed0b4
1 changed files with 30 additions and 19 deletions

View File

@ -67,32 +67,43 @@
class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-6 bg-ink px-6 text-center"
data-stage-messages="{{ json_encode($messages, JSON_UNESCAPED_UNICODE) }}">
{{-- Schriftgrafik, keine Bilddatei deshalb `role="img"` mit einem
lesbaren Namen statt `aria-hidden`: ein Screenreader soll "CluPilot"
hören, nicht die einzelnen Zeichen der Zeichnung.
{{-- Die Wortmarke als Schriftgrafik.
Vollblöcke, nicht `_ / \ |`. Die erste Fassung war eine gewöhnliche
Figlet-Zeichnung, und die funktioniert nur in einer echten
Terminalschrift: sie setzt darauf, dass der Unterstrich einer Zeile
den Strich der nächsten berührt. In IBM Plex Mono sitzt der
Unterstrich tiefer bei enger Zeilenhöhe verschmierte das Wort, bei
weiter zerfiel es in Einzelteile. Beides im Browser durchgemessen,
beides unlesbar. `█` füllt seine Zelle ganz aus und stapelt deshalb
in jeder Schrift sauber.
`role="img"` mit lesbarem Namen statt `aria-hidden`: ein
Screenreader soll „CluPilot" hören, nicht die einzelnen Zeichen der
Zeichnung.
Selbst gezeichnet, nicht aus einer Figlet-Schrift übernommen. Die
übernommene Fassung hatte im Bogen des `P` einen Überhang eine
Zelle in der zweiten Zeile, unter der in der ersten nichts stand
und der stand als loser Klotz mitten im Wort. Figlet-Schriften sind
für echte Terminalschriften gezeichnet und tragen hier nicht. Jeder
Buchstabe ist sechs Zellen breit (das `I` zwei), mit einer Zelle
Abstand, und keine Zelle steht ohne Nachbarn darüber. Nicht von Hand
abgezählt, sondern aus einer Buchstabentabelle gesetzt von Hand
hatte ich mich prompt verzählt, und die Buchstaben liefen ineinander.
`█` füllt seine Zelle ganz aus und stapelt deshalb in jeder Schrift
sauber anders als `_ / \ |`, die auf Berührung zwischen den Zeilen
angewiesen sind. Bei enger Zeilenhöhe verschmierte das Wort damit,
bei weiter zerfiel es. Beides im Browser durchgemessen.
Immer Akzentfarbe, auch im Fehlerfall: Dunkelrot auf Fast-Schwarz
hatte kaum Kontrast, und eine Wortmarke, die ihre Farbe wechselt, ist
ohnehin keine Statuslampe was los ist, sagt die Zeile darunter.
8px am Telefon: bei 11px ist die Zeichnung 403px breit und schöbe auf
einem schmalen Schirm die Seite zur Seite. --}}
Zwei Größen: die Zeichnung ist 51 Zellen breit, und eine Zelle ist
gut 0,6 der Schriftgröße. 15px ergeben rund 460px auf dem Schirm
eine Wortmarke, kein Etikett. Am Telefon sind es 10px und damit gut
300px, was neben den Rändern noch hineinpasst; bei 15px schöbe sie
die Seite zur Seite. --}}
<pre data-stage-mark
class="select-none font-mono text-[8px] leading-none text-accent sm:text-[11px]"
role="img" aria-label="CluPilot"> ██████ ██ ██ ██ ██████ ██ ██ ██████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██████ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ██████ ██ ██ ██████ ██████ ██</pre>
class="select-none font-mono text-[10px] leading-none text-accent sm:text-[15px]"
role="img" aria-label="CluPilot"> ████ ██ ██ ██ ██████ ██ ██ ████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██████ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
████ ██████ ████ ██ ██ ██████ ████ ██ </pre>
{{-- aria-live: die Bühne tauscht ihren Text aus, ohne dass die Seite neu
lädt. Ohne diesen Hinweis erführe ein Screenreader vom Abbruch