1

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.stack.imgur.com/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.

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
97847658
  • 163
  • 5
  • Is your `line-height` not big enough? – animuson Feb 26 '12 at 03:41
  • @animuson: Nope, that's not it. For me, the problem shows up regardless of the line-height. – 97847658 Feb 26 '12 at 03:45
  • It [does not do this for me](http://jsfiddle.net/Rbu2S/) in Firefox 10. – animuson Feb 26 '12 at 03:46
  • @animuson: Hm. Your link _does_ do it for me, and I'm running 10.0.2. – 97847658 Feb 26 '12 at 03:48
  • It is not as simple as 'Firefox always screws up on the letter'. For me, Firefox 10.0.2 on Mac OS X 10.7.3 shows the letter, U+016F LATIN SMALL LETTER U WITH RING ABOVE, fine, both here (ů) and in the question. So, you are going to have to characterize your problem environment a lot more carefully. It probably depends in part on the platform (Windows, Linux, Unix, Mac OS X, ...). It may well depend on the fonts installed on your machine. Have you checked that there is no damage to the font? – Jonathan Leffler Feb 26 '12 at 03:55
  • 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. I'm not sure how to test for font damage. – 97847658 Feb 26 '12 at 04:19
  • Try reinstalling the font? But, at any rate, your system is very different from mine. – Jonathan Leffler Feb 26 '12 at 04:42
  • I dug out the Windows 7 HP machine that I look after for a summer-time club, and the Firefox on that (now 10.0.2 too) displays the StackOverflow page with the information OK - but that is not in Times New Roman. I created a simple HTML page, and it worked fine: `SMALL LETTER U WITH RING OVER

    ů

    Any news of ů` with a seriffed font - probably Times New Roman.     – Jonathan Leffler Feb 26 '12 at 05:17

2 Answers2

2

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks for the information. You seem to be saying CSS smallcaps are a bad idea. But how else can I represent a text with smallcaps on a browser? Is there some alternative? – 97847658 Feb 26 '12 at 05:46
  • @97847658, the problem is not with CSS but with the lack of small-caps fonts for most typefaces. This forces browsers (and word processors etc.) use fake small-caps, created algorithmically. You can avoid this by using embedded fonts, if you can find a suitable typeface that has the fonts you need. Note that e.g. in the Linux Libertine font, small caps are implemented using Private Use positions – certainly not portable. – Jukka K. Korpela Feb 26 '12 at 07:26
0

Make sure you declare this

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
Ajay
  • 100
  • 3