3

I'm trying to find a way to make dingbats appear exactly the same in Firefox, Chrome, Safari and IE.

I noticed that the Dingbats appear the same in IE/Chrome/Safari, HOWEVER - in Firefox - they look "thinner". For example - try to visit the following page: http://en.wikipedia.org/wiki/Dingbat You'll notice that when viewing that page in Firefox - the characters look different in comparison to Chrome/IE.

Does anybody know why and how can I cause Firefox to display the characters EXACTLY like they appear in Chrome/IE?

Daniel Vandersluis
  • 91,582
  • 23
  • 169
  • 153
Oren
  • 49
  • 1
  • 4
  • Looks the same on my FF 3.6 and Chrome 8.0. I'm on Vista though. – o.k.w Jan 08 '11 at 10:36
  • The only possible way to make things appear the same is to **send literal bitmaps,** not abstract code points. You cannot possibly dream of making code points appear the same. – tchrist May 24 '11 at 16:16

2 Answers2

3

I'm trying to find a way to make dingbats appear exactly the same

You will never make fonts look exactly the same in all browsers, whether the characters in question are Dingbats or not.

For me, most of the characters on that page don't render in IE or WebKit. IE traditionally has poorer font fallback than average and Firefox typically better then average. The font that Firefox and Opera manage to choose to render the symbols for me is Meiryo (a Japanese font installed with Windows Vista and later). On IE and WebKit it falls back to the much more limited selection of symbols available in Arial, leaving most of the characters missing.

So for the best chance of rendering symbol characters how you want, do as you do for any other characters, and specify the font you want, eg. CSS font-family: Meiryo. But of course anyone who doesn't have that font installed will get something different, and browser/OS settings may change how fonts are rendered in general.

The symbol characters from the Zapf Dingbats set are not safe to use on the web, as the basic default sets of fonts installed by operating systems do not typically include glyphs for most of them. (‘Wingdings’ on Windows does, but it's a legacy font with a custom mapping that puts the symbols on ASCII characters instead of where they should be in Unicode, so again it's not safe to use on the web.)

There are a few symbol characters that you can typically get away with using for commonly-available font sets, eg:

● ■ ☺ ☻ ♥ ♦ ♣ ♠ • ▲ ▼

others, I'd try to avoid.

bobince
  • 528,062
  • 107
  • 651
  • 834
1

Interesting...On a MacOS X 10.6.6 machine with Firefox 3.6.13 and Chrome 8.0.552.231, the Wikipedia pages do render the first table, the ITC Zapf Dingbats, slightly differently. The effect is most noticeable on the solid half-circle at the bottom left corner of the set of characters.

The main Unicode Dingbats table renders almost the same; Firefox generates boxes containing the 4 hex digits of the missing character for the missing symbols, but Chrome just generates empty boxes - I prefer Firefox's technique.

The browsers must either be using slightly different fonts or slightly different font sizes (though I can't detect a size difference by eye). I've not looked at the HTML that is being rendered.

On the whole, I think that this is within the realm of 'allowable variation' - but I'm not an expert. I suspect you have a world of worry ahead of you if you demand pixel-for-pixel similarity between browsers. The concern should be to get the message across clearly.

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278