Des mots bizarres utilisant la transformation webkit pivotent en chrome

Question

J'ai essayé d'obtenir du texte vertical sur une petite page Web de test après avoir lu un article sur la façon de procéder. Dans mon CSS je donne les résultats suivants:

#navMenu li{ 
    list-style:none; 
    float:left; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

Et le navmenu dans mon balisage est:

<ul id="navMenu"> 
    <li>Home</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul> 

Cela fonctionne très bien dans FF 3.6, IE8 mais dans Chrome certains mots sont déformées (!) /flou. 2 mots particuliers qui semblent 'bizarres' sont: Contact et Portfolio. Pourquoi certains mots seraient-ils foirés, mais tous les autres sont corrects?

Je pensais qu'il y avait une lettre 'ronde' (c, o, q etc) à la fin du mot, donc j'ai fait un peu de test (nullement exhaustif), j'ai changé Portfolio pour: Portfolix et Portfoliw qui allait bien mais si j'ai essayé Portfoliq, Protfolie ou Portfolit alors c'est déformé.

Des idées sur les raisons pour lesquelles cela se produit et sur les moyens d'y remédier?

Answer 1

Chrome utilise Windows GDI pour le dessin de texte sous Windows. Je devine que pour faire pivoter, il va dessiner le texte horizontal à un bitmap en mémoire, puis le faire pivoter et le rendre à l'écran. Pourrait être un problème avec la préservation du lissage de la police ou peut-être font hinting est fait en supposant l'orientation horizontale, puis la transformation est appliquée; entraînant la distorsion des pixels. Vous pouvez également être intéressé par subpixel rendering.

Voici a blog comparant le rendu sous-pixel en chrome et firefox. This est un article plus ancien sur le rendu des polices de Firefox.