Mastering TextKit - Speaker Deck

Slide 1

Slide 1 text

Mastering TextKit try! Swift NYC 2016 Katsumi Kishikawa kk@realm.io Hi, I’m Katsumi and today I'm going to talk about TextKit.

Slide 2

Slide 2 text

Katsumi Kishikawa Realm Inc. kk@realm.io I'm coming from Japan, and I work at Realm. Around text component, this ever happen to you?

Slide 3

Slide 3 text

kk@realm.io For example,

Slide 4

Slide 4 text

kk@realm.io The text isn’t on the centre.

Slide 5

Slide 5 text

kk@realm.io Or,

Slide 6

Slide 6 text

kk@realm.io Irregular line spacing, and so on. In this talk I will show you how to render the text in the correct position.

Slide 7

Slide 7 text

Agenda ˖ )PXUFYUTMBJEPVUJOJ04 ˖ #BTJDUZQPHSBQIZ ˖ #BTJDVTBHFPG5FYU,JU ˖ "EWBODFEFYBNQMFT kk@realm.io I’m going to be covering four major points today First, I explain what determined the width, height and line spaces of text. It is important to be laid out the text accurately to the aimed position. Second, very basic knowledge of typography because it is necessary to do that. Third, basic usage of TextKit, almost about NSAttributedString. And ﬁnally, I'll show more advanced examples displaying rich text.

Slide 8

Slide 8 text

Text Layout after iOS 7 kk@realm.io So let’s get started! TextKit has been introduced in iOS 7.

Slide 9

Slide 9 text

What is TextKit? kk@realm.io What is TextKit?

Slide 10

Slide 10 text

TextKit is ˖ .PEFSOUFYUSFOEFSJOHFOHJOF ˖ #VJMUPOUPQPG$PSF5FYU ˖ )JHIMZJOUFHSBUFEXJUI6*,JU kk@realm.io https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html TextKit is a modern text rendering engine on iOS. It is built on top of CoreText, and very well integrated with UIKit. Thanks to that, you can achieve an advanced text layout, even without using the low-level API directly such as the CoreText. TextKit is not a framework in the traditional sense. Instead, TextKit is the name for a set of enhancements to existing text-displaying object and work with attributed strings. So, there is no anything special that uses the TextKit. Using UILabel or UITextView means using the TextKit.

Slide 11

Slide 11 text

UILabel kk@realm.io OK. Let’s take a look displaying text that uses a UILabel.

Slide 12

Slide 12 text

kk@realm.io UILabel Here are two UILabels. The same text but fonts are different. Each font is the same size. However, the result is quite different. As you may see, the latter label is taller than the former. Where do these differences come from?

Slide 13

Slide 13 text

Font Metrics kk@realm.io To understand that, I’ll have to explain about font metrics.

Slide 14

Slide 14 text

kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html Digital fonts contain data representing the metrics used for displaying. In other words, the fonts know their sizes that are displayed.

Slide 15

Slide 15 text

kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html The baseline is the hypothetical line upon which characters rest. Some characters such as J and G have descenders that drop below the baseline. Deﬁnition of the baseline diﬀers depending on the language, though, At this time it is described in the Roman text because the TextKit is based on it. The ascent is the distance from the tops of the glyphs to the baseline. The descent is the distance from the baseline to the bottom. The leading is the recommended vertical distance from the bottom of the descenders to the top of the next line in a multiline setting.

Slide 16

Slide 16 text

kk@realm.io Font metrics Baseline X-Height Cap height Ascent Descent So far, I've explained what depends the text that on an area to be drawn. It greatly depends on the font. If the different font would be specified, the rendering results will change. Because, the text is drawn by the font metrics. They are different for each font.

Slide 17

Slide 17 text

How to know the display size kk@realm.io So, can we know the size to be drawn without displayed it?

Slide 18

Slide 18 text

let size = CGSize(width: label.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Get Bounding Rect Single Line We can achieve it by using the method of NSString or NSAttributedString (it is boundingRectWithSize) that is a part of the enhancement of TextKit. This example is for the single line text.

Slide 19

Slide 19 text

let size = CGSize(width: label.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [.UsesLineFragmentOrigin], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Get Bounding Rect Multiple Lines For multiple lines of text, pass UsesLineFragmentOrigin to the options.

Slide 20

Slide 20 text

kk@realm.io Get Bounding Rect This screen shot is overlaying to the label the bounding rect. It shows that exactly match the bounding rect and the views.

Slide 21

Slide 21 text

UITextView kk@realm.io OK, Up next, let me touch on UITextView.

Slide 22

Slide 22 text

kk@realm.io UITextView Here is a text view that displays a same text and font. But it looks like a little larger than the UILabel.

Slide 23

Slide 23 text

kk@realm.io UITextView Overlay bounding rect on the view. It is certainly larger.

Slide 24

Slide 24 text

kk@realm.io UITextView The same result even in the multiple lines. Why?

Slide 25

Slide 25 text

kk@realm.io Default margins Because UITextView has margins by default.

Slide 26

Slide 26 text

kk@realm.io Default margins textView.textContainer.lineFragmentPadding textView.textContainerInset UIEdgeInsets(top: 8.0, left: 0.0, bottom: 8.0, right: 0.0) 5.0 They are textContainerInset and lineFragmentPadding.

Slide 27

Slide 27 text

kk@realm.io Leading Also, UITextView respects the font leading unlike UILabel. Usually, it doesn't matter because, from iOS 9, font leading is rarely used. In fact, San Francisco font has zero leading. Same for the other fonts, or have only a very small value.

Slide 28

Slide 28 text

kk@realm.io CJK Font font.leading One of the exceptions is CJK fonts. CJK fonts has large leading.

Slide 29

Slide 29 text

kk@realm.io Custom Font (Not built-in) font.leading And external custom fonts. If you use these fonts, they will lead to an unexpected result due to the font leading.

Slide 30

Slide 30 text

Reset Default Margins kk@realm.io So, in order to know the exact size that text view to draw, you must remove the default margins.

Slide 31

Slide 31 text

let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit() kk@realm.io Remove textContainerInset To remove a textContainerInset,

Slide 32

Slide 32 text

let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit() kk@realm.io Remove textContainerInset assign a zero insets to the textContainerInset.

Slide 33

Slide 33 text

kk@realm.io Remove textContainerInset Now textContainerInset has been removed.

Slide 34

Slide 34 text

let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() kk@realm.io Remove lineFragmentPadding To remove a lineFragmentPadding,

Slide 35

Slide 35 text

let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() kk@realm.io Remove lineFragmentPadding assign a zero to textContainer.lineFragmentPadding.

Slide 36

Slide 36 text

kk@realm.io Remove lineFragmentPadding Then, lineFragmentPadding has also been removed.

Slide 37

Slide 37 text

let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit() kk@realm.io Ignore font.leading Finally, to ignore a font leading. As explained earlier, leading might lead to an unintentional result. So I recommend to always ignore the leading.

Slide 38

Slide 38 text

kk@realm.io Ignore font.leading @interface NSLayoutManager : NSObject ... // By default, a layout manager will use leading as specified by the font. However, this is not appropriate for most UI text, for which a fixed leading is usually specified by UI layout guidelines. These methods allow the use of the font's leading to be turned off. @property(NS_NONATOMIC_IOSONLY) BOOL usesFontLeading; Apple also said that leading is not appropriate in the UI text… In the header ﬁle. I think, Apple should document this.

Slide 39

Slide 39 text

let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit() kk@realm.io Ignore font.leading Anyway, To ignore a font leading, disable layoutManager’s `usesFontLeading` property.

Slide 40

Slide 40 text

kk@realm.io Ignore font.leading Did it! It is now possible to know the exact size even in the text view.

Slide 41

Slide 41 text

let size = CGSize(width: textView.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [.UsesLineFragmentOrigin, .UsesFontLeading], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Note: Including font.leading Just as a side note, when you specify usesFontLeading option, you can get a size including the leading.

Slide 42

Slide 42 text

kk@realm.io Including font.leading Like this.

Slide 43

Slide 43 text

kk@realm.io textView.textContainerInset = UIEdgeInsetsZero textView.textContainer.lineFragmentPadding = 0 textView.layoutManager.usesFontLeading = false Reset Default Margins Alright. This is the way to reset the margins of the text view. To accurately layout in place aimed at, you need to know these behaviours.

Slide 44

Slide 44 text

Displaying Rich Text kk@realm.io So far, I've shown how to get exact size in single style text. Then, what about the multiple style text? There is nothing special. Because even the text has multiple styles, it would be displayed on the same component such as UILabel, UITextView and attributed string. In other words, all we have to do is construct a correct attributed string.

Slide 45

Slide 45 text

let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) let attributes = [ NSFontAttributeName: font, NSForegroundColorAttributeName: UIColor(...), NSParagraphStyleAttributeName: paragraphStyle, ] let attributedText = NSAttributedString(string: text, attributes: attributes) textView.attributedText = attributedText kk@realm.io NSAttributedString This is a simple example of NSAttributedString. It changes a font, colour, and more wider spaces between the lines.

Slide 46

Slide 46 text

kk@realm.io Change Line Height Even as you specify what kind of styles,

Slide 47

Slide 47 text

kk@realm.io Change Line Height you can get the correct result. To achieve the ﬁxed spaces between each line, like this,

Slide 48

Slide 48 text

let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) let attributes = [ NSFontAttributeName: font, NSForegroundColorAttributeName: UIColor(...), NSParagraphStyleAttributeName: paragraphStyle, ] let attributedText = NSAttributedString(string: text, attributes: attributes) textView.attributedText = attributedText kk@realm.io Control Line Height set same value as font size to minimum/maximum line height,

Slide 49

Slide 49 text

let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) kk@realm.io min/maxLineHeight then adjust line spacing property. Why there are two similar properties?

Slide 50

Slide 50 text

kk@realm.io min/maxLineHeight https://github.com/ibireme/YYText MinimumLineHeight MaximumLineHeight Because for the multiple sizes fonts in the same paragraph. MinimumLineHeight keeps the line spacing, MaximumLineHeight will do the opposite.

Slide 51

Slide 51 text

kk@realm.io Line spacing https://github.com/ibireme/YYText Line spacing is spacing between lines,

Slide 52

Slide 52 text

kk@realm.io FirstLineHeadIndent https://github.com/ibireme/YYText FirstLineHeadIndent shifts start point of every ﬁrst line.

Slide 53

Slide 53 text

kk@realm.io TextAlignment https://github.com/ibireme/YYText Text alignment,

Slide 54

Slide 54 text

kk@realm.io Kerning https://github.com/ibireme/YYText Kerning is adjusting the spacing between characters.

Slide 55

Slide 55 text

Advanced Example of NSAttributedString kk@realm.io There are too many attributes to show, so, after this, we will look at the some advanced examples.

Slide 56

Slide 56 text

kk@realm.io This is the ﬁrst example. There are multiple fonts, paragraphs in diﬀerent styles, and bullet point.

Slide 57

Slide 57 text

kk@realm.io It consists single view and attributed string. There is no any subviews obviously.

Slide 58

Slide 58 text

kk@realm.io Diﬀerent font sizes,

Slide 59

Slide 59 text

kk@realm.io Diﬀerent line spaces

Slide 60

Slide 60 text

kk@realm.io Inline images

Slide 61

Slide 61 text

kk@realm.io Tab stops, and headIndent

Slide 62

Slide 62 text

kk@realm.io Mathematical Formulas Another example is rendering mathematical formulas. I'm pretty sure displaying math is the most diﬃcult challenge in text rendering. But TextKit can.

Slide 63

Slide 63 text

kk@realm.io Mathematical Formulas The ﬁrst example is the Quadratic Formula.

Slide 64

Slide 64 text

kk@realm.io Mathematical Formulas Now, we start from this.

Slide 65

Slide 65 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"] First, change to the math font.

Slide 66

Slide 66 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 18] Shift the baseline of the radical symbol.

Slide 67

Slide 67 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -26] Get down 2a for the fractional.

Slide 68

Slide 68 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -68] And move left using the kerning attribute.

Slide 69

Slide 69 text

kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): 1] 2 to superscript for the power

Slide 70

Slide 70 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)] Superscript size is also deﬁned by the font. Almost the same size in this case, then scale the font manually.

Slide 71

Slide 71 text

kk@realm.io Scaling font extension UIFont { func scale(x x: CGFloat, y: CGFloat) -> UIFont { return transform(CGAffineTransformMakeScale(x, y)) } func transform(matrix: CGAffineTransform) -> UIFont { return UIFont(descriptor: fontDescriptor().fontDescriptorWithMatrix(matrix), size: pointSize) } } Scale method is like this. Using FontDescriptor, which is part of the TextKit, you can apply CGAﬃneTransform to the fonts.

Slide 72

Slide 72 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 2] In the same way, continue to adjust the layout.

Slide 73

Slide 73 text

kk@realm.io Mathematical Formulas "\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}" This is a character of a horizontal line.

Slide 74

Slide 74 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 14] Up the line

Slide 75

Slide 75 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -12] and move left

Slide 76

Slide 76 text

kk@realm.io Mathematical Formulas “\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}...” Same

Slide 77

Slide 77 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -12] and same

Slide 78

Slide 78 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -135] Finally, centre the x and equals sign,

Slide 79

Slide 79 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -12] Did it. It’s so beautiful, isn’t it..

Slide 80

Slide 80 text

kk@realm.io Mathematical Formulas Let’s see the more complex example, but it is the same to do.

Slide 81

Slide 81 text

kk@realm.io Mathematical Formulas

Slide 82

Slide 82 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"]

Slide 83

Slide 83 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -20] It just only repeat same steps as well.

Slide 84

Slide 84 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]

Slide 85

Slide 85 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]

Slide 86

Slide 86 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]

Slide 87

Slide 87 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: 4]

Slide 88

Slide 88 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]

Slide 89

Slide 89 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -24]

Slide 90

Slide 90 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 91

Slide 91 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -20]

Slide 92

Slide 92 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 10]

Slide 93

Slide 93 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 94

Slide 94 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]

Slide 95

Slide 95 text

kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): -1]

Slide 96

Slide 96 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 97

Slide 97 text

kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): 1]

Slide 98

Slide 98 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 99

Slide 99 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8] Here, the radical symbol needs twice height.

Slide 100

Slide 100 text

kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 1, y: 2.4)] So scale the font twice to y axis.

Slide 101

Slide 101 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 20]

Slide 102

Slide 102 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: 2]

Slide 103

Slide 103 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 16]

Slide 104

Slide 104 text

kk@realm.io Mathematical Formulas [NSKernAttributeName: -118]

Slide 105

Slide 105 text

kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8] Alright, I did it!

Slide 106

Slide 106 text

kk@realm.io https://github.com/ kishikawakatsumi/TextKitExamples The examples are on GitHub. I’m happy that you see and play with it.

Slide 107

Slide 107 text

Summary • No longer use CoreText directly • Carefully to choose font. Text layout is based on font metrics • The most important is constructing NSAttributedString kk@realm.io In summary, the main points of my presentation were, No longer use CoreText directly. TextKit covers ninety-nine percent use cases. Carefully to choose font. Because text layout is based on font metrics. The most important is constructing attributed string correctly. That’s all. So mastering attributes strings means mastering TextKit. That’s it. Thank you for listening.