Problèmes d'alignement des polices et textes #2387

Voir la vidéo ici #1772 (comment).

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.

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.

Problème présent sur Firefox Mac.
cf. bug report ouvert depuis... 13ans ^^' https://bugzilla.mozilla.org/show_bug.cgi?id=493583

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 ?

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

En l'occurrence, je n'étais pas sur Windows ! Mais sur Ubuntu (22 je crois?) et Firefox à jour.

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.

voilà.
c'est bien ubuntu 22.04 et firefox 152.0.3 (64 bits).
ça aide ?
image

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).

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;

@laem wrote in #2387 (comment):

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.

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.