enhance the look of your app with text kit

Matteo BattaglioiOS Developer @ Tiltap

Enhance the look of your app with Text Kit

���1

About

Matteo BattaglioiOS Developer @ TilTap (@ Superpartes Innovation Campus)

#pragma mark co-founder

!

matteo.battaglio@gmail.com

@MatteoBattaglio

���2

Contents• What, and why, is Text Kit?

• Features

• Structure

• Advanced text layouts and use cases

• Fonts

���3

What is Text Kit?

What is Text Kit?

Text Kit is one of the coolest features of iOS 7

iOS 7 UI overhaul is pretty much about text

���5

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

Why Text Kit?

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

Why?What about...

• 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

UIWebView?

Why?

But: since iOS 6 we have attributed text editing in UITextView

• Limited (supports bold, italic, underline, custom font size & color)

• Hardly customizable

• no control over layout

• no convenient way to customize text attributes

Better than nothing, but:

���10

UIKit Integration

In iOS 7

UILabel

UITextField

UITextView

Rewritten to take advantage of Text Kit

���11

Features

Rich Text Editing

• Interactive text coloring

• text folding

• custom truncation

���13

Text Wrapping

•Paginated text

•Multiple columns

• Layout text aroundcustom shapes

���14

Text Styles

•Dynamic Type mechanism

•Optimized for legibility:thickness changes with size

•Customizable by the userat runtime

���15

Typographical concepts

Def: GlyphA 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.

Def: CharacterA 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.

Typographic Features• Kernings

adjustments of spacing between two letters

• Ligaturesreplacements of two letters with one glyph that ‘merges’ them

• Hypenationsplitting of too-long words at line boundaries

���17

Customizability• Extensible Object-Oriented Architecture:

•Subclassing

•Delegation

•NotificationsNSTextStorageWillProcessEditingNotificationNSTextStorageDidProcessEditingNotification

���18

Text EffectsIn iOS 7 we have just one effect:

Letterpress

���19

Structure

Primary Text Kit Objects

���21

Classes Composing Text Kit

���22

[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

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

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

Text Attributes

• Paragraph attributes:traits such as indentation, tabs, and line spacing.

• Document attributes:document-wide traits such as paper size, margins, and view zoom percentage.

• 3 Kinds

• Character attributes:traits such as font, color,and subscript.Can be applied to asingle char or to a range.

���26

NSTextStorage

Set ofNSLayoutManager objects

manages

each one canrelayout and redisplay the text

when and how it wants

so that

NSTextStorage

���27

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

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

Layout ProcessTriggered by text or attribute change notifications in the text storage

2 steps:

Glyphgeneration

Glyphlayout

• Both are done lazily

• NSLayoutManager caches the results to improve performance

���30

Char to Glyph MappingGlyphs do not map 1:1 with characters

ligaturestruncation

line wrapping

modify the mapping of chars to glyphs.

���31

Char & Glyph MethodsThe 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

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

NSTextContainerIn the Model-View-Controller paradigm,

it represents the view

• deals with the geometryof the text area

• defines a coordinate spacein which the layout manager lives

���34

NSTextContainerIt 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

Exclusion PathsExclusion paths are UIBezierPath objects that live in NSTextContainer’s coordinate system

���36

Upon updating exclusion paths in text container, layout manager can re-layout text instantaneously

Text Container Coordinate System

Text container’s origin could be anywhere inside its parent view’s coordinate system

���37

Line Fragments

Layout manager

characters

���38

lines of glyphs

Line FragmentsExclusion paths break lines in parts

Each part is called a line fragment

���39

Line Fragment Coordinates

Relative to the text containercoordinate system

���40

Glyph Coordinates

Relative to the line fragmentcoordinate system

���41

Character Location

Glyph coordinate

+

Line fragment coordinate

+

Text container coordinate

=

UIView coordinate

���42

Example: Character LocationFinding the location of last character

���43

Example: Hit Testing

Finding a word under a touch

���44

Text AttachmentsNSTextAttachment objects

• are a type of text attribute

•live in NSTextStorage

•include geometry for containeddata, including baseline

•usually used for inline images

•user can interact with them

���45

Interacting With Text DataSince 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

Fonts

Font DescriptorsUIFontDescriptor

•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

Font Descriptor Usage Examples

•Language Taggingyou 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

Symbolic Traits

UIFontDescriptor lets you apply traits like:

•bold, italic, underline

•expanded & condensed

•loose & tight line spacing

���50

UIFontDescriptor *fontDescriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle: UIFontTextStyleBody]; !UIFontDescriptor *boldFontDescriptor = [fontDescriptor fontDescriptorWithSymbolicTraits: UIFontDescriptorTraitBold]; !UIFont *boldFont = [UIFont fontWithDescriptor: boldFontDescriptor size: 0.0];

[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

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

#Thank You!

���53