Enhance the Look of Your App With Text Kit
Upcoming SlideShare
Loading in...5

Enhance the Look of Your App With Text Kit






Total Views
Views on SlideShare
Embed Views



4 Embeds 69

http://pragmamark.org 42
https://twitter.com 23
http://www.linkedin.com 3
https://www.linkedin.com 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Enhance the Look of Your App With Text Kit Enhance the Look of Your App With Text Kit Presentation Transcript

  • Enhance the look of your app with Text Kit Matteo Battaglio iOS Developer @ Tiltap 1
  • About Matteo Battaglio iOS 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? iOS 7 UI overhaul is pretty much about text Text Kit is one of the coolest features of iOS 7 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... 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
  • 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
  • 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 around
 custom shapes 14
  • Text Styles • Dynamic Type mechanism
 • Optimized for legibility:
 thickness changes with size
 • Customizable by the user
 at runtime 15
  • 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.
  • 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
  • Customizability • Extensible Object-Oriented Architecture: • Subclassing • Delegation • Notifications
  • Text Effects In 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):
 -attributesAtIndex:effectiveRange: • the other 2 are for modifying the text (inherited from NSMutableAttributedString):
 -setAttributes:range: 25
  • 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
  • NSTextStorage NSTextStorage manages Set of
 NSLayoutManager objects so that each one can
 relayout and redisplay the text
 when and how it wants 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 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
  • Char to Glyph Mapping Glyphs do not map 1:1 with characters ligatures
 line wrapping modify the mapping of chars to glyphs. 31
  • Char & Glyph Methods The layout manager keeps track of this mapping and provides: -(NSUInteger)characterIndexForGlyphAtIndex: (NSUInteger)aGlyphIndex; -(NSUInteger)glyphIndexForCharacterAtIndex:
 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
  • 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
  • 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
  • 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
  • Text Container Coordinate System Text container’s origin could be anywhere inside its parent view’s coordinate system 37
  • Line Fragments characters Layout manager lines of glyphs 38
  • Line Fragments Exclusion paths break lines in parts Each part is called a line fragment 39
  • Line Fragment Coordinates Relative to the text container coordinate system 40
  • Glyph Coordinates Relative to the line fragment coordinate system 41
  • Character Location Glyph coordinate + Line fragment coordinate + Text container coordinate = UIView coordinate 42
  • Example: Character Location 
 Finding the location of last character 43
  • Example: Hit Testing Finding a word under a touch 44
  • 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
  • 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:shouldInteractWithTextAttachment:inRange: 46
  • Fonts
  • 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
  • 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
  • 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
  • [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