Sent by Arlen Walker on 4 November 2002 17:05
Any of you uninterested in a rather esoteric bug in IE can reach for the
remote and flip the channel now. It's something a css designer needs to
know only if they're "coloring outside the lines" by selecting the "font
less travelled."
Our cast of characters:
Internet Explorer 5.2.2 (5010.1)
Adobe Gill Sans (and family)
Mac OSX 10.1.5
Apple GillSans (and family)
Silk 1.0
For those of you wanting to try this at home, use this code in an html
file:
<p style="font-family:'Gill Sans'">
Now is the time for all good men to come bring a band-aid to the party!
</p>
Repeat it once for each member of the two families for a complete
exposition of the fault.
The crime: Killing good type display, and seriously injuring the eye of
any innocent bystanders who are witness the crime.
With some inspiration and help from Philippe Wittenbergh I began to
examine what I thought was a css support problem in more detail. IE/Mac
was corrupting the display of my web pages whenever I dared use GillSans
(Apple's font, not to be confused with Gill Sans, Adobe's font).
I discovered it was font-related, and the problem disappeared when I
dropped GillSans from the font list. Philippe then checked in, and told
me that the problem also disappeared when he used "Gill Sans" instead of
GillSans.
Thinking it was a font problem, I set the same line with each of the
faces (11 lines in all) in a different program, and saw no disasters on
the display. I set them in an html file and fed them to IE, and things
got interesting.
The Apple font is a TrueType font, and I found it renders quite well in
IE when at "typical" screen font sizes, such as 12, 14, or 18pts. (And
yes, I tested px as well, and the same issues hold.) But at 17pt, for
example, a large space appears between the 8th and 9th words of the
16-word test sentence I was using. And at 19pt, the effect is reversed,
with the two words overlapping each other.
None of the above effects happen when using the Adobe font, and also
none of them happen with the Apple font in any other application. (The
plot thickens: clicking on the sentence creates another space in the
sentence, proportional to the distance from the midpoint -- in words --
of the sentence. Click on the last word in the sentence and a big gap
appears; click on the next word out from the center and a small one
appears.)
Silk is a font-smoothing addition for OSX 10.1 and, while its nature
makes it a suspect in this case, it's presence or absence seems to have
no effect on the bug.
Hypothesis: Apple's font is badly hinted, because some problems appear
at odd sizes in other applications, but nothing so bad as what IE does
to it. IE appears to be exacerbating the problem by handling those hints
badly. It appears to be mapping out the length of the line via a bad
font metric calculation, then filling in, word by word, from either end
of the sentence, leaving all of the error to accumulate in the middle,
hence the gap or overlap. This only happens with GillSans, and not any
other of the fonts supplied with OSX, so it must be something in the
hints that drives IE mad.
Why the click effect should happen is beyond me; I'll let other, more
knowledgeable heads speculate on that one.
Workaround: *Don't* use Apple's "GillSans" font, or any of its siblings
in your design, even though it ships with OSX.
OK, so I probably spent more time tracking this down and telling you
about it than I should have.
Have fun,
Arlen
-----
In God We Trust, all others must supply data
__________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.meyerweb.com/eric/css/discuss/info.html
Sponsored by www.westciv.com - CSS resources | software | learning
