UILabel display emojis

Question

I have a UILabel which is displaying emojis incorrectly.

Here is a screenshot from iOS app:

And here is a screenshot from Android app which is displaying the same text with the emoji correctly.

I have tried answers from here but they did not help.

Example string : "تم البيع والله يبارك للمشتري&hearts;️"

Here is the code:

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:comment.body];
UIFont *cellFont = [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline];

NSDictionary *attributesDictionary;
NSMutableParagraphStyle *paragraphStyle =
[[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = 10;
paragraphStyle.alignment = NSTextAlignmentRight;
paragraphStyle.allowsDefaultTighteningForTruncation = true;

attributesDictionary = @{
                         NSParagraphStyleAttributeName : paragraphStyle,
                         NSFontAttributeName : cellFont,
                         NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType,
                         NSCharacterEncodingDocumentAttribute: @(NSUTF8StringEncoding)
                         };

[str addAttributes:attributesDictionary
             range:NSMakeRange(0, str.length)];

cell.commentTextLabel.attributedText = str;

Any help would be appreciated.

I see `♥️`, is that a normal "HTML standard"? Because I'd say it needs a custom parsing (like: `[... replaceOccurencesOf:@"&hearts" with: @"HeartEmoji"];️`). And `NSDocumentTypeDocumentAttribute` and `NSCharacterEncodingDocumentAttribute` aren't needed in your code. They are skipped by the compiler. — Larme, Oct 14 '19 at 09:24
@Larme I forgot to mention that the original response is in UTF-8. Something like this: https://pastebin.com/raw/gf3vjXtu — Abdullah Umer, Oct 14 '19 at 09:46
and if it requires parsing to "HeartEmoji" then why does it show fine in android and web without parsing. It won't be easy to write something like this for all the emojis. There has to be some other way. — Abdullah Umer, Oct 14 '19 at 09:47
Because iOS and Android use different standard libraries? I don't know if `♥` is natively parsed as such in iOS, and even in iOS lib. And it's a "specific" emoji, no really an emoji. And again, `NSDocumentTypeDocumentAttribute` doesn't work in your code, it's not like that. I think you might need to mix https://stackoverflow.com/questions/23670959/how-to-show-emoji-in-uilabel-ios & https://stackoverflow.com/questions/25607247/how-do-i-decode-html-entities-in-swift — Larme, Oct 14 '19 at 10:01
I did some more readings on the issue and the links that you shared. After converting the string to NSData and choosing NSUTF16 encoding and then creating an NSAttributed string, it now shows the emoji. But some how this code is also removing new lines. — Abdullah Umer, Oct 14 '19 at 12:01

score 0 · Answer 1 · answered Oct 15 '19 at 10:16

Use the emoji's unicode. in your case, the unicode for the red heart is: U+2764 U+FE0F .

Objective C code :

cell.commentTextLabel.text = @"تم البيع والله يبارك للمشتري \U00002764 \U0000FE0F";

Swift code:

cell.commentTextLabel.text = "تم البيع والله يبارك للمشتري \u{2764} \u{FE0F}"

For more emojis, In Xcode go Edit -> Emoji & Symbols, choose an emoji then right click on it and click Copy Character Info Button. Paste it and you will get for the red heart:

❤️
red heart
Unicode: U+2764 U+FE0F, UTF-8: E2 9D A4 EF B8 8F

score 0 · Answer 2 · answered Oct 17 '19 at 11:17

I was able to solve this issue by using the following code:

    NSData *data = [comment.body dataUsingEncoding:NSUTF16StringEncoding allowLossyConversion:false];

    NSMutableAttributedString *str = [[NSMutableAttributedString alloc ] initWithData:data options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType} documentAttributes:nil error:nil];
    UIFont *cellFont = [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline];

    NSDictionary *attributesDictionary;
    NSMutableParagraphStyle *paragraphStyle =
    [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = 10;
    paragraphStyle.alignment = NSTextAlignmentRight;

    attributesDictionary = @{
        NSParagraphStyleAttributeName : paragraphStyle,
        NSFontAttributeName : cellFont
    };

    [str addAttributes:attributesDictionary range:NSMakeRange(0, str.length)];

    cell.commentTextLabel.attributedText = str;

In here comment.body is the string fetched from server which contains the emoji.

The result was like this:

Thanks to Larme for his help in the comments.

UILabel display emojis

2 Answers2