Question

I am trying to display character code ❯ in a breadcrumb trail navigation which forms this arrow: ❯

It displays properly in Firefox, Opera, and IE but not in Chrome. Am I doing something wrong, or is this a bug in Chrome? Are there any workarounds?

I am using Google Chrome Version 32.0.1700.107 m on Windows 7 Professional 64 bit.

Was it helpful?

Solution

This is almost a duplicate of Can't display character on IE 9, but since that question is specifically about IE and this one is about Chrome, I’ll copy the answer, with modifications, here:

Browsers (including Chrome) sometimes have difficulties in rendering a character when it does not exist in the fonts specified for an element or, in the absence of such specifications, in the browser’s default font. Browsers should check all the fonts in the system to find out one that contains the character, but sometimes they fail to do that. Sometimes the reason is that some font has information that claims that it has a glyph for the character (so the browser stops searching) but hasn’t.

The cure is to specify a list of fonts know to contain the character. For “❯” U+276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT (a rather special character), font coverage is very limited. Most computers have no font containing it. You can specify a font list like the following:

 font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol,
 Quivira, SunExt-A, FreeSerif, Universalia, unifont;

But most users lack all of these fonts. You might consider using a downloadable font (web font) with @font-face. DejaVu fonts, Symbola, and Quivira are free fonts, though they are rather large in file size.

Alternatively, consider using an image. This character is an ornamental dingbat, a special graphic rather than a character, though for legacy reasons it has been encoded as a character in Unicode.

More info: Guide to using special characters in HTML.

OTHER TIPS

Have you tried to use

htmlspecialchars(string)

or

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-8">

[Edit] Apparently, it's a known problem for UTF-16, not UTF-8. [/EDIT]

It's a known problem. The simplest fallback is to use a Unicode surrogate pair.

[sources]

http://www.fileformat.info/info/unicode/char/10095/index.htm

http://mathiasbynens.be/notes/javascript-unicode

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top