Emoji renders incorrectly

[tonymillion]

Hi, I've been trying to replace UILabel with TTTAttributedLabel so I can lankily URLS, I came across a weird edge-case involving emoji, I don't know if its indicative of a "larger problem", but might be worth looking at.

background: This is a tableview in which the cells contains a UILabel, in

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

I calculate the height of the cell using the following:

                CGSize requiredSize = [text sizeWithFont:[UIFont fontWithName:@"American Typewriter" size:17]
                                       constrainedToSize:CGSizeMake(POST_WIDTH, CGFLOAT_MAX)
                                           lineBreakMode:UILineBreakModeWordWrap];

                return 30 + requiredSize.height + 10;

(30 for the header + the required label height + 10 for the footer).

This works fine for UILabel and TTTAttributedLabel as long as they're displaying "plain text". As soon as the text contains an emoji the UILabel continues to render correctly, however the TTAttributedLabel no longer renders anything! (i.e. the TTTAttributedLabel view is completely "empty" as if nothing was rendered into it).

If I change the +10 to +16 (i.e to add an extra 6 pixels to the label) the text then renders properly, except with extra whitespace.

Initial investigation shows that the text is being rendered differently (some screenshots):

UILabel:

TTTAttributedLabel

Notice how the Emoji is rendered vertically centred on the UILabel, but baseline on the TTTAttributedLabel?

I don't have a solution just yet - I'll report back any findings but I wanted to log the issue incase you already know how to fix it!

[mooshee]

I'm having the same issue. It seems that the frame is drawn incorrectly. You can witness this by attempting to set the label's height using sizeWithFont. A single line of text will not show up, because the frame is too small. However, in a UILabel, it fits the text perfectly.

[mooshee]

After much headache, I found a better approach for calculating the correct height for a label with attributed text. So you can get rid of you hardcoded padding so it renders. I haven't had much luck correcting the vertical alignment of the emoji though.

Hope it helps!

- (CGFloat)heightWithMutableAttributedString:(NSMutableAttributedString*)mutableAttString ForWidth:(CGFloat)width
{
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString( (CFMutableAttributedStringRef) mutableAttString); 
    CGSize suggestedSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0, 0), NULL, CGSizeMake(width, CGFLOAT_MAX), NULL);
    CFRelease(framesetter);
    return suggestedSize.height;
}

Probably better served as a NSMutableAttributedString category.

[johndpope]

thanks for the heightWithMutableAttributedString method Mooshee.

[bogardon]

Has anyone figured this out yet? I'm using HelveticaNeue with pt size 11 and i too have the problem where multiline text with emojis do not draw correctly.

http://stackoverflow.com/questions/3374591/ctframesettersuggestframesizewithconstraints-sometimes-returns-incorrect-size

this thread suggests that setting the leading for paragraph style is the solution. but i believe he is mistaken...

It seems that emojis will increase its line height and hence may force its line or other lines below to not be rendered at all...

[bogardon]

In the end my really ugly hack involved adding +1 to every height calculation using CTFramesetters...

[SRandazzo]

@mooshee fix worked for me! thanks

[ghost]

I think you need to use sizeThatFits: method, instead of UILabel's sizeWithFont. Although sizeThatFits sometimes doesn't calculate the correct height of the text including non-ASCII characters. =(

[jonasman]

Same problem here, What was the best fix so far?
In my case i needed to add 5 more pixels for the emoji to work..

[jonasman]

The fix is not so pretty, if you use the TTTLabel in a tableView you need to calculate the size before showing the cell (heightforCell), in this case you need to create a dummy TTTLabel just for calculating the height of the cell!

Isn't there any other solution? like calculating the NSAttributed string height (the problem is that we need to set up all the attributes that TTTLabel applies)?

[Ani111]

i have a problem with TTTAttributLabel multiline link, it doesnt work, please help me, is it possible to make multiline link of this kind?

[rnaud]

Sorry to bump but we have the same problem over here. It seems the Emoji actually change the line height of the line.

[ay8s]

Looks like emoji is displaying now in 1.5.1, which it didn't do previously for me. However as @rnaud mentioned the lineheight is changed when Emoji is included.

[sjapps]

any updates on this?

[iwasrobbed]

@sjapps The best option is to use the sizeThatFitsAttributedString:withConstraints:limitedToNumberOfLines: method built into TTTAttributedLabel. This will take into account the line height differences and give you a more accurate height than using iOS 7's textRectForBounds:

[sergisolanellas]

I create this function, to set height correct with uilabel with emojis.

Remember to include : CoreText/CoreText.h

• (CGFloat)heightStringWithEmojis:(NSString*)str fontType:(UIFont *)uiFont ForWidth:(CGFloat)width
  {

  // Get the text
  CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
  CFAttributedStringReplaceString (attrString, CFRangeMake(0, 0), (CFStringRef) str );
  CFIndex stringLength = CFStringGetLength((CFStringRef) attrString);

  // Change the font type
  CTFontRef ctFont = CTFontCreateWithName((__bridge CFStringRef) uiFont.fontName, uiFont.pointSize, NULL);
  CFAttributedStringSetAttribute(attrString, CFRangeMake(0, stringLength), kCTFontAttributeName, ctFont);

  // Calc the size
  CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
  CFRange fitRange;
  CGSize frameSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0, 0), NULL, CGSizeMake(width, CGFLOAT_MAX), &fitRange);

  CFRelease(ctFont);
  CFRelease(framesetter);
  CFRelease(attrString);

  return frameSize.height + 10; // I add 10 px

}

[jmmoser]

Depending on the setup this may be all you need to fix this issue:

myLabel.clipsToBounds = NO;

[troypayne]

+1 same issue

[ghost]

many thanks @mooshee , I have followed your code, and it works well

[jpsison-io]

Just add textinset

chatTextLabel.textInsets = UIEdgeInsetsMake(1.5, 0, 1.5, 0)