malczak / textpaths

Split NSAttributedText into glyph CGPath, convert NSAttributedText to SVG

TextPaths

TextPaths is an utility for converting NSAttributedText to vector representation where each character of an input text is represented as a CGPAth glyph. TextPaths also returns typographic propeties for lines and entire text flow. For in-depth knowledge on how iOS handles text see Using Text Kit to Draw and Manage Text chapter in documentation.

Source NSAttributedText is converted into a tree like representation with char glyphs on leafs.

 TextPath
    ⎿ TextPathFrame[]
        ⎿ TextPathLine[]
            ⎿ TextPathGlyph[]

    ⎿ ComposedTextPath

TextPathFrame - text frame representation

TextPathLine - single text line representation

There is also a text bounds rectangle available. Text bounds rectangle is equal or less then line bounds rectangle. On image below this metric is show in purple.

TextPathGlyph - single character representation (glyph)

ComposedTextPath - composed path of entire input text. This is illustrated on all images above in black.

All illustrations were created with TextDecompose sample application.

Important notes

• UITextView has extra edge insets (padding) of apporx 8px
• UIKit treats text different than CoreText when different font size is used to trailing line-break \n character. TextPaths instead of following CoreText is using the same approach as UIKit. See code comments in TextPathLine class for effectiveDescent property.

Production use

This repo is used in my apps

• Fabristic
• Last Day? Life progress and stats

Sample Applications

TextDecompose

A sample showing how NSAttributedString is decomposed into CGPaths keeping all attributes and typographic properties. See screenshots below

TextToSVG

NSAttributedString to SVG conversion. Entire NSAttributedString is converted in to one merged CGPath and then serialized as SVG path. Resulting SVG is presented in WKWebView for comparison.

FallingLabel

Falling letters counter application shows how to to use TextPaths for text animations. In this example TextPaths is used to animated UILabel value change.

FlyingText

Another animation example showing how to animate multiline NSAttributedText.

Screenshots


TextDecompose

TextToSVG #1

TextToSVG #2

FallingLabel

FlyingText

textpaths's Issues

Examples don't work in Xcode 14

Afraid, examples don't work in Xcode 14.

getTextPath method just returns nil for any input.

Does it support multiline text? ( text with /n)

glyph.position appears to be offset

run the TextDecompose demo, the green rect which draw for glyph has some offset
iOS 12.8 xcode 12.5