This document provides an overview of Text Kit, Apple's text layout and rendering framework introduced in iOS 7. It discusses what Text Kit is, why it was created to replace Core Text for most use cases, and its key features such as rich text editing, text wrapping, styles, and customization options. The document also covers Text Kit's object model including NSTextStorage, NSLayoutManager, and NSTextContainer, and how these objects work together to manage and display text.

1. Enhance the look of your app
with Text Kit
Matteo Battaglio
iOS Developer @ Tiltap
1

2. About
Matteo Battaglio
iOS Developer @ TilTap (@ Superpartes Innovation Campus)
#pragma mark co-founder
!
matteo.battaglio@gmail.com
@MatteoBattaglio
2

3. Contents
•
•
•
•
•
What, and why, is Text Kit?
Features
Structure
Advanced text layouts and use cases
Fonts
3

4. What is Text Kit?

5. What is Text Kit?
iOS 7 UI overhaul is pretty much about text
Text Kit is one of the coolest features of iOS 7
5

6. What is Text Kit?
•
•
•
Fast, modern text layout and rendering engine
Built on top of Core Text
Deeply integrated with UIKit
Text Kit Framework Position
6

7. Why Text Kit?

8. Why?
Until iOS 6, how did you do complex things with text?
Core Text
•
•
•
Really advanced
Very complex
Not integrated with UIKit
An overkill for most scenarios
8

9. Why?
What about...
UIWebView?
•
•
Great for rendering web content
UITextView friends (until iOS 6.X) use it
under the hood
but...
•
Need to deal with the DOM JavaScript
•
•
poor performance
not native poorly documented
• Has issues with scroll views
9

10. Why?
But: since iOS 6 we have attributed text editing in UITextView
Better than nothing, but:
• Limited (supports bold, italic,
underline, custom font size color)
•
Hardly customizable
• no control over layout
• no convenient way to customize
text attributes
10

11. UIKit Integration
In iOS 7
UILabel
UITextField
UITextView
Rewritten to take advantage of Text Kit
11

12. Features

13. Rich Text Editing
•
Interactive text coloring
•
text folding
• custom truncation
13

14. Text Wrapping
• Paginated text
• Multiple columns
• Layout text around
custom shapes
14

15. Text Styles
• Dynamic Type mechanism
• Optimized for legibility:
thickness changes with size
• Customizable by the user
at runtime
15

16. Typographical concepts
Def: Character
A character is the smallest unit of written language that carries
meaning. It can correspond to a sound, an entire word, or
even a symbol. A character is an abstract concept.
Def: Glyph
A glyph is an element of writing: an individual mark on a
written medium that contributes to the meaning of what is
written.
Different glyphs of the character A.

17. Typographic Features
•
Kernings
adjustments of spacing between
two letters
•
Ligatures
replacements of two letters with
one glyph that ‘merges’ them
•
Hypenation
splitting of too-long words at line
boundaries
17

18. Customizability
•
Extensible Object-Oriented Architecture:
• Subclassing
• Delegation
• Notifications
NSTextStorageWillProcessEditingNotification
NSTextStorageDidProcessEditingNotification
18

19. Text Effects
In iOS 7 we have just one effect:
Letterpress
19

20. Structure

21. Primary Text Kit Objects
21

22. Classes Composing Text Kit
22

23. [Multithreading Tip]
NLayoutManager, NSTextStorage, and NSTextContainer
can be accessed from
sub-threads
as long as the app guarantees the access from
a single thread.
23

24. NSTextStorage
In the Model-View-Controller paradigm,
it represents the model
!
•
Direct subclass of NSMutableAttributedString
•
Deals with the text and its attributes
•
It is a class cluster: an abstract class that group a number of
private concrete subclasses
24

25. Subclassing NSTextStorage
•
It can be subclassed, by implementing 4 methods:
•
the first 2 are for inquiring purpose (inherited from
NSAttributedString):
-string
-attributesAtIndex:effectiveRange:
•
the other 2 are for modifying the text (inherited from
NSMutableAttributedString):
-replaceCharactersInRange:withString:
-setAttributes:range:
25

26. Text Attributes
• 3 Kinds
•
Character attributes:
traits such as font, color,
and subscript.
Can be applied to a
single char or to a range.
•
Paragraph attributes:
traits such as indentation, tabs, and line spacing.
• Document attributes:
document-wide traits such as paper size, margins, and view
zoom percentage.
26

27. NSTextStorage
NSTextStorage
manages
Set of
NSLayoutManager objects
so that
each one can
relayout and redisplay the text
when and how it wants
27

28. NSLayoutManager
In the Model-View-Controller paradigm,
it represents the controller
!
It performs the following actions:
•
Controls text storage and text container objects
•
Generates glyphs from characters
•
Computes glyph locations and stores the information
•
Manages ranges of glyphs and characters
28

29. NSLayoutManager Features
•
Draws glyphs in text views when requested by the view
•
Computes bounding box rectangles for lines of text
•
Controls hyphenation
•
Manipulates character attributes and glyph properties

30. Layout Process
Triggered by text or attribute change notifications in the text
storage
2 steps:
Glyph
generation
Glyph
layout
• Both are done lazily
• NSLayoutManager caches the results to improve
performance
30

31. Char to Glyph Mapping
Glyphs do not map 1:1 with characters
ligatures
truncation
line wrapping
modify the mapping of chars to glyphs.
31

32. Char Glyph Methods
The layout manager keeps track of this mapping and provides:
-(NSUInteger)characterIndexForGlyphAtIndex:
(NSUInteger)aGlyphIndex;
-(NSUInteger)glyphIndexForCharacterAtIndex:
(NSUInteger)aCharIndex;
and the bulk ones:
-textContainerForGlyphAtIndex:effectiveRange:;
-lineFragmentRectForGlyphAtIndex:effectiveRange:;
-locationForGlyphAtIndex:(NSUInteger)aGlyphIndex;
32

33. Customizing Text Layout
NSLayoutManagerDelegate
•
modify line spacing: you can modify the spacing for every
single line
•
•
validate soft line breaking
customize glyph mapping, e.g. when you substitute the
chars of a password with bullets, or when you fold a line
33

34. NSTextContainer
In the Model-View-Controller paradigm,
it represents the view
• deals with the geometry
of the text area
• defines a coordinate space
in which the layout manager lives
34

35. NSTextContainer
It defines one single area in which to draw text.
To draw in more areas (e.g. multiple pages or columns), just
add multiple text containers to the layout manager.
35

36. Exclusion Paths
Exclusion paths are UIBezierPath objects that live in
NSTextContainer’s coordinate system
Upon updating exclusion paths in text container, layout
manager can re-layout text instantaneously
36

37. Text Container Coordinate System
Text container’s origin could be anywhere inside its parent
view’s coordinate system
37

38. Line Fragments
characters
Layout manager
lines of glyphs
38

39. Line Fragments
Exclusion paths break lines in parts
Each part is called a line fragment
39

40. Line Fragment Coordinates
Relative to the text container
coordinate system
40

41. Glyph Coordinates
Relative to the line fragment
coordinate system
41

42. Character Location
Glyph coordinate
+
Line fragment coordinate
+
Text container coordinate
=
UIView coordinate
42

43. Example: Character Location
Finding the location of last character
43

44. Example: Hit Testing
Finding a word under a touch
44

45. Text Attachments
NSTextAttachment objects
• are a type of text attribute
• live in NSTextStorage
• include geometry for contained
data, including baseline
• usually used for inline images
• user can interact with them
45

46. Interacting With Text Data
Since iOS 6, UITextView supports data detection (links, phone
numbers, etc)
But you couldn’t customize its behavior (e.g. show a web
page without leaving the app)
!
With iOS 7, UITextViewDelegate provides handy methods:
-textView:shouldInteractWithURL:inRange:
-textView:shouldInteractWithTextAttachment:inRange:
46

47. Fonts

48. Font Descriptors
UIFontDescriptor
• describes a font with a dictionary of attributes
+ (UIFontDescriptor *)fontDescriptorWithFontAttributes:
(NSDictionary *)attributes
• used to create UIFont objects:
+ (UIFont *)fontWithDescriptor:(UIFontDescriptor*)descriptor
size:(CGFloat)pointSize
• query the system for available fonts that match particular
attributes (names, traits, languages, etc)
• can be archived: UIFont objects are dynamic and should not
be archived
48

49. Font Descriptor Usage Examples
• Language Tagging
you can tell the system to treat different parts of text as
different languages
• Exclude certain characters from a font’s character set,
to let the system fallback to another font
49

50. Symbolic Traits
UIFontDescriptor lets you apply traits like:
• bold, italic, underline
• expanded condensed
• loose tight line spacing
UIFontDescriptor *fontDescriptor =
[UIFontDescriptor preferredFontDescriptorWithTextStyle:
UIFontTextStyleBody];
!
UIFontDescriptor *boldFontDescriptor =
[fontDescriptor fontDescriptorWithSymbolicTraits:
UIFontDescriptorTraitBold];
!
UIFont *boldFont = [UIFont fontWithDescriptor: boldFontDescriptor
size: 0.0];
50

51. [Demo]
Sample app:
https://github.com/macguru/TextKitDemo
by Max Seelemann
Showing:
• Multi layout manager and multi text container configuration
• Hit testing and real time word tagging
• link highlighting custom line spacing
• interactive exclusion paths

52. Resources
• WWDC 2013 Sessions
• Session 210 - “Introducing Text Kit”
• Session 220 - “Advanced Text Layouts and Effects with Text
Kit”
• Session 223 - “Using Fonts with Text Kit”
• objc.io issue #5 - “Getting to Know TextKit”
• Apple’s “Text Programming Guide for iOS”
• Text Kit-specific chapter: “Using Text Kit to Draw and
Manage Text”
52

53. #Thank
You!
53