Why do Firefox and Chrome render “ಠ_ಠ” (U+0CA0) differently, even if I set both on UTF-8?

Question

The character in question is ಠ (U+0CA0; ಠ). Here are three screenshots:

Chrome 17 for Mac

Firefox 7 for Mac

Firefox > 4 for Windows

All browsers I tried had UTF-8 as encoding. Here it is copy-pasted : ಠ_ಠ, but I have no idea how you are seeing it.

Answer 1

This is probably due to the different platforms and browsers having different default fonts and font implementations.

The font-family on SO is:

Arial,Liberation Sans,DejaVu Sans,sans-serif

So different fonts will apply on different platforms.

In your Mac examples, the different browsers display a "missing" glyph differently - Chrome with a simple square, FF with the hex Unicode of the missing glyph rendered within the box (in this case 0CA0).

Answer 2

The glyph is not covered by the font used by the webbrowser to display the page which is either the browser default font or the font specified by CSS on the page. You need to make sure that you specify a font by CSS which has most likely guaranteed this glyph in all environments. Arial, for example.

This problem is not related to the character encoding used. A problem in the character encoding used would rather have resulted in Mojibake, not in empty boxes or boxes with hexcode representing the Unicode codepoint which basically identify an unavailable glyph in the font used.

Answer 3

What you posted does not contain U+3232 PARENTHESIZED IDEOGRAPH HAVE “㈲” but a three-character sequence U+0CA0 U+005F U+0CA0, i.e. LOW LINE between two KANNADA LETTER TTHA characters. I don’t know what happened and where. Posting a URL might help.

There are differences in rendering across computers due to different font repertoires. The first two renderings in your screenshot indicate lack of glyphs, i.e. no font in the system contains the character U+0CA0.

Firefox and Chrome (unlike IE) tend to scan thru all available fonts to find the character. But rare special characters often have unsatisfactory implementations in fonts, so for best results, check out the list of fonts supporting the character and specify them in your font-family declaration in order of preference. This also helps poor IE to find a suitable font when available.

If the character you want is really U+3232, then check out http://www.fileformat.info/info/unicode/char/3232/fontsupport.htm It most probably does not cover all fonts, since new fonts emerge. But for this character, Arial Unicode MS is probably the font that will be used in the great majority of browsing situations – and if it is not available, an indicator of missing glyph is seen.