Search code examples
imagetextcore-text

How to draw images among rich-text with CoreText? (iOS)

I can draw rich-text with Core Text, the problem is placing images flowing with the text. (iOS SDK 4.1)

I'm try to drawing some kind of rich-text. Problem is designer placed many icons among text. So the text what I have to draw is something like this:

Here is a word <an icon image>, and another words.
The image(<another icon>) should be placed like a glyph.
It's part of text, not an example.

<icon> are images. (This is not a code. Just an illustration.)

I can draw this by laying out all of them manually, but it's too hard keeping complex text layout behaviors. So I'm finding a way to draw this with Core Text.

Solution

  • I got solution.

    The key of laying out non-text content is CTRunDelegate. Core Text does not support non-text content, so you have to make blank spaces for them, and draw or place them yourself later.

    A part of NSAttributedString attributed with kCTRunDelegateAttributeName will call registered callback to determine width of each glyph. This will let you make blank space for each non-text object.

    However, after drawing the text with Core Text, the layout information stored with frame/line/run will invalidated. So you have to draw/place non-text contents after layout with framesetter/typesetter, but before drawing.

    This link describes basic usage of CTRunDelegate:
    How to use CTRunDelegate in iPad?

    There is a problem with Core Text. Originally, CTRunDelegate designed to support variable width and vertical alignment via CTRunDelegateCallbacks.getAscent and CTRunDelegateCallbacks.getDescent. But vertical alignment feature doesn't work currently. This might be a bug.

    I described this problem here: Aligning multiple sized text vertical center instead of baseline with Core Text in iOS

    If you have informations about this problem, please see my question at the link.