Take the 2-minute tour ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.

Why do emoji like 💩 appear when I use Safari, but not Chrome on the same MacBook running Lion? Both browsers use WebKit, and I'd imagine font support comes from the OS, not the application.

For reference purposes this is the page rendered in Chrome 17.0.963.56:

Chrome 17.0.963.56

And this is the page rendered in Safari 5.1.3 (7534.53.10):

Safari 5.1.3 (7534.53.10)

share|improve this question
7  
I'm viewing this in Chrome and I don't see the 💩 in the question or title, but I do see it in the tab title atop the window. –  CajunLuke Feb 22 '12 at 0:06
    
I rarely ever hover over tabs to see the full page title, but you're right, it does indeed to that. That's very surprising. –  Jason Salaz Feb 22 '12 at 0:12
    
It might be that Chrome plug-ins into its own character palette, which could be some hybrid version between the native and a proprietary one. And they just need to update it for OS X. But I do know that emoji aren't just a matter of the font-type (you can't port emoji to SL for example by just installing the respective font). So there's more to them than just reading a new font-type. I'd file a bug with Google. Or request full support. –  cksum Feb 22 '12 at 0:58
12  
Since visitors with Chrome will have a hard time reading the title, I vote to change the title to "How do I produce turds on Google Chrome?" –  Gerry Feb 22 '12 at 9:47
    
@cksum I reverted the title because it's become a pertinent piece of information in the question. –  Jason Salaz Feb 22 '12 at 21:11
show 3 more comments

4 Answers 4

up vote 21 down vote accepted

The difference is the rendering engines for the browser windows.

We know Safari renders the character set differently than Chrome. But the Window UI elements (the tabs in Chrome) are okay. That's our biggest clue.

The window UI elements are likely (emphasis on likely, I may not be correct here) all being rendered by the OS. So they get the full OS-level emoji-expansion treatment.

But what happens inside a web browser window is all very browser dependent. The rendering engines are a big part of each browser's secret sauce.

Both Safari and Chrome use WebKit, but the similarities between the WebKit instances they use stop somewhere around the name of the engine. They're both forks from the main version and they're both heavily customized to improve the performance in ways that each browser development team thinks is meaningful for their end users.

@JasonSalaz found a great bug in the Chrome bug database that gives us the final clue that it's down to WebKit forks: http://code.google.com/p/chromium/issues/detail?id=90177 -- that bug is talking about the differences between the fork in Chrome and the mainline of WebKit from the open source project. There are rendering differences in the mainline that have yet to make it in to the version Chrome is using. And it looks like they intend to merge the changes in at some point.

Update: Paul Irish has a great blog post on how WebKit differs for all these browsers that currently use it. If you really want to understand just how diverse the WebKit environment is, this is a great read.

share|improve this answer
    
Argh. Should have grabbed some screen shots. Oh well... –  Ian C. Feb 22 '12 at 20:51
    
The Chromium bug ticket tracking Emoji support is this one: crbug.com/62435 The one you linked to is a duplicate. –  Mathias Bynens Apr 6 '12 at 9:43
    
For the record: It's still broken in Chrome 20.0.1132.57. –  Michael Nordmeyer Jul 18 '12 at 14:54
    
Oh great, according to Comment 17 in the bug report this issue has been closed. If anyone wants to complain again, you need to file a new bug report. –  gentmatt Nov 8 '12 at 18:45
    
Thanks for the nice edit, @IanC. –  Daniel Lawson Mar 6 '13 at 21:51
show 2 more comments

The problem is that your browser is using a different character encoding from that of the document you're viewing.

So how does the browser know which character encoding to use?

  1. It can be specified in HTTP using the Content-Type header.
  2. It can be specified for the HTML document using the meta element.
  3. It can be specified for a specific HTML element using the charset attribute.

If none of these are specified, then different browsers use different techniques to guess at the right character encoding. Some use heuristics. Some allow the user to specify a character encoding. Some select the default character encoding of the operating system.

If none of these pan out, you get the gibberish, also known as mojibake.

So to answer your question directly: Safari and Chrome are trying different things to find the right character encoding.

share|improve this answer
3  
View -> Text Encoding in Safari says 'Default'. View -> Encoding in Chrome says 'UTF-8'. Safari prefs say the default encoding is Western (ISO Latin 1). If I change the encoding in Chrome to Western (ISO-8859-1), Western (Windows-1252) or Western (Macintosh) I still don't see the correct emoji, but I do see gibberish instead of empty space. I don't think it's as simple as character encoding. I suspect there's rendering differences. (continued...) –  Ian C. Feb 22 '12 at 18:16
1  
(continued from above) That would account for the title bar showing the emoji (text is likely being rendered by OS X's rendering engine as it's a graphical element on a Window) and the body of the page is being rendered by Chrome's own rendering engine. –  Ian C. Feb 22 '12 at 18:19
1  
@IanC. that's probably answer-worthy if you expand on it just a bit more. Chrome uses WebKit, but otherwise not one of ObjC/Cocoa's classes that natively support emoji. That is after all Chrome's #1 feature, wicked fast which is invariably only achieved with a custom solution. So, Chrome would either have to explicitly write support for emoji, or stop doing the thing that makes people prefer them over Safari and other browsers. (Guess which one's more likely?) –  Jason Salaz Feb 22 '12 at 18:35
1  
Stumbled on this: code.google.com/p/chromium/issues/detail?id=90177 –  Jason Salaz Feb 22 '12 at 18:43
    
@JasonSalaz nice catch with that bug report. That's the final piece. Writing up the answer! –  Ian C. Feb 22 '12 at 19:00
show 3 more comments

The symbol is a character made by Apple. Safari uses its own character set.

share|improve this answer
4  
Actually "pile of poo" is an international standard character in Unicode - symbol 1F4A9 and not even Apple specific let alone something special to Safari. See the Wikipedia entry on Emoji and this PDF for details. –  bmike Nov 12 '12 at 5:28
1  
While the character is not unique to Apple, the colors are. I don't know of any other color font in existence so far and I think Apple created its own standard for doing it (a proprietary sbix table). Various apps will not recognize this font, but will display from the normal black/white font Symbola. –  Tom Gewecke Nov 12 '12 at 13:19
1  
PS Because there is indeed something "Apple unique" about this font, I think this answer is not as far off as the minus rating might suggest. –  Tom Gewecke Nov 12 '12 at 14:59
add comment

You can use the Chrome extension Chromoji. It's a workaround that will replace emoji with embedded images in web pages.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

1  
Totally works, for Twitter atleast, don't delete the answer. –  MarcusJ Apr 16 '13 at 0:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.