I'm working with the following line of HTML/CSS:
<span style="font-variant:small-caps;">o blahovůli.</span>
The HTML entity ů
is for the Czech letter ů. Internet Explorer and Chrome both handle this line correctly. But Firefox chops off the top of the character's tiny ring. See here: https://i.sstatic.net/XFTyj.png
As far as I can tell, Firefox makes this kind of mistake only with this character, and only when this character is in smallcaps.
Am I doing something wrong? Can anyone else verify that this is happening?
Environment where the problem is observed: Windows 7 Home Premium, Firefox 10.0.2, Times New Roman. It looks like other fonts do ů fine in Firefox, but Times New Roman screws up.
Workaround 1: Do not use Times New Roman. It isn’t a particularly good font on screen anyway.
Workaround 2: Replace u with a ring by the letter u followed by combining ring above, e.g. replacing ů by ů
. For some odd reason, this fixes the bug on my Firefox. Caveat: This fix may cause many problems on other browsers or with other fonts.
The problem appears, on my system, for uppercase U with a ring (Ů), too. This is understandable, since CSS “small caps” are, in most situations, just uppercase letters in reduced size. This is one reason why they are not such a good idea.
The exact nature of the bug remains a mystery. It could be something in the way that Firefox reads and uses font information: it is as if it got wrong data about the dimensions of the glyph for Ů in Times New Roman.