阿毛的蛋疼地

iOS 文字排版 (CoreText) 那些事

06 Mar 2014

第一次比较深入接触 iOS 文字排版相关内容是在 12 年底，实现某 IM 项目聊天内容的图文混排，照着 nimbus 的 AttributedLabel 和 Raywenderlish 上的这篇文章 《Core Text Tutorial for iOS: Making a Magazine App》 改出了一个比较适用于聊天内容展现的图文混排 (文字和表情) 控件。选择自己写而不直接使用现有第三方库的原因有三:

  • 在这之前也做过一个 iOS 上的 IM 产品，当时这个模块并不是我负责，图文混排的实现非常诡异(通过二分法计算出文字所占区域大小)，效率极低，所以需要重新做一个效率比较高的控件出来。
  • 看过一些开源的实现，包括 OHAttribtuedLabel，DTCoreText 和 Nimbus，总觉得他们实现插入图片的接口有点别扭，对于上层调用者来说 CoreText 部分不是完全透明的：调用者需要考虑怎么用自己的图片把原来内容替换掉。(当时的印象，现在具体怎么样已经不清楚了)
  • 这是重新造轮子的机会！

直接拿了 Nimbus 的 AttributedLabel 作为基础，然后重新整理图文混排那部分的代码，调整接口，一共也就花了一个晚上的时间：拜一下 Nimbus 的作者。后来也根据项目的需求做了一些小改动，比如 hack iOS7 下计算 size 不准的问题，Label 上支持添加 UIView 的特性等等。最新的代码可以在 github 上找到:M80AttributedLabel。 不过写这篇文章最重要的原因不是为了放个代码出来，而是在闲暇时整理一下 iOS/OSX 文字排版相关的知识。

文字排版的基础概念

  • 字体 (Font)：和我们平时说的字体不同，计算机意义上的字体表示的是同一大小，同一样式(Style) 字形的集合。从这个意义上来说，当我们为文字设置粗体，斜体时其实是使用了另外一种字体(下划线不算)。而平时我们所说的字体只是具有相同设计属性的字体集合，即 Font Family 或 typeface。

  • 字符 (Character) 和字形 (Glyphs)：排版过程中一个重要的步骤就是从字符到字形的转换，字符表示信息本身，而字形是它的图形表现形式。字符一般指某种编码，如 Unicode 编码，而字形则是这些编码对应的图片。但是他们之间不是一一对应关系，同个字符的不同字体族，不同字体大小，不同字体样式都对应了不同的字形。而由于连写(Ligatures) 的存在，也会出现多个字符对应一个字形的情况。 此处输入图片的描述

  • 字形描述集(Glyphs Metris)：即字形的各个参数。如下面的两张图: 此处输入图片的描述 此处输入图片的描述
  • 边框(Bounding Box)：一个假想的边框，尽可能地容纳整个字形。
  • 基线(Baseline)：一条假想的参照线，以此为基础进行字形的渲染。一般来说是一条横线。
  • 基础原点(Origin)：基线上最左侧的点。
  • 行间距(Leading)：行与行之间的间距。
  • 字间距(Kerning)：字与字之间的距离，为了排版的美观，并不是所有的字形之间的距离都是一致的，但是这个基本步影响到我们的文字排版。
  • 上行高度 (Ascent) 和下行高度(Decent)：一个字形最高点和最低点到基线的距离，前者为正数，而后者为负数。当同一行内有不同字体的文字时，就取最大值作为相应的值。如下图，

此处输入图片的描述 红框高度既为当前行的行高，绿线为 baseline，绿色到红框上部分为当前行的最大 Ascent，绿线到黄线为当前行的最大 Desent，而黄框的高即为行间距。由此可以得出：lineHeight = Ascent + |Decent| + Leading。 更加详细的内容可以参考苹果的这篇文档： 《Cocoa Text Architecture Guide》。当然如果要做到更完善的排版，还需要掌握段落排版 (Paragragh Style) 相关的知识，但是如果只是完成聊天框内的文字排版，以上的基础知识已经够用了。详细的段落样式相关知识可以参考： 《Ruler and Paragraph Style Programming Topics》

CoreText

iOS/OSX 中用于描述富文本的类是 NSAttributedString，顾名思义，它比 NSString 多了 Attribute 的概念。它可以包含很多属性，粗体，斜体，下划线，颜色，背景色等等，每个属性都有其对应的字符区域。在 OSX 上我们只需解析完毕相应的数据，准备好 NSAttributedString 即可，底层的绘制完全可以交给相应的控件完成。但是在 iOS 上就没有这么方便，想要绘制 Attributed String 就需要用到 CoreText 了。(当然 iOS6 之后已经有 AttributedLabel 了。) 使用 CoreText 进行 NSAttributedString 的绘制，最重要的两个概念就是 CTFrameSetter 和 CTFrame。他们的关系如下：

此处输入图片的描述 其中 CTFramesetter 是由 CFAttributedString(NSAttributedString)初始化而来，可以认为它是 CTFrame 的一个 Factory，通过传入 CGPath 生成相应的 CTFrame 并使用它进行渲染：直接以 CTFrame 为参数使用 CTFrameDraw 绘制或者从 CTFrame 中获取 CTLine 进行微调后使用 CTLineDraw 进行绘制。 一个 CTFrame 是由一行一行的 CLine 组成，每个 CTLine 又会包含若干个 CTRun(既字形绘制的最小单元)，通过相应的方法可以获取到不同位置的 CTRun 和 CTLine，实现对不同位置 touch 事件的响应。 此处输入图片的描述

图文混排的实现

CoreText 实际上并没有相应 API 直接将一个图片转换为 CTRun 并进行绘制，它所能做的只是为图片预留相应的空白区域，而真正的绘制则是交由 CoreGraphics 完成。(像 OSX 就方便很多，直接将图片打包进 NSTextAttachment 即可，根本无须操心绘制的事情，所以基于这个想法，M80AttributedLabel 的接口和实现也是使用了 attachment 这么个概念，图片或者 UIView 都是被当作文字段中的 attachment。) 在 CoreText 中提供了 CTRunDelegate 这么个 Core Foundation 类，顾名思义它可以对 CTRun 进行拓展：AttributedString 某个段设置 kCTRunDelegateAttributeName 属性之后，CoreText 使用它生成 CTRun 是通过当前 Delegate 的回调来获取自己的 ascent，descent 和 width，而不是根据字体信息。这样就给我们留下了可操作的空间：用一个空白字符作为图片的占位符，设好 Delegate，占好位置，然后用 CoreGraphics 进行图片的绘制。以下就是整个图文混排代码描述的过程： 占位：

- ()appendAttachment: (M80AttributedLabelAttachment *)attachment
{
    attachment.fontAscent                   = _fontAscent;
    attachment.fontDescent                  = _fontDescent;
    unichar objectReplacementChar           = 0xFFFC;
    NSString *objectReplacementString       = [NSString stringWithCharacters:&objectReplacementChar length:1];
    NSMutableAttributedString *attachText   = [[NSMutableAttributedString alloc]initWithString:objectReplacementString];

    CTRunDelegateCallbacks callbacks;
    callbacks.version       = kCTRunDelegateVersion1;
    callbacks.getAscent     = ascentCallback;
    callbacks.getDescent    = descentCallback;
    callbacks.getWidth      = widthCallback;
    callbacks.dealloc       = deallocCallback;

    CTRunDelegateRef delegate = CTRunDelegateCreate(&callbacks, ( *)attachment);
    NSDictionary *attr = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)delegate,kCTRunDelegateAttributeName, nil];
    [attachText setAttributes:attr range:NSMakeRange(0, 1)];
    CFRelease(delegate);

    [_attachments addObject:attachment];
    [self appendAttributedText:attachText];
}

实现委托回调:

CGFloat ascentCallback( *)
{
    M80AttributedLabelAttachment *image = (__bridge M80AttributedLabelAttachment *);
    CGFloat ascent = 0;
    CGFloat height = [image boxSize].height;
    switch (image.alignment)
    {
         M80ImageAlignmentTop:
            ascent = image.fontAscent;
            break;
         M80ImageAlignmentCenter:
        {
            CGFloat fontAscent  = image.fontAscent;
            CGFloat fontDescent = image.fontDescent;
            CGFloat baseLine = (fontAscent + fontDescent) / 2 - fontDescent;
            ascent = height / 2 + baseLine;
        }
            break;
         M80ImageAlignmentBottom:
            ascent = height - image.fontDescent;
            break;
        default:
            break;
    }
    return ascent;
}

CGFloat descentCallback( *)
{
    M80AttributedLabelAttachment *image = (__bridge M80AttributedLabelAttachment *);
    CGFloat descent = 0;
    CGFloat height = [image boxSize].height;
    switch (image.alignment)
    {
         M80ImageAlignmentTop:
        {
            descent = height - image.fontAscent;
            break;
        }
         M80ImageAlignmentCenter:
        {
            CGFloat fontAscent  = image.fontAscent;
            CGFloat fontDescent = image.fontDescent;
            CGFloat baseLine = (fontAscent + fontDescent) / 2 - fontDescent;
            descent = height / 2 - baseLine;
        }
            break;
         M80ImageAlignmentBottom:
        {
            descent = image.fontDescent;
            break;
        }
        default:
            break;
    }

    return descent;

}

CGFloat widthCallback(* )
{
    M80AttributedLabelAttachment *image  = (__bridge M80AttributedLabelAttachment *);
    return [image boxSize].width;
}

真正的绘制：

- ()drawAttachments
{
     ([_attachments count] == 0)
    {
        return;
    }
    CGContextRef ctx = UIGraphicsGetCurrentContext();
     (ctx == nil)
    {
        return;
    }

    CFArrayRef lines = CTFrameGetLines(_textFrame);
    CFIndex lineCount = CFArrayGetCount(lines);
    CGPoint lineOrigins[lineCount];
    CTFrameGetLineOrigins(_textFrame, CFRangeMake(0, 0), lineOrigins);
    NSInteger numberOfLines = [self numberOfDisplayedLines];
     (CFIndex i = 0; i < numberOfLines; i++)
    {
        CTLineRef line = CFArrayGetValueAtIndex(lines, i);
        CFArrayRef runs = CTLineGetGlyphRuns(line);
        CFIndex runCount = CFArrayGetCount(runs);
        CGPoint lineOrigin = lineOrigins[i];
        CGFloat lineAscent;
        CGFloat lineDescent;
        CTLineGetTypographicBounds(line, &lineAscent, &lineDescent, NULL);
        CGFloat lineHeight = lineAscent + lineDescent;
        CGFloat lineBottomY = lineOrigin.y - lineDescent;

        // Iterate through each of the "runs" (i.e. a chunk of text) and find the runs that
        // intersect with the range.
         (CFIndex k = 0; k < runCount; k++)
        {
            CTRunRef run = CFArrayGetValueAtIndex(runs, k);
            NSDictionary *runAttributes = (NSDictionary *)CTRunGetAttributes(run);
            CTRunDelegateRef delegate = (__bridge CTRunDelegateRef)[runAttributes valueForKey:(id)kCTRunDelegateAttributeName];
             (nil == delegate)
            {
                continue;
            }
            M80AttributedLabelAttachment* attributedImage = (M80AttributedLabelAttachment *)CTRunDelegateGetRefCon(delegate);

            CGFloat ascent = 0.0f;
            CGFloat descent = 0.0f;
            CGFloat width = (CGFloat)CTRunGetTypographicBounds(run,
                                                               CFRangeMake(0, 0),
                                                               &ascent,
                                                               &descent,
                                                               NULL);

            CGFloat imageBoxHeight = [attributedImage boxSize].height;
            CGFloat xOffset = CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, nil);

            CGFloat imageBoxOriginY = 0.0f;
            switch (attributedImage.alignment)
            {
                 M80ImageAlignmentTop:
                    imageBoxOriginY = lineBottomY + (lineHeight - imageBoxHeight);
                    break;
                 M80ImageAlignmentCenter:
                    imageBoxOriginY = lineBottomY + (lineHeight - imageBoxHeight) / 2.0;
                    break;
                 M80ImageAlignmentBottom:
                    imageBoxOriginY = lineBottomY;
                    break;
            }

            CGRect rect = CGRectMake(lineOrigin.x + xOffset, imageBoxOriginY, width, imageBoxHeight);
            UIEdgeInsets flippedMargins = attributedImage.margin;
            CGFloat top = flippedMargins.top;
            flippedMargins.top = flippedMargins.bottom;
            flippedMargins.bottom = top;

            CGRect attatchmentRect = UIEdgeInsetsInsetRect(rect, flippedMargins);

            id content = attributedImage.content;
             ([content isKindOfClass:[UIImage class]])
            {
                CGContextDrawImage(ctx, attatchmentRect, ((UIImage *)content).CGImage);
            }
              ([content isKindOfClass:[UIView class]])
            {
                UIView *view = (UIView *)content;
                 (view.superview == nil)
                {
                    [self addSubview:view];
                }
                CGRect viewFrame = CGRectMake(attatchmentRect.origin.x,
                                              self.bounds.size.height - attatchmentRect.origin.y - attatchmentRect.size.height,
                                              attatchmentRect.size.width,
                                              attatchmentRect.size.height);
                [view setFrame:viewFrame];
            }
            
            {
                NSLog(@"Attachment Content Not Supported %@",content);
            }

        }
    }
}

详细的代码可以直接在 github 上查看:https://github.com/xiangwangfeng/M80AttributedLabel/。

Related Posts