Stupid Core Text Tricks

Abusing Low-Level Typography on iOS

Transcript

1. Stupid Core Text Tricks Warren Moore Auerhaus Development, LLC Abusing Low-Level Typography on iOS
2. Introduction to Typography •Typography involves both typesetting and type design •Typesetting involves the placement of text for the purpose of readability •In digital typography, the end product of type design is a font or font family. •A font is a particular manifestation of a typeface
3. Introduction to Typography Font Terminology Helvetica Neue Regular 16 Pt Helvetica Neue Regular 18 Pt Helvetica Neue Regular 20 Pt Helvetica Neue Condensed Bold 16 Pt Helvetica Neue Condensed Bold 18 Pt Helvetica Neue Condensed Bold 20 Pt Helvetica Neue UltraLight 16 Pt Helvetica Neue UltraLight 18 Pt Helvetica Neue UltraLight 20 Pt Font Font Font Font Family
4. Introduction to Typography Fonts and Glyphs AaBbCcDd... •A font contains descriptions of its glyphs (character shapes) •The description of a glyph determines how it is laid out and drawn QBounding box Baseline Ascent Descent Advance width Helvetica Neue Bold
5. Typesetting Lines and Runs "I have a different constitution, I have a different brain, I have a different heart. I got tiger blood, man." Runs Lines Frame
6. What is Core Text? •A framework for font management and text layout (typesetting) •An API made public in Mac OS X 10.5 and iOS 3.2 •A low-level, high-performance way to access font details and manage text layout at the frame, line, or glyph level CTFramesetter CTFrame CTLine CTRun CTTypesetter CTFrame CTFrame CTLine CTLine CTRun CTRun
7. Core Text Rendering Example // Prepare font CTFontRef font = CTFontCreateWithName((CFStringRef)@"Helvetica", 48, NULL); // Create an attributed string NSDictionary *attribs = [NSDictionary dictionaryWithObject:(id)font forKey:(id)kCTFontAttributeName]; CFAttributedStringRef attrString = CFAttributedStringCreate(NULL, (CFStringRef)@"Hello, world", (CFDictionaryRef)attribs); // Draw the string CTLineRef line = CTLineCreateWithAttributedString(attrString); CGContextSetTextMatrix(context, CGAffineTransformMakeScale(1.0, -1.0)); CGContextSetTextPosition(context, x, y); CTLineDraw(line, context); // Clean up CFRelease(line); CFRelease(attrString); CFRelease(font); Drawing a Single Line (adapted from Wikipedia)
8. Demo Newspaper-style layout with Core Data
9. Getting Glyph Data One level deeper CGGlyph glyph; CTRunGetGlyphs(run, glyphRange, &glyph); CGPoint position; CTRunGetPositions(run, glyphRange, &position); CGPathRef path = CTFontCreatePathForGlyph(runFont, glyph, NULL); Image credit: Jonathan Richard Shewchuk (UC Berkeley) CGRect glyphBoundingBox = CGPathGetPathBoundingBox(glyphPath);
10. Getting Glyph Data One level deeper •Retrieved glyph paths can be individually transformed •Paths can be stroked and filled in a regular CGContext •Or, you can do something more creative with them
11. Demo Particle System Approximation of Text
12. Questions? Criticism and ridicule are also welcome. twitter: @warrenm email: wm@warrenmoore.net Code on github: github.com/warrenm/Core-Text-Tricks