6

I'm coming across a weird issue with displaying "dingbats" html entities, specifically &#x2714; (✔). I am trying to display some checkmarks, wrapped in a simple <span>:

<span style="font-family: serif; font-size: 200%">&#x2714;</span>

This is working in Firefox 3.6, Chrome and IE8 on my computer, but in Firefox 4 on a coworker's computer, instead of displaying a checkmark, a blank space appears. Strangely, on the same computer, the checkmark appears properly in IE9 and Chrome.

I have tried explicitly specifying other fonts (including: Times New Roman, Arial, "Dingbats"), specifying no specific font, and even not specifying any style information at all, all to no avail. I suppose I could use an image instead, but I wanted the flexibility of being able to style the character without having to create a new image each time.

Any suggestions on how to approach this?

EDIT: This is how this page (with a search for hex 2714) looks for him in...

IE 9:

IE 9

Firefox 4:

Firefox 4

Community
  • 1
  • 1
Daniel Vandersluis
  • 91,582
  • 23
  • 169
  • 153
  • Dingbats tag eh? I, personally, am looking forward to more dingbats questions! Maybe helpful: https://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#Why_aren.e2.80.99t_symbol.2fdingbat_fonts_working.3f – Wesley Murch May 20 '11 at 20:40
  • I see you are specifying `serif` as the font family. This leaves it up to the browser to decide. It's possible that FF4 on his computer is calling a more preferred font? What happens if you specify the Dingbats font itself? Also, please list the font families you **have** tried to specify and note whether they exist on his computer. – Kevin Peno May 20 '11 at 20:41
  • @Kevin: as mentioned, I tried explicitly specifying other fonts, including "Dingbats". For what it's worth, the font itself its not called Dingbats, just the section of unicode characters (as per [here](http://www.danshort.com/HTMLentities/index.php?w=dingb)) – Daniel Vandersluis May 20 '11 at 20:42
  • 2
    @Daniel, I understand that, but it will be important to know what fonts are being loaded on the computer and whether the one you are hoping to use exists. Reason being, if that character is not mapped in the font loaded on the co-worker's computer, your unicode character will indeed be blank. – Kevin Peno May 20 '11 at 20:44
  • @Kevin on his computer, Firefox is set up to use Times New Roman (where it's not appearing) and IE9 is set up to use Arial (where it is appearing). Explicitly using Arial in FF (either through CSS or through browser settings) made no difference, however. – Daniel Vandersluis May 20 '11 at 20:45
  • @Daniel, if you send your friend to [this link](http://www.danshort.com/unicode/) and tell him to enter 2714 into the hexidecimal block, what happens? – Kevin Peno May 20 '11 at 20:46
  • @Kevin: In FF the highlighted cell is blank, in IE it's got the checkmark. – Daniel Vandersluis May 20 '11 at 20:47
  • @Daniel, what happens if you set `font-family: sans-serif !important;`? – Kevin Peno May 20 '11 at 20:48
  • @Daniel, your bug is very annoying :P It is obvious that FF4 is not using the correct font, somehow, but I don't understand why this would be the case. Does your friend see *any* of the symbols on the previous page? – Kevin Peno May 20 '11 at 20:54
  • @Kevin indeed it is! On that table, he sees a few brackets (2768-2775) but no other symbols. Strangely, those brackets he can see don't show up on my computer! – Daniel Vandersluis May 20 '11 at 20:59
  • @Daniel, but if he switches browsers, he sees them all fine?!?! – Kevin Peno May 20 '11 at 21:03
  • @Kevin exactly! The table for him in IE looks the same as it does for me in Firefox/any other browser (including not showing the brackets that I don't get characters for!) – Daniel Vandersluis May 20 '11 at 21:04
  • Have you let him/her update his browser? It might be a faulty installation. Or is his/her FF a beta? – s.d Jun 23 '11 at 10:09

3 Answers3

0

This is a shot in the dark, but I remember reading that some browsers try to "guess" at the character set being used depending on the web server settings, the content, etc. Could the browser be rendering the character using the wrong character set?

Even as I read over my own answer I suspect this may not be the issue... but thought I'd put it out there just in case.

codemonkey
  • 2,661
  • 2
  • 24
  • 34
  • The page is set to UTF-8, but even specifying other encodings explicitly makes no difference. – Daniel Vandersluis May 24 '11 at 14:07
  • The encoding of the source should have no impact on the display Unicode support. US-ASCII HTML can still use entities to encode characters outside that charset's legal values. – brianary Jun 15 '11 at 21:26
0

I cannot reproduce the error in FF4.01. However, this might be to do with the fonts installed on your coworker's machine - as has already been suggested. Ask him to set the standard font to "Arial Unicode MS" or "Lucida Sans Unicode" (if these two don't appear in the fonts list, your coworker would have to install them) and see if it works.

If it does, you should consider setting <span style="font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', sans-serif;">. Although this seems to be a highly machine-specific problem, there is still a chance this might happen on other machines as well.

The character encoding shouldn't have any impact, it should work under ISO-8859-1 as well as UTF-8 to UTF-32 - at least.

s.d
  • 4,017
  • 5
  • 35
  • 65
0

It is possible to force a font in some browsers. The user is allowed to specify a desired font. Even if the site uses a specific font it will not be displayed.

Your coworker might have inserted a value for this option.

ayckoster
  • 6,707
  • 6
  • 32
  • 45