Search code examples
ioscore-text

Line spacing in multi-language layout with Core Text


The attributed string has only one attribute - 17 point Helvetica NeueUI font - covering the whole string. Line 1~3 are purely English, line 4~6 are mixtures of English and Chinese, line 7~8 are purely Chinese.

It is then layouted with CTFramesetter and resultant frame is drawn with CTFrameDraw.

// UIView subclass
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        CTFontRef font = CTFontCreateWithName(CFSTR("Helvetica NeueUI"), 17.f, NULL);
        _text = [[NSAttributedString alloc] initWithString:string attributes:
                 [NSDictionary dictionaryWithObject:(id)font forKey:(id)kCTFontAttributeName]];
        CFRelease(font);
        _framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)_text);
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathAddRect(path, NULL, self.bounds);
        _frame = CTFramesetterCreateFrame(_framesetter, CFRangeMake(0, 0), path, NULL);
        CGPathRelease(path);
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    // Flip the coordinate system.
    CGContextTranslateCTM(context, 0.f, self.bounds.size.height);
    CGContextScaleCTM(context, 1.f, -1.f);
    
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    
    CTFrameDraw(_frame, context);
    CGContextRestoreGState(context);
}

The problem is that the space between line 7 and 8 (purely Chinese lines) is much smaller than others.

For contrast, I put a UILabel below it, with the same font and text. Ignoring the rendering difference of single characters, you can see the line spaces in UILabel are uniform including the last one between two Chinese lines.

Screenshot
(source: skitch.com)

Notice: this results above is got on a real device. If you run the same code on the simulator, you'll get very different result for the Core Text view — spaces between lines containing Chinese are much larger than others.

  1. Why is the space between Chinese lines smaller(larger)?
  2. How can I layout multi-language text with uniform line height using Core Text?

PS: here is the sample project you can try yourself.


Solution

  • I finally got an official answer from Apple engineer:

    CTLine metrics are based on the maximum of each of {ascent, descent, leading}; this has not changed, nor will it. Clients may override the line metrics using paragraph style specifiers or iOS 7 text styles, for example [UIFont preferredFontForTextStyle:UIFontTextStyleBody].