htmlcssfirefoxunicodesmallcaps

Firefox screws up ů in smallcaps?


I'm working with the following line of HTML/CSS:

<span style="font-variant:small-caps;">o blahov&#367;li.</span>

The HTML entity &#367; 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.


Solution

  • 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 u&#x30a;. 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.