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
parent
43efac966b
commit
8538fed0b4
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue