CODEWITHSUNDEEP
htmlcssbrowsertextunicode
usr
usr

Reputation: 171178

Why Do Some Specific Unicode Characters Not Render in Google Chrome?

On the same machine using the same font (Arial) I get different text rending from Chrome and IE9:

<html>
<head>
</head>
<body style="font-family: Arial;">
IIIIIIIII&#x2AF8;
IIIIIIIII&#x2B46;
IIIIIIIII&#x2A20;
IIIIIIIII&#x27A4;
IIIIIIIII&#x27A7;
IIIIIIIII&#x269E;
IIIIIIIII&#x25B6;
</body>
</html>

It looks like this: enter image description here

Why does this happen? Is there a way to make Chrome correctly render the two broken arrows which render correctly in IE? (Positions 1 and 3)

Upvotes: 4

Views: 11398

Answers (2)

Sparky
Sparky

Reputation: 98718

Your HTML code is missing a Doctype declaration, but even more importantly, it's missing the Character Set declaration.

Read this article for more information:

The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

EDIT: It's more likely that these particular characters are missing from the OS/browser's various default font sets. You could declare the proper fonts but if the user's system does not have them installed, this problem will persist. I tested the code in the answer by Jukka, which I believe to be be correct, and I cannot get it working in Safari Mac because those fonts are not installed in my system.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

Your CSS property name has a typo, font-familiy instead of font-family, so the declaration is ignored. However, the declaration would not affect the rendering much anyway, since Arial does not contain the special characters used. This means that browsers will try to pick up glyphs from different fonts, and their methods may vary here; IE is notorious for failing to do this in many occasions: it often cannot render a character even though some font in the system contains it.

To get better rendering, you need to analyze the support to the different characters in commonly available fonts and write suitable lists as values for the font-family property. You may wish to define different lists for different characters, wrapping them inside span (or, why not, font) elements.

For example, the first special character U+2AF8 (&#x2AF8;) is present in a few fonts only, though in addition to those listed at http://www.fileformat.info/info/unicode/char/2af8/fontsupport.htm the Cambria Math font contains it, too. So you could use for it

font-family: Cambria Math, Symbola, Quivira, STIX, Code2000;

You should also set the line-height property for the enclosing block element (like p) to a reasonable value , like 1.3. Otherwise the very large inherent line height of Cambria Math may cause too large spacing between lines.

Upvotes: 4

Related Questions