Zoom and fonts
By glazou on Friday 12 October 2007, 16:17 - Mozilla - Permalink
We have, all browsers have a problem with fonts related to zooming. Basically, all zoom implementations suck because of the font system. Let me show you graphically, using CNN.com's home page :
| 100% | 50% | |
|---|---|---|
| Firefox |  |
 |
| IE 7 |  |
 |
| Opera |  |
 |
Many things to notice in these screenshots:
- the 3 browsers behave consistently at 100% ; don't laugh, that's a bit of an achievement
- Firefox and Opera change the hyphenation of the first line of title below Gore's photo because of the font size, not adapted to the millipoint to the zoom factor
- MSIE 7 sucks, and deeply sucks. The title is hidden below the photo and the whole thing is completely messed up
So I have one question about the font size problem shown by the reformating of the title : is that a bug or is that caused by the font handling of the system and there's nothing we can do about it ?
(comments exceptionnally allowed)
Comments
I found this article *exceptionally* fascinating:
http://antigrain.com/research/font_...
Hummm, from what I know of font rendering, there is a little process called "hinting" for low resolution -typicaly on screen- rendering, that involve changing the control point position so that the rendered glyph has a nice shape.
The consequence of this process is that the width of a glyphe at the size (size/2) is not the half of the width at size (size). and most of the time, hinting leads to a wider character to preserve the glyph characteritics, so most of the time (if not all the time) , delta(glyphe,size)=(Width(glyphe,size/2) - Width(glyphe,size)/2) >= 0.
When you sum all those deltas, you end up with a big enough difference to change the hyphenation.
==> that's why I think that it's caused by the font handling system
Eeeehhh... normal that you don't have the "updated" line on the MSIE7 shot ?
About the hyphenation, IMHO, i think this is because the height size of the font shoul be rounded to be rendered... and if it's a odd height, there is a half pixel that was truncated.
OH ! juste une remarque proprement débile (puisque je ne connais pas ta résolution d'écran ni la page CNN.com en question), mais ne serais-ce pas dû au fait qu'il y ai des barres de défilements qui faussent le calcul de la taille du viewport ?
Si la largeur de la légende est exprimée de façon relative par rapport au viewport, cela pourrait expliquer cela
oups, i should written that in anglishe.
Sporniket is exactly right. To make the text look better, hinting tweaks the sizes of glyphs, so they're not exactly 1/2 the size. (Also we sometimes round things to the nearest pixel, again to make things look better, but we do that at rendering time instead of layout time so those adjustements won't affect linebreaking and are not relevant here.)
it reminds me an article written by Roge Black, webdesigner of bloomberg.com or msnbc.com in "Technology Rewiew" : (infrench, I have the french translation of the review):
"Il est désormais possible de télécharger des sites entiers conçus en flashou en WPF et de les utiliser au moment où on le souhaite. Le logiciel de lecture du NYTimes, par exemple, reprend les oeils des caractères du Tiles et les polices sont donc très lisibles. Les colonnes sont justifiées et un algorythme limite le nombre de lignes creuses. Si vous redimensionnez les fenêtres, les colonnes s'adaptent, les images changent de taille et les publicités se replacent. Hélas, les webdesigners résistent à ces avancées. Mais ils rejetaient aussi le Flash à ses débuts..."
oeil de caractère: hauteur du caractère bas de casse, sans ses jambages inférieurs et supérieurs. On utilise la lettre "x" comme caractère de référence car cette lettre donne exactement la hauteur d'oeil.
Ligne creuse : Ligne qui n'occupe pas la totalité de la justification.
De toute maniere, dans IE7, la fonction de zoom est bien plus pratique.. Et à mon avis, c'est pourquoi ils ont pas des masses travaillé cet algo-ci.
Firefox 2 or 3?
I have become a ff3 addict in the last two weeks due to the new screen zoom features (which needs the
"Full page zoom" extension to be fully useful).
Sorry, but it's unlikely that CNN didn't apply a ton of hacks to make the fonts look the same size on three browsers.