Problèmes d'alignement des polices et textes

publié le 28 juillet 2026, mis à jour 28 juillet 2026

Voir la vidéo ici https://codeberg.org/cartes/web/pulls/1772#issuecomment-17970518.

Ah merci, j'avais pas vu ! Tu es sur Windows ? Au-delà du bug très curieux du curseur, je remarque plein de choses qui vont pas en termes de marges intérieures. Aucun des boutons de catégorie n'est aligné, et le texte de saisie non plus ! C'est fou ça, la différence de rendu. Pourtant on n'utilise aucune propriété CSS spécifique à Linux (donc Ubuntu, Android, etc.) ou iOS. Je créée un nouveau ticket : #2387.

laem
Une grosse différence sur la police, spécifique à Windows, pourrait expliquer ça. Je comprendrais mieux dans ce cas l'idée de fixer la police. Mais ça m'embêterait d'imposer du poids à tout le monde pour palier ce genre de problèmes spécifiques à un OS.
7ute
Problème présent sur Firefox Mac. cf. bug report ouvert depuis… 13ans ^^' https://bugzilla.mozilla.org/show_bug.cgi?id=493583
laem
C'est fou ça. J'imagine que c'est un conflit entre Apple qui verrouille son OS et Firefox qui n'a pas envie de faire ce taf ?
7ute
Non, c'est dû au fait qu'Arial (la police de fallback sur windows) et Helvetica n'ont pas la même baseline, et que webkit (Safari / Chrome) pousse artificiellement la baseline de certaines font spour les faires coller à leurs équivalent de fallback sur windows (cf la réponse de David Hyatt a Eric Meyer ici: https://lists.w3.org/Archives/Public/www-style/2008Jan/0330.html)

Je comprendrais mieux dans ce cas l'idée de fixer la police.

C'est en effet la façon la plus simple d'avoir un rendu uniforme cross-platform
etienneJr
En l'occurrence, je n'étais pas sur Windows ! Mais sur Ubuntu (22 je crois?) et Firefox à jour.
laem
Ah ça c'est curieux. Tu pourras nous donner une capture de l'onglet Polices des devtools ? Inspecteur -> panneau du bas pour le CSS -> onglet Polices -> Polices utilisées.
etienneJr
voilà. c'est bien ubuntu 22.04 et firefox 152.0.3 (64 bits). ça aide ?
laem
Intéressant, c'est pareil chez moi, et pourtant j'ai pas le même rendu erroné. (On utilise Arial pour les titres et Helvetica pour les contenus, ce qui se traduit en Liberation Sans et Nimbus Sans).
laem
Apparemment, en utilisant une font variable comme Inter on pourrait avoir toutes les épaisseurs et l'italique pour 40 kb. Ça me semble tolérable, bien mieux que le poids excessif des polices tradi.

Sinon il y a cette approche, consistant à spécifier les polices propres des systèmes principaux.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Liombe
@laem wrote in https://codeberg.org/cartes/web/issues/2387#issuecomment-18872216:

Apparemment, en utilisant une font variable comme Inter on pourrait avoir toutes les épaisseurs et l'italique pour 40 kb. Ça me semble tolérable, bien mieux que le poids excessif des polices tradi.

Sinon il y a cette approche, consistant à spécifier les polices propres des systèmes principaux.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Très bonne idée la font variable, je pense que c'est la meilleure solution pour que tout le monde ait le même rendu au niveau de la typographie.

Et en fallback, le bout ce bout de code est très bien, c'est la valeur de base de typographie de Tailwind CSS par exemple.
laem
D'acc. On pourrait tester cette nouvelle font-family, puis si on remarque toujours les décalages (au moins chez Étienne), on passera à la police unique variable.
etienneJr
Voilà la comparaison chez moi entre
- prod : Helvetica, Arial, sans-serif; en général, et Arial, Helvetica, sans-serif; pour les titres
- test local : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; pour les deux
  - (tiens bizarre je n'ai pas les traductions des tags osm 🤔)
@laem j'ai l'impression que ça résout les défauts d'alignement que tu avais remarqués et moi non ?

Je pousse ça en prod ? ou bien c'est juste en fallback car il vaut mieux de toute façon passer à 1 police unique pour être sûrs que tout le monde ait le même rendu ?

@Liombe tu as proposé Work Sans dans #2583 mais je la trouve vraiment surprenante, tu en aurais d'autres à proposer ? (j'imagine qu'il faut commencer par se mettre d'accord sur la police avant de remettre en forme les boutons ?)

prod test local
laem
C'est intéressant car ça résout beaucoup de problèmes d'alignement que tu as chez toi, mais ça en introduit aussi de nouveaux : l'icône salon de coiffure qui était à peu près aligné de façon acceptable, est maintenant trop haut.

Idem chez moi

En utilisant la police système pour chaque site, ce qui est une bonne idée pour un blog qui n'aura que très peu de problèmes d'alignements, j'ai peur que dans notre cas on en ait plein car on a plein de combinaisons icône + texte, plein d'éléments interactifs aussi.

Pas fan non plus de la police Ubuntu, par exemple ici sa façon de faire disparaitre les barres du n donne un résultat trop simpliste je trouve.

vs la prod en Liberation Sans
laem
Une approche pourrait être d'utiliser Noto partout. C'est la police de repli sur la carte (le format de police de la carte n'est pas mutualisable avec le HTML) quand roboto gère pas les caractères non-latins. Je me demande si on gagnerait pas bcp de ko en passant tout à Noto du côté des cartes et par cohérence visuelle, on mettrait Noto aussi dans l'app.

C'est une version libre de Arial/Helvetica, compatibles en termes de dimension.

Et au passage, on n'aurait pas de changement à faire pour afficher l'Arabe, l'Hébreu, le Vietnamien, etc.

Edit : ah bah non c'est naïf évidemment, haha. Si on ne subset pas Noto au latin, son poids devient énorme.

C'est déjà ce que fait MapLibre, je comprends mieux ! export const glyphs = getFetchUrlBase() + '/fonts/glyphs/{fontstack}/{range}.pbf' La carte ne va demander que le range de police nécessaire en fonction du besoin des tuiles. Intelligent !
laem
Je viens de tester la police Inter, en variable. On retrouve à peu près le style actuel (Inter reproduit Arial & co), sans pb d'alignement.

Reste à évaluer l'ajout de poids. 🎮 C'est déployé sur dev2.cartes.app et codé sur #2587. Discutons implémentation pratique sur la PR.

Pour les utilisateurs non-latins, on verra plus tard, il faudra faire un chargement par locale.
laem
https://mu.social/profile/did:plc:eypg6v3q62jkpoxbgicirvjs/post/3mrq7jlr3fs2m
etienneJr
@laem wrote in https://codeberg.org/cartes/web/issues/2387#issuecomment-20227834:

https://mu.social/profile/did:plc:eypg6v3q62jkpoxbgicirvjs/post/3mrq7jlr3fs2m

tu peux peut-être préciser que c'est que le début 😅, qu'on va continuer le boulot sur l'UI avec de nouveaux contributeurices !

✏️ Participer à la discussion

prod	test local