Overriding Emoji Graphics

Question

I want to override the emoji icons with my own custom graphics (only within my app).

From what I've read so far, one possible solution is to create a custom font extension which overrides the desired unicode characters. Preferable I would like to maintain inter-operability with CATextLayer.

Edit: Looks like custom fonts won't be my solution; fonts must be defined in gray-scale. Next possibility: Creating a custom CALayer, chunking the string into segments based on emoji code, and doing the type setting + graphics rendering manually (i.e. with core graphics and core text)

Edit: Also looking to maintain smooth scrolling performance in a table views.

May be this would help you - stackoverflow.com/questions/1225514/… — Sagar

JohnVanDijk JohnVanDijk · Accepted Answer · 2013-06-18T13:37:44

I have devoted a lot of time trying to do the same. Your best bet is to replace the unicode values for the emoji in your NSString eg. \uE100 etc. with a placeholder string. You could replace the emoji encodings with an HTML Tag and use either UIWenViews or DTCoreText to draw the image inline. I have done this, it works too, but it will be a little slow (Specially if you want to display this Label in table views.)

Here is a little starter:

Make a dictionary with UIImages as objects and placeholder strings as keys:

        self.emoticonDict = [[NSMutableDictionary alloc] initWithObjectsAndKeys:@"happyEmoticon.png",    @":)",
                         @"sadEmoticon.png",      @":(",
                         @"testImg.png",          @"\uE100",
                         nil];


__block NSString *text1 = [NSString stringWithFormat:@"<html><p>%@</p></html>",text];
    [self.emoticonDict enumerateKeysAndObjectsUsingBlock: ^(id key, id obj, BOOL *stop) {
        text1 = [text1 stringByReplacingOccurrencesOfString:key withString:[NSString stringWithFormat:@"<img height= 15 width= 15 src=\"%@\">",obj]];
    }];

You can at this point load this HTML into a UIWebView and you will have what you want.

[myWebView loadData:_htmlData MIMEType:@"text/html" textEncodingName:@"utf-8"  baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];//do create the webview first

If the slow speed of a UIWebView is a concern, you can read ahead. In either case do look at the note towards the end of this answer.

To create a DTAttributedLabel, we do the following: First we build a NSattributedString using the DTHTMLAttributedStringBuilder:

NSAttributedString *temp = [[[DTHTMLAttributedStringBuilder alloc] initWithHTML:text1
                                                    options:@{
                                     DTDefaultFontFamily: @"Helvetica",
                                     DTDefaultFontSize:@15,};
                                     documentAttributes:nil]
                                     generatedAttributedString];

Then you can use a DTAttributedLabel instance to display temp.

 self.tempLabel.attributedString = temp;//create a DTAttributedLabel Instance called tempLabel before this, I had it as a property

My objective was to generate text label's really fast (Table Views) while supporting custom emoticons. DTAttributedLabels are fast (much faster than a UIWebView) NOTE: I also made a custom font where I had mapped the unicode values for the emojis to a custom glyph. To my surprise, still the default emojis were displayed. I would like to claim here that whenever iOS (CoreText) comes across a character whose value lies in the Emoji section, it draws it using the AppleColorEmoji font by default. The lack of documentation on how Apple Color Emoji font is actually drawn on iOS actually makes it difficult for me to prove this, but this seems to be a plausible explanation. If you drop an emoji from the character palette app onto a file in textEdit, then select it and try to change the font, you see that it doesn't happen. Similarly, if you type some text, then select it and try to change it's font to Apple Color Emoji, you'll see it doesn't happen. When I decompiled the Apple Color Emoji font, I didn't find character mappings or glyphs for textual characters (except 0-9). Somehow, even if you set a label's font as Apple Color Emoji, the font for the textual (non-emoji) part of your label's text is set to something else.

Kindly feel free to comment and share your knowledge since this region around the Apple Color Emoji font still remains very unclear.

Overriding Emoji Graphics

3 Answers