[Résolu] Lissage typo diff. sur 2 environnements a priori identiques

Bonjour,

j'ai un rendu différent de mon texte sur deux PC a priori identiques (Firefox 5 sur Windows 7). Le lissage de la typo est plus important sur l'un des deux cas et prend donc plus de place en largeur (voir images ci dessous)

http://micromix.fr/test-lissage/font-size-firefox-windows-7.png
(image 1)
Il faut regarder la largeur totale de la liste des territoires. Ici c'est ok, le dernier, "Mayotte", est bien aligné avec le bouton orange dessus. J'ai ce même rendu sur beaucoup de postes chez mes collègues fraichement passés sous windows 7 (environ 10 postes).

http://micromix.fr/test-lissage/font-size-firefox-windows-7-bug.png
(image 2)
Maintenant j'ai CE rendu chez deux autres de mes collègues seulement, récemment passés sous windows 7 aussi. La largeur de chaque texte est un peu plus importante et "Mayotte" fini par déborder à droite. Certains pays avant ça, passent également à la ligne d'ailleurs...

J'ai préparé une simple page de test qui permet de connaitre la largeur d'un texte (via javascript) pour voir si ce n'était pas le html ou css de ma page qui parasitait et pouvait créer ce bug. Apparemment ce n'est pas le cas puisque ceux qui ont le "bon rendu" (image 1) obtiennent 845px et les autres (image 2) ont 857px...
http://micromix.fr/test-lissage/test-lissage-typo.html


Ce que j'ai pensé à vérifier :
- le cleartype windows est celui par défaut sur tous les postes, et est donc activé.
- le zoom navigateur est bien celui par défaut aussi (ctrl + 0)
- l'interlettrage est à zéro.

Connaissez vous ce type de bug ?
Savez vous ce qui peut causer cette différence entre ces deux rendus ?

Merci !

Je précise que j'ai également fait installer mes fichiers de typo ARIAL a un des postes ou ça bug. Ca ne change rien.

Je viens de comparer avec Chrome sur chacun des postes mais ce coup ci c'est ok, tout le monde obtient 845px de large. Ca vient donc bien de Firefox.

KZS a écrit :
Connaissez vous ce type de bug ?

Ben là comme ça je dirais que c'est pas un bug, mais une différence normale de rendu des fontes comme tu peux en avoir entre deux configurations différentes. Alors certes les configurations sont très semblables, mais les rendus sont assez proches aussi.

Tu peux toujours chercher l'origine exacte de cette différence de rendu en fouillant dans les options de configuration de Windows 7 (y compris certaines options un peu cachées s'il y en a), mais ça n'a pas un grand intérêt.

Tu aurais plutôt intérêt à ne pas compter sur un rendu très précis en pixels d'un texte donné, et à laisser un peu de marge au texte.

Essaie de regarder du côté des tailles de polices minimales, aussi.

Par exemple mon FF force toutes les polices à 12px mini, je casse souvent des designs pensés pour les gens-qui-ont-de-bons-yeux en 10px.

fvsch a écrit :

Ben là comme ça je dirais que c'est pas un bug, mais une différence normale de rendu des fontes comme tu peux en avoir entre deux configurations différentes. Alors certes les configurations sont très semblables, mais les rendus sont assez proches aussi.

Tu peux toujours chercher l'origine exacte de cette différence de rendu en fouillant dans les options de configuration de Windows 7 (y compris certaines options un peu cachées s'il y en a), mais ça n'a pas un grand intérêt.

Tu aurais plutôt intérêt à ne pas compter sur un rendu très précis en pixels d'un texte donné, et à laisser un peu de marge au texte.

Apparemment ça viendrait de Firefox seulement, mais maintenant qu'on est en version 5 (tous) et qu'il n'affiche plus de sous-versions c'est difficile de savoir ce qui peut faire ça. Dans les deux postes ou ça bug y'en a un sans plugins et l'autre avec plein de plugins de dev. Et les deux buggent donc quand meme ... Ca ne vient dons pas des plugins non plus.
J'ai effectivement commencé a laisser un peu de marge, 5px, puis 10px puis finalement environ 20px. Le problème c'est alors que j'ai un cas ou c'est aligné et l'autre non. Bref j'aimerai quand même savoir d'où ça peut venir. Je posterai ça sur bugzilla par la suite, mais j'aimerai voir si on peut trouver une piste avant
Merci pour votre aide

notabeneorg a écrit :
Essaie de regarder du côté des tailles de polices minimales, aussi.

Par exemple mon FF force toutes les polices à 12px mini, je casse souvent des designs pensés pour les gens-qui-ont-de-bons-yeux en 10px.

Ouais bonne idée. Mais malheureusement j'ai aussi comparé avec Firebug la liste des propriétés css effectivement calculées (avec un comparateur de code) et y'a aucune diff ...

Cela dit, je viens de faire un test sous OS X 10.7 et j'ai du 845px dans Safari, Chrome et Opera, et 857px avec Firefox 7. Et ce avec lissage sous-pixel (par défaut) ou pas (mon réglage habituel).
Pas de taille de fonte minimale.

Il est possible que Firefox passe certains paramètres spécifiques aux libs système de rendu des fontes, et que ça affecte légèrement le rendu.

KZS a écrit :
Le problème c'est alors que j'ai un cas ou c'est aligné et l'autre non.

En display:table-cell tu dois pouvoir faire un truc relativement souple et fluide. Avec le "tableau" en width:100% et dans chaque "cellule" le contenu en white-space:nowrap par exemple.
Bien sûr si ça doit être compatible IE7, ben non (ou faut un fallback en pseudo inline-block ou un tableau de mise en page en dur).

fvsch a écrit :
Cela dit, je viens de faire un test sous OS X 10.7 et j'ai du 845px dans Safari, Chrome et Opera, et 857px avec Firefox 7. Et ce avec lissage sous-pixel (par défaut) ou pas (mon réglage habituel).
Pas de taille de fonte minimale.

Il est possible que Firefox passe certains paramètres spécifiques aux libs système de rendu des fontes, et que ça affecte légèrement le rendu.

Bien vu. Merci pour ce test sur Mac OS.
Ce serait donc les dernières version de Firefox (version 7 tu as dit ? ah ça va vite maintenant j'étais pas au courant ) qui rendent la typo un peu trop lissée/épaisse...

Je vais reporter ça sur bugzilla.
Merci à vous !

fvsch a écrit :

En display:table-cell tu dois pouvoir faire un truc relativement souple et fluide. Avec le "tableau" en width:100% et dans chaque "cellule" le contenu en white-space:nowrap par exemple.
Bien sûr si ça doit être compatible IE7, ben non (ou faut un fallback en pseudo inline-block ou un tableau de mise en page en dur).

J'ai la chance de ne pas avoir à supporter ie7 dans ce projet et j'ai déjà testé la solution que tu proposes. Ça fonctionne mieux mais dans chaque cellule y'en a plein qui passent à la ligne ...

Disons que je trouverai bien un bidouillage mais c'était surtout pour soulever cette différence entre deux configs identiques. Ça me gêne pour d'éventuels autres cas puis même, je ne trouve pas ça normal. Je vois que IE9 affiche 858px dans ma page de test mais bon, entre deux firefox de même version c'est encore inexpliqué </iwanttobelieve>

Je pense effectivement que ça vient du mode de lissage.

Pour le coup des sous-versions, il n'y a qu'une seule 5.0 (sur Windows). Il faut aller regarder dans about:support, dans la section graphics. Je pense que les drivers de l'un ne permettent pas de passer par la même API de dessin.

Si tu fais un bug, rajoute ":rik" en copie.

rik24d a écrit :
Je pense effectivement que ça vient du mode de lissage.

Pour le coup des sous-versions, il n'y a qu'une seule 5.0 (sur Windows). Il faut aller regarder dans about:support, dans la section graphics. Je pense que les drivers de l'un ne permettent pas de passer par la même API de dessin.

Si tu fais un bug, rajoute ":rik" en copie.

http://micromix.fr/test-lissage/acceleration-graphique-ff5-ok.png
(cas 1, où le test rend 845px)

http://micromix.fr/test-lissage/acceleration-graphique-ff5-bug.png
(cas 2, où le test rend 857px)

Ps : j'ai voulu superposer pour comparer et même là, la typo ne fait pas la même taille donc la hauteur du tableau est plus grande dans le cas 2

Bah voilà, l'une a des pilotes à jour, pas l'autre. Donc ça désactive Direct2D, DirectWrite (pour les font justement) et WebGL. Y a même un joli message pour dire ce qu'il faut faire (certes en anglais).

Je vais me renseigner pour savoir si on prévoit de donner des warnings aux utilisateurs de drivers anciens. (de la même manière que Flash)

Ouais. On dirait bien que c'est la cause.

Donc le cas 1, que je pensais être le cas de référence, n'est finalement pas le bon car les pilotes ne sont pas à jour. C'est pourtant le cas le plus répandu (en tous cas ici à mon taf et chez quelques twittos).

Je crois qu'on a mis le doigt dessus on peut donc fermer ce topic (?)
Je vais le marquer en résolu si vous le permettez.

Merci à vous pour votre aide !

Par contre, si la machine avec les drivers mis à jour n'a pas le même rendu que IE9, là il faudra ouvrir un bug.

C'est à tester sur ma machine justement. Je télécharge les 107Mo, j'installe ça et poste la réponse dès que possible !

@fvsch : Merci de ne pas fermer tout de suite finalement

ET VOILA !
Pilotes carte graphique à jour, Direct2D, DirectWrite activés

http://micromix.fr/test-lissage/acceleration-graphique-ff5-ok-now.png

J'ai maintenant le même rendu, c'était bien les drivers.

Pour info ma machine (comme celle de nombreux de mes collègues) est passée de winXP à win7 récemment, en passant par un formatage. Les drivers graphiques étaient donc ceux d'origine dans windows.
En revanche ils étaient bizarrement à jour sur deux machines seulement (celles que je considéraient comme les postes buggés à tort). Mais les personnes ne l'avaient pas mis à jour ce sont juste des cartes graphiques un peu différentes apparemment ...

Fin de l'histoire, merci encore

Un super article expliquant les différences entre GDI et DirectWrite (ça parle de Firefox 6 mais les différences GDI/DirectWrite sont bien dans Firefox 4+)
Modifié par rik24d (11 Aug 2011 - 11:39)

Effectivement y'a les explications, merci.
(Y'a une petite erreur dans ton lien, y'a deux fois http)