Emoji and UIWebView in iOS 5

Question

I've noticed that emojis in my app have stopped displaying properly on a UIWebView in iOS 5.

All characters are encoded for HTML when they are displayed and the output HTML is:

<p>Emoji (iOS 4): &#55357;&#56850;</p>

This UTF-8 encoded HTML is rendered correctly in a UIWebView in iOS 4, but not in 5:

I understand there have been some changes in iOS 5 with regards to emoji, but the emoji character that has been encoded into �� was generated on iOS 5, so the 2 byte characters should be correct. No other changes have taken place to the code so it's definitely something introduced with iOS 5.

Any advice would be much appreciated and I'll happily provide more information if required. Thanks.

Answer 1

I've had a response from the developer forums:

The HTML parser in iOS 5 and Safari 5.1 has changed, and character references in the range 0xD800..0xDFFF (55296..57343) are treated as parsing errors and produce an object replacement character (which is typically rendered as a diamond with a question mark). This change in behaviour is consistent with what HTML5 specifies. This means that you can no longer encode characters using surrogate pair character references.

A relatively simple solution is to use a single character reference instead of a surrogate pair. In your example, instead of (0xD83D, 0xDE12), use 0x1F612. You can use either hex or decimal:

😒 or 😒

This explains the reason for the problem. I however, worked around the issue by only encoding a smaller subset of characters as the HTML document is in unicode.