# Faire entrer les chiffres de Mole dans la barre des menus
> Pourquoi les mesures de processeur et de mémoire de Mole détonnaient dans la barre des menus, et les détails de typographie, d’espacement et d’alignement qui ont réglé le problème.
Published: 2026-09-27 | Updated: 2026-10-01
Mole peut afficher deux chiffres à côté de la petite taupe dans la barre des menus, par défaut le processeur et la mémoire. Depuis longtemps, on me dit que l’ensemble ne s’accorde jamais tout à fait avec les icônes voisines, sans que personne sache dire pourquoi. Cette fois, j’ai fait une capture de ma propre barre des menus et je l’ai examinée élément par élément. Le problème ne venait d’aucun chiffre en particulier. La taille du texte, sa graisse et l’espacement semblaient corrects pris séparément, et ensemble ils faisaient ressortir Mole de tout le reste de la barre.
La même barre des menus, avant en haut et après en bas.
## Commencer par les voisins
Sur ma capture, l’élément à gauche de Mole était Stats, un moniteur open source pour la barre des menus. J’ai lu le code qu’il utilise pour dessiner dans la barre : ses petites cellules placent un libellé de 7 pt en graisse légère au-dessus d’une valeur de 12 pt en graisse normale, son débit réseau sur deux lignes est en 9 pt, et il n’y a aucun gras nulle part dans la barre. Mole utilisait deux lignes de texte en 8 pt demi-gras. Mesuré sur la même capture, le texte de Mole faisait 12 pixels de haut contre 13 à 16 pour Stats. Mole avait donc une taille de moins que ses voisins et était le seul texte en gras de la barre, ce qui en faisait une petite tache grise.
J’avais déjà ajusté cela plusieurs fois, en passant de 10 pt à 9 pt puis à 8 pt, et chaque fois je regardais la taupe seule plutôt qu’à côté d’autres éléments d’état. Le texte n’a donc cessé de rapetisser pendant que la graisse ne changeait jamais. La barre des menus est un espace partagé, et personne ne lit l’élément d’une application isolément, alors cette fois j’ai suivi le style que l’on lit déjà tous les jours : libellés de 7 pt en graisse légère, valeurs de 12 pt en graisse normale, 9 pt normal pour la disposition sur deux lignes et le débit réseau, rien en gras, et une hiérarchie portée uniquement par la taille.
## Mesurer l’encre, pas la boîte
Une fois la typographie arrêtée, les problèmes d’espacement sont apparus. L’écart entre la taupe et le premier chiffre, celui entre deux mesures et celui entre un libellé et sa valeur étaient calculés chacun à sa manière, si bien que l’élément ne se lisait jamais comme un tout. L’ancien code mesurait les distances à partir des bords d’image ou des boîtes de mise en page du texte, mais l’œil voit l’encre, et le blanc entre une boîte et son encre varie d’un glyphe à l’autre. Deux écarts réglés tous les deux à 3 pt pouvaient paraître deux fois plus différents.
La taupe le montrait le plus clairement. La planche de sprites de chaque personnage porte sa propre marge transparente, si bien qu’une distance fixe depuis le bord de l’image ne laissait que 6,5 pt à côté de la taupe, et davantage à côté d’un autre personnage. Désormais, Mole cherche le pixel opaque le plus à droite sur toutes les images de l’animation et mesure à partir de là, de sorte que, quel que soit le personnage choisi, la distance jusqu’aux chiffres est d’environ 12 pt.
L’écart entre deux mesures cachait un piège semblable. Chaque cellule réserve la place de sa valeur la plus large, 100% pour les pourcentages, afin que la barre des menus ne bouge pas quand une valeur passe de 9% à 44%, et avec des valeurs à deux chiffres cela laisse environ 13 pt entre les cellules. Mais dès que les deux cellules atteignent 100%, cette marge réservée disparaît. Une version intermédiaire ne laissait que 3 pt entre les cellules, et à pleine charge la disposition sur deux lignes affichait `100%999 KB/s` d’un seul tenant. Les cellules gardent désormais au moins 6 pt d’écart, et restent donc séparées même à pleine charge. Libellés et valeurs sont espacés de 3,5 pt verticalement, comme dans Stats.
## Des lignes alignées à gauche peuvent quand même paraître décalées
Dans les anciennes cellules, le libellé était centré au-dessus du chiffre et se lisait comme une légende flottant au-dessus. Cette fois, le libellé et la valeur sont tous deux alignés à gauche et dessinés à partir de la même coordonnée x, ils devraient donc être alignés. En zoomant, le libellé se trouvait pourtant toujours un peu à gauche du chiffre. La cause est dans la police : chaque glyphe porte une petite marge intégrée sur son côté gauche. Les chiffres tabulaires de 12 pt en ont 0,7 à 1,0 pt, le chiffre 1 en a 1,7 pt, et les capitales d’un libellé de 7 pt seulement 0,3 à 0,6 pt. Ils partent du même point, et pourtant les traits visibles finissent décalés de 1 à 3 pixels, surtout quand une valeur commence par 1.
À gauche, les deux sont dessinés à partir du même point et le 1 se trouve à droite du C. À droite, le libellé se place sur le trait du chiffre et les bords s’alignent.
La correction déplace le libellé sur le premier trait de la valeur et laisse la valeur en place. La valeur change chaque seconde, et si elle se décalait à chaque changement de premier chiffre, le nombre que vous regardez oscillerait de gauche à droite. Déplacer le petit libellé au-dessus évite ce problème ; il ne bouge, de moins de 1 pt, que lorsque la valeur passe à une autre dizaine.
Même avec les traits exactement alignés, la valeur paraissait encore légèrement à droite. C’est une illusion courante quand un grand chiffre se trouve sous un petit texte : un chiffre arrondi de 12 pt est bien plus grand qu’une légende légère de 7 pt, et l’œil perçoit le bord du plus grand glyphe comme plus en retrait. J’ai comparé 0, 0,5 et 1 pt. À 1 pt, le chiffre semblait déjà déborder, alors la valeur dépasse désormais de 0,3 pt vers la gauche, un peu plus d’un demi-pixel, juste assez pour que les deux lignes paraissent posées sur le même bord.
Les lignes bleues marquent le bord gauche de chaque libellé. De haut en bas : exactement aligné, valeur dépassant de 0,3 pt vers la gauche, puis de 1 pt. C’est celle du milieu qui a été retenue.
## Réserver la largeur de chaque nombre
Quand un élément de la barre des menus change de largeur, toutes les icônes à sa droite bougent avec lui, il faut donc réserver pour chaque type de valeur la place de sa forme la plus large. Deux oublis sont apparus. La vitesse du ventilateur s’écrit `850` sous 1000 tr/min et `2.1k` au-delà, et les deux formes réservaient des largeurs différentes, si bien que toute la barre des menus sautait quand le ventilateur franchissait 1000 tr/min. Le swap utilisait directement le format d’octets du système, ce qui donnait `10.52 GB`, ou `1,2 Go` sur un système en français : trop long pour une cellule de 12 pt, et sa largeur variait avec la valeur. Les deux formes du ventilateur partagent désormais une même largeur, et le swap s’affiche toujours dans la barre des menus sous une forme courte d’au plus trois chiffres, comme `512 MB`, `1.2 GB` ou `12 GB`. La valeur complète reste dans la fenêtre contextuelle.
Le débit réseau a eu droit à une correction au passage. Sous 10 KB/s, il affichait une décimale, si bien qu’un `0.0 KB/s` au repos se retrouvait au-dessus de `86 KB/s`, avec un séparateur décimal sur une ligne et pas sur l’autre, et la paire alignée à droite ne paraissait jamais régulière. Un dixième de kilo-octet par seconde n’apprend pas grand-chose, les KB/s sont donc désormais toujours des nombres entiers. Les MB/s gardent une décimale sous 10, là où la différence entre `1.5 MB/s` et `1 MB/s` compte vraiment.
## Comment le configurer
Dans les Réglages de Mole, ouvrez l’onglet Barre des menus. La ligne Affichage propose trois options : Coureur n’affiche que la taupe, Mesures n’affiche que les chiffres, et Les deux affiche la taupe avec les chiffres à côté, choisissez donc Mesures ou Les deux pour voir les chiffres dont parle cet article. Quelques lignes apparaissent alors en dessous. Disposition réglée sur Ligne donne les cellules avec le libellé au-dessus de la valeur, et Empilé donne les deux lignes de petit texte. Indicateur 1 et Indicateur 2 choisissent les deux mesures, CPU et mémoire par défaut, et chacune peut passer au GPU, à la température, à la puissance, au ventilateur, au swap ou à la batterie d’un appareil Bluetooth. Activer Débit réseau ajoute l’envoi et la réception sur la droite. La taupe elle-même peut être remplacée par un autre personnage dans Style, et le bouton à côté retourne le personnage.
On me demande parfois pourquoi la taupe court si vite. Son rythme, c’est la lecture du CPU : plus le Mac est occupé, plus elle court vite. Elle suit la plus haute des deux valeurs, l’utilisation globale du CPU ou la charge moyenne sur une minute. Au repos complet, elle fait un pas environ toutes les 1,3 secondes, et à partir de 70% elle cesse d’accélérer, à environ quatre pas par seconde. La courbe monte plus vite à faible charge pour que 10% et 30% se distinguent nettement, ce qui veut dire qu’avec un navigateur ouvert et un peu d’écriture en cours elle court déjà environ deux fois plus vite que lorsque le Mac est au repos, et compiler du code ou exporter une vidéo la fait vraiment courir. Ce rythme est un signal voulu, c’est pourquoi il n’y a pas de réglage de vitesse à part. Les autres personnages vont à leur propre rythme, car chacun a un nombre différent d’images d’animation. Quand seule la taupe est affichée, en la survolant on voit aussi l’indication « Court plus vite quand le processeur est plus sollicité ».
L’onglet Barre des menus dans les Réglages, où se règlent le mode d’affichage, le personnage, la disposition et les mesures.
## Ce que j’ai essayé et laissé tel quel
À un moment, la cellule de température m’a paru trop grande. J’ai fait une version avec l’unité en 9 pt et une autre en 10 pt, et dans les deux le `°` plus petit descendait vers la ligne de base, si bien que `58°C` se lisait comme la coquille `58°c`, et le signe pourcentage devenait nettement plus petit que celui que Stats affiche juste à côté. En mesurant de nouveau, j’ai vu que le chiffre avait exactement la même taille que dans la cellule du processeur ; il paraissait plus grand seulement parce que `58°C` a une capitale de plus que `44%`. La taille est donc restée la même.
Il y avait aussi une ancienne règle selon laquelle seule la disposition sur deux lignes pouvait apparaître à côté du personnage, jamais ces cellules avec le libellé au-dessus de la valeur. La version contre laquelle cette règle avait été écrite utilisait du 12 pt demi-gras. Sans le gras, la raison ne tient plus, les deux dispositions peuvent donc désormais apparaître à côté du personnage, et les cellules sont le choix par défaut.
Dans l’ordre : le personnage avec les mesures, avec le débit réseau en plus, la disposition sur deux lignes, les mesures seules, le ventilateur et le swap, et la pleine charge. Aucune ne se confond avec sa voisine.
Avec le recul, aucun de ces changements n’est important. Ce sont des demi-pixels, une décimale et quelques points d’espacement, et ensemble ils décident si une icône se fond dans la barre des menus ou en saute aux yeux. Si vous développez une application pour la barre des menus, mettez votre élément et quelques voisins populaires sur une même capture et comparez-les, mesurez l’encre plutôt que la boîte, et réservez la largeur maximale de chaque valeur. Après ces trois étapes, il ne détonnera probablement plus.
Toutes ces valeurs sont désormais couvertes par des tests, un pour la graisse, un pour la largeur et un pour l’alignement des libellés, si bien qu’une modification ultérieure risque moins de les défaire. C’est la même idée que dans [Concevoir Mole pour rester discret](https://mole.fit/fr/blog/the-design-of-mole) : ce qui vit dans la barre des menus est au mieux quand on le regarde tous les jours sans jamais le remarquer.
---
Canonical HTML page: https://mole.fit/fr/blog/mole-menu-bar-redesign
Blog index for agents: https://mole.fit/fr/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
