13

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.

Keavon
  • 6,837
  • 9
  • 51
  • 79
  • 1
    Chrome 32 on Win7, displays fine. – Zoey Mertes Feb 09 '14 at 01:57
  • Unicode in chrome can be fickle, especially when working outside of the BMP. I believe you can use a Unicode pair to achieve this. Something like "\uD800\uDC95" or 𐂕 Here is a good source to learn more and troubleshoot the problem. http://mathiasbynens.be/notes/javascript-unicode – geedew Feb 09 '14 at 02:02
  • However note that `❯` is U+276F, and is well within the BMP. – Jim Garrison Feb 09 '14 at 02:37
  • @geedew, using a “Unicode pair” (surrogate pair) is surely not the way to go. They are meaningful in UTF-16 only, and UTF-16 should not be used (and is almost never used) for web pages. Internal usage in JavaScript is something completely different. – Jukka K. Korpela Feb 09 '14 at 05:41
  • @JukkaK.Korpela I did not know that. It makes perfect sense though, thanks! – geedew Feb 12 '14 at 12:43
  • I just checked on a friend's computer using Chrome and it doesn't display it correctly either (same missing glyph box shape) – Keavon Feb 18 '14 at 00:34
  • Not seeing it either. Chrome 36, Windows 7, 64 bit. – kleinfreund Jul 28 '14 at 06:15

3 Answers3

9

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.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I checked through the list of Open Sans glyphs and didn't find this character. However, one thing which leads me to believe it's font-independent is that the symbol on this site, which seems to use its own font for its symbols, didn't display (although almost all other fonts on the page did display): http://character-code.com/arrows-html-codes.php – Keavon Feb 09 '14 at 07:10
  • @Keavon, that page declares `font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif`, which means that for U+276F, the browser’s default sans-serif font is used. – Jukka K. Korpela Feb 09 '14 at 07:31
  • It always works on a mac… (For serif, sans-serif, Ariel, monospace on Safari, FF, Chrome, Opera, and every text field I could find) – bjb568 Feb 18 '14 at 00:30
  • @bjb568, if you test it on FF with the Font Information add-on installed (if it is available), you could check what the actual font used is. It may be different on different browsers, when none of the specific fonts listed in `font-family` contains the character. – Jukka K. Korpela Feb 18 '14 at 07:35
1

Have you tried to use

htmlspecialchars(string)

or

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

Marcus Schack-Abildskov
  • 80
  • 6
-2

[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

geedew
  • 1,368
  • 12
  • 16