Wie sich Moles Zahlen in die Menüleiste einfügen

Mole kann neben dem kleinen Maulwurf in der Menüleiste zwei Zahlen anzeigen, standardmäßig CPU und Arbeitsspeicher. Schon lange sagen mir Leute, dass das nie ganz zu den Symbolen daneben gepasst hat, auch wenn niemand genau sagen konnte, woran es liegt. Diesmal habe ich einen Screenshot meiner eigenen Menüleiste gemacht und sie Element für Element durchgesehen. Das Problem war keine einzelne Zahl. Schriftgröße, Schriftstärke und Abstände sahen jeweils für sich akzeptabel aus, zusammen aber hoben sie Mole von allem anderen in der Leiste ab.

Zuerst die Nachbarn ansehen

Auf meinem Screenshot stand links neben Mole Stats, ein Open-Source-Monitor für die Menüleiste. Ich habe den Code gelesen, mit dem es die Menüleiste zeichnet: Seine kleinen Zellen setzen eine 7 pt-Beschriftung in Light über einen 12 pt-Wert in Regular, die zweizeilige Netzwerkgeschwindigkeit hat 9 pt, und nirgends in der Leiste gibt es Fettschrift. Mole verwendete zwei Zeilen Text in 8 pt Semibold. Auf demselben Screenshot gemessen war Moles Text 12 Pixel hoch, der von Stats 13 bis 16. Mole war also eine Größe kleiner als seine Nachbarn und der einzige fette Text in der Leiste, was es zu einem kleinen grauen Fleck machte.

Ich hatte das schon mehrmals nachjustiert, von 10 pt über 9 pt auf 8 pt, und jedes Mal habe ich nur den Maulwurf allein betrachtet statt neben anderen Statusobjekten. Der Text wurde also immer kleiner, während die Schriftstärke nie angefasst wurde. Die Menüleiste ist ein gemeinsamer Raum, und niemand liest das Element einer App isoliert, deshalb habe ich mich diesmal an den Stil gehalten, den die Leute ohnehin jeden Tag lesen: Beschriftungen in 7 pt Light, Werte in 12 pt Regular, 9 pt Regular für das zweizeilige Layout und die Netzwerkgeschwindigkeit, nichts fett, und die Hierarchie entsteht allein über die Größe.

Die Tinte messen, nicht die Box

Als die Schrift feststand, kamen die Abstandsprobleme zum Vorschein. Der Abstand zwischen dem Maulwurf und der ersten Zahl, der zwischen zwei Messwerten und der zwischen Beschriftung und Wert wurden jeweils auf eigene Weise berechnet, sodass das Element nie als Ganzes wirkte. Der alte Code maß Abstände von Bildrändern oder Textlayout-Boxen aus, das Auge sieht aber die Tinte, und der Leerraum zwischen Box und Tinte ist von Glyphe zu Glyphe verschieden. Zwei Abstände, beide auf 3 pt gesetzt, konnten doppelt so unterschiedlich aussehen.

Am deutlichsten zeigte das der Maulwurf. Das Sprite-Sheet jeder Figur hat seinen eigenen transparenten Rand, deshalb blieben bei einem festen Abstand vom Bildrand neben dem Maulwurf nur 6,5 pt übrig und neben einer anderen Figur mehr. Jetzt sucht Mole über alle Animationsframes hinweg das am weitesten rechts liegende deckende Pixel und misst von dort aus, sodass der Abstand zu den Zahlen bei jeder Figur etwa 12 pt beträgt.

Beim Abstand zwischen zwei Messwerten lauerte eine ähnliche Falle. Jede Zelle reserviert Platz für ihren breitesten Wert, bei Prozenten 100%, damit sich die Menüleiste nicht verschiebt, wenn ein Wert von 9% auf 44% springt, und bei zweistelligen Werten bleiben so rund 13 pt zwischen den Zellen. Sobald aber beide Zellen 100% erreichen, ist der reservierte Spielraum weg. Eine Version während dieser Arbeit ließ nur 3 pt zwischen den Zellen, und unter Volllast druckte das zweizeilige Layout 100%999 KB/s als ein zusammenhängendes Stück. Jetzt halten die Zellen mindestens 6 pt Abstand und bleiben auch unter Volllast getrennt. Beschriftung und Wert liegen vertikal 3,5 pt auseinander, genau wie bei Stats.

Linksbündige Zeilen können trotzdem schief aussehen

In den alten Zellen stand die Beschriftung zentriert über der Zahl und wirkte wie eine darüber schwebende Bildunterschrift. Diesmal sind Beschriftung und Wert beide linksbündig und werden von derselben x-Koordinate aus gezeichnet, sie sollten also übereinanderstehen. Vergrößert saß die Beschriftung aber immer ein wenig links von der Zahl. Die Ursache liegt in der Schrift: Jede Glyphe bringt links einen kleinen eingebauten Rand mit. Die 12 pt-Tabellenziffern haben 0,7 bis 1,0 pt davon, die Ziffer 1 hat 1,7 pt, und die Großbuchstaben einer 7 pt-Beschriftung nur 0,3 bis 0,6 pt. Sie beginnen am selben Punkt, trotzdem liegen die sichtbaren Striche 1 bis 3 Pixel auseinander, am deutlichsten, wenn ein Wert mit 1 beginnt.

Die Lösung verschiebt die Beschriftung auf den ersten Strich des Werts und lässt den Wert selbst in Ruhe. Der Wert ändert sich jede Sekunde, und würde er sich bei jeder neuen ersten Ziffer verschieben, würde die Zahl, auf die man schaut, hin und her wackeln. Die kleine Beschriftung darüber zu verschieben vermeidet das; sie bewegt sich nur, um weniger als 1 pt, wenn der Wert in eine andere Zehnerstelle wechselt.

Selbst bei exakt ausgerichteten Strichen wirkte der Wert noch leicht nach rechts versetzt. Das ist eine verbreitete Täuschung, wenn eine große Zahl unter kleinem Text steht: Eine runde 12 pt-Ziffer ist viel größer als eine 7 pt-Beschriftung in Light, und das Auge liest die Kante der größeren Glyphe als weiter innen liegend. Ich habe 0, 0,5 und 1 pt verglichen. Bei 1 pt sah die Zahl schon so aus, als würde sie nach außen drängen, deshalb ragt der Wert jetzt 0,3 pt nach links heraus, etwas mehr als ein halbes Pixel, gerade genug, damit beide Zeilen an derselben Kante zu stehen scheinen.

Die Breite jeder Zahl reservieren

Wenn sich in der Menüleiste irgendetwas in der Breite ändert, wandern alle Symbole rechts davon mit, deshalb braucht jede Art von Wert Platz für seine breiteste Form. Zwei Lücken tauchten auf. Die Lüfterdrehzahl wird unter 1000 U/min als 850 geschrieben und darüber als 2.1k, und die beiden Formen reservierten unterschiedliche Breiten, sodass die ganze Menüleiste sprang, wenn der Lüfter die 1000 U/min überschritt. Swap nutzte direkt das Byteformat des Systems, das 10.52 GB ergab, auf einem französischen System 1,2 Go: zu lang für eine 12 pt-Zelle, und die Breite änderte sich mit dem Wert. Beide Lüfterformen teilen sich jetzt eine Breite, und Swap steht in der Menüleiste immer in einer Kurzform mit höchstens drei Ziffern wie 512 MB, 1.2 GB oder 12 GB. Der vollständige Wert bleibt im Popover.

Die Netzwerkgeschwindigkeit bekam nebenbei eine Korrektur. Unter 10 KB/s zeigte sie früher eine Nachkommastelle, sodass im Leerlauf 0.0 KB/s über 86 KB/s stand, mit Dezimalpunkt in der einen Zeile und ohne in der anderen, und das rechtsbündige Paar sah nie gleichmäßig aus. Ein Zehntel Kilobyte pro Sekunde sagt kaum etwas aus, deshalb ist KB/s jetzt immer eine ganze Zahl. MB/s behält unter 10 eine Nachkommastelle, denn dort ist der Unterschied zwischen 1.5 MB/s und 1 MB/s tatsächlich wichtig.

So richten Sie es ein

Öffnen Sie in den Einstellungen von Mole den Tab Menüleiste. Die Zeile Anzeige hat drei Optionen: Läufer zeigt nur den Maulwurf, Messwerte zeigt nur die Zahlen, und Beides zeigt den Maulwurf mit den Zahlen daneben, wählen Sie also Messwerte oder Beides, um die Zahlen aus diesem Beitrag zu sehen. Darunter erscheinen dann ein paar weitere Zeilen. Anordnung auf Zeile ergibt die Zellen mit der Beschriftung über dem Wert, Gestapelt ergibt die zwei Zeilen kleiner Schrift. Messwert 1 und Messwert 2 bestimmen die beiden Messwerte, standardmäßig CPU und Speicher, und jede davon lässt sich auf GPU, Temperatur, Leistung, Lüfter, Swap oder den Akku eines Bluetooth-Geräts umstellen. Wenn Sie Netzwerkgeschwindigkeit einschalten, kommen rechts Upload und Download dazu. Den Maulwurf selbst können Sie unter Stil gegen eine andere Figur tauschen, und die Taste daneben dreht die Figur um.

Manchmal werde ich gefragt, warum der Maulwurf so schnell rennt. Sein Tempo ist der CPU-Wert: Je mehr der Mac zu tun hat, desto schneller rennt er. Er folgt dem höheren der beiden Werte, der gesamten CPU-Auslastung oder der Durchschnittslast über eine Minute. Im völligen Leerlauf macht er etwa alle 1,3 Sekunden einen Schritt, und ab 70% wird er nicht mehr schneller, bei ungefähr vier Schritten pro Sekunde. Die Kurve steigt bei niedriger Last steiler an, damit sich 10% und 30% deutlich unterscheiden, das heißt, mit einem offenen Browser und ein bisschen Schreiben rennt er schon etwa doppelt so schnell wie bei einem Mac im Leerlauf, und beim Kompilieren von Code oder beim Exportieren eines Videos rennt er richtig. Das Tempo ist ein bewusstes Signal, deshalb gibt es keine eigene Einstellung für die Geschwindigkeit. Andere Figuren laufen in ihrem eigenen Tempo, weil jede eine andere Anzahl an Animationsbildern hat. Wenn nur der Maulwurf angezeigt wird und Sie den Zeiger darüber halten, erscheint auch der Hinweis „Läuft schneller, je stärker die CPU ausgelastet ist“.

Was ich ausprobiert und so gelassen habe

Irgendwann kam mir die Temperaturzelle zu groß vor. Ich habe eine Version mit der Einheit in 9 pt und eine mit 10 pt gebaut, und in beiden sackte das kleinere ° Richtung Grundlinie ab, sodass 58°C wie der Tippfehler 58°c aussah und das Prozentzeichen deutlich kleiner wurde als das, was Stats direkt daneben zeigt. Erneutes Messen ergab, dass die Zahl genau so groß war wie in der CPU-Zelle; sie wirkte nur größer, weil 58°C einen Großbuchstaben mehr hat als 44%. Also blieb die Größe, wie sie war.

Außerdem gab es eine alte Regel, nach der neben der Figur nur das zweizeilige Layout erscheinen durfte, nie diese Zellen mit Beschriftung über dem Wert. Die Version, gegen die diese Regel geschrieben wurde, nutzte 12 pt Semibold. Ohne Fettschrift entfällt der Grund, deshalb können jetzt beide Layouts neben der Figur erscheinen, und Zellen sind der Standard.

Im Rückblick ist keine dieser Änderungen groß. Es sind halbe Pixel, eine Nachkommastelle und ein paar Punkte Abstand, und zusammen entscheiden sie, ob sich ein Symbol in die Menüleiste einfügt oder aus ihr heraussticht. Wer eine App für die Menüleiste baut, kann das eigene Element und ein paar beliebte Nachbarn auf einen Screenshot bringen und vergleichen, die Tinte messen statt der Box und für jeden Wert die größte Breite reservieren. Nach diesen drei Schritten wirkt es wahrscheinlich nicht mehr fehl am Platz.

Alle diese Werte sind jetzt durch Tests abgedeckt, je einen für Schriftstärke, Breite und die Ausrichtung der Beschriftung, sodass eine spätere Änderung sie nicht so leicht wieder rückgängig macht. Es ist derselbe Gedanke wie bei Mole so gestalten, dass es nicht stört: Was in der Menüleiste lebt, ist am besten, wenn man es jeden Tag ansieht und nie bemerkt.