Mastering TextKit - Speaker Deck

Slide 1

Slide 1 text

Mastering TextKit try! Swift NYC 2016 Katsumi Kishikawa [email protected] Hi, I’m Katsumi and today I'm going to talk about TextKit.

Slide 2

Slide 2 text

Katsumi Kishikawa Realm Inc. [email protected] I'm coming from Japan, and I work at Realm. Around text component, this ever happen to you?

Slide 3

Slide 3 text

[email protected] For example,

Slide 4

Slide 4 text

[email protected] The text isn’t on the centre.

Slide 5

Slide 5 text

[email protected] Or,

Slide 6

Slide 6 text

[email protected] 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 [email protected] 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 [email protected] So let’s get started! TextKit has been introduced in iOS 7.

Slide 9

Slide 9 text

What is TextKit? [email protected] What is TextKit?

Slide 10

Slide 10 text

TextKit is ˖ .PEFSOUFYUSFOEFSJOHFOHJOF ˖ #VJMUPOUPQPG$PSF5FYU ˖ )JHIMZJOUFHSBUFEXJUI6*,JU [email protected] 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 [email protected] OK. Let’s take a look displaying text that uses a UILabel.

Slide 12

Slide 12 text

[email protected] 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 [email protected] To understand that, I’ll have to explain about font metrics.

Slide 14

Slide 14 text

Slide 15

Slide 15 text

[email protected] 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

[email protected] 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 [email protected] 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) [email protected] 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) [email protected] Get Bounding Rect Multiple Lines For multiple lines of text, pass UsesLineFragmentOrigin to the options.

Slide 20

Slide 20 text

[email protected] 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 [email protected] OK, Up next, let me touch on UITextView.

Slide 22

Slide 22 text

[email protected] 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

[email protected] UITextView Overlay bounding rect on the view. It is certainly larger.

Slide 24

Slide 24 text

[email protected] UITextView The same result even in the multiple lines. Why?

Slide 25

Slide 25 text

[email protected] Default margins Because UITextView has margins by default.

Slide 26

Slide 26 text

[email protected] 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

[email protected] 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

[email protected] CJK Font font.leading One of the exceptions is CJK fonts. CJK fonts has large leading.

Slide 29

Slide 29 text

[email protected] 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 [email protected] 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() [email protected] Remove textContainerInset To remove a textContainerInset,

Slide 32

Slide 32 text

let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit() [email protected] Remove textContainerInset assign a zero insets to the textContainerInset.

Slide 33

Slide 33 text

[email protected] Remove textContainerInset Now textContainerInset has been removed.

Slide 34

Slide 34 text

let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() [email protected] Remove lineFragmentPadding To remove a lineFragmentPadding,

Slide 35

Slide 35 text

let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() [email protected] Remove lineFragmentPadding assign a zero to textContainer.lineFragmentPadding.

Slide 36

Slide 36 text

[email protected] 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() [email protected] 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

[email protected] 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() [email protected] Ignore font.leading Anyway, To ignore a font leading, disable layoutManager’s `usesFontLeading` property.

Slide 40

Slide 40 text

[email protected] 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) [email protected] 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

[email protected] Including font.leading Like this.

Slide 43

Slide 43 text

[email protected] 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 [email protected] 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 [email protected] 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

[email protected] Change Line Height Even as you specify what kind of styles,

Slide 47

Slide 47 text

[email protected] 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 [email protected] 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) [email protected] min/maxLineHeight then adjust line spacing property. Why there are two similar properties?

Slide 50

Slide 50 text

[email protected] 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

[email protected] Line spacing https://github.com/ibireme/YYText Line spacing is spacing between lines,

Slide 52

Slide 52 text

[email protected] FirstLineHeadIndent https://github.com/ibireme/YYText FirstLineHeadIndent shifts start point of every ﬁrst line.

Slide 53

Slide 53 text

[email protected] TextAlignment https://github.com/ibireme/YYText Text alignment,

Slide 54

Slide 54 text

[email protected] Kerning https://github.com/ibireme/YYText Kerning is adjusting the spacing between characters.

Slide 55

Slide 55 text

Advanced Example of NSAttributedString [email protected] There are too many attributes to show, so, after this, we will look at the some advanced examples.

Slide 56

Slide 56 text

[email protected] This is the ﬁrst example. There are multiple fonts, paragraphs in diﬀerent styles, and bullet point.

Slide 57

Slide 57 text

[email protected] It consists single view and attributed string. There is no any subviews obviously.

Slide 58

Slide 58 text

[email protected] Diﬀerent font sizes,

Slide 59

Slide 59 text

[email protected] Diﬀerent line spaces

Slide 60

Slide 60 text

[email protected] Inline images

Slide 61

Slide 61 text

[email protected] Tab stops, and headIndent

Slide 62

Slide 62 text

[email protected] 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

[email protected] Mathematical Formulas The ﬁrst example is the Quadratic Formula.

Slide 64

Slide 64 text

[email protected] Mathematical Formulas Now, we start from this.

Slide 65

Slide 65 text

[email protected] Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"] First, change to the math font.

Slide 66

Slide 66 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 18] Shift the baseline of the radical symbol.

Slide 67

Slide 67 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -26] Get down 2a for the fractional.

Slide 68

Slide 68 text

[email protected] Mathematical Formulas [NSKernAttributeName: -68] And move left using the kerning attribute.

Slide 69

Slide 69 text

[email protected] Mathematical Formulas [String(kCTSuperscriptAttributeName): 1] 2 to superscript for the power

Slide 70

Slide 70 text

[email protected] 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

[email protected] 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

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 2] In the same way, continue to adjust the layout.

Slide 73

Slide 73 text

[email protected] 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

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 14] Up the line

Slide 75

Slide 75 text

[email protected] Mathematical Formulas [NSKernAttributeName: -12] and move left

Slide 76

Slide 76 text

[email protected] Mathematical Formulas “\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}...” Same

Slide 77

Slide 77 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -12] and same

Slide 78

Slide 78 text

[email protected] Mathematical Formulas [NSKernAttributeName: -135] Finally, centre the x and equals sign,

Slide 79

Slide 79 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -12] Did it. It’s so beautiful, isn’t it..

Slide 80

Slide 80 text

[email protected] Mathematical Formulas Let’s see the more complex example, but it is the same to do.

Slide 81

Slide 81 text

[email protected] Mathematical Formulas

Slide 82

Slide 82 text

[email protected] Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"]

Slide 83

Slide 83 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -20] It just only repeat same steps as well.

Slide 84

Slide 84 text

[email protected] Mathematical Formulas [NSKernAttributeName: -14]

Slide 85

Slide 85 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -8]

Slide 86

Slide 86 text

[email protected] Mathematical Formulas [NSKernAttributeName: -14]

Slide 87

Slide 87 text

[email protected] Mathematical Formulas [NSKernAttributeName: 4]

Slide 88

Slide 88 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -8]

Slide 89

Slide 89 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -24]

Slide 90

Slide 90 text

[email protected] Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 91

Slide 91 text

[email protected] Mathematical Formulas [NSKernAttributeName: -20]

Slide 92

Slide 92 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 10]

Slide 93

Slide 93 text

[email protected] Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 94

Slide 94 text

[email protected] Mathematical Formulas [NSKernAttributeName: -14]

Slide 95

Slide 95 text

[email protected] Mathematical Formulas [String(kCTSuperscriptAttributeName): -1]

Slide 96

Slide 96 text

[email protected] Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 97

Slide 97 text

[email protected] Mathematical Formulas [String(kCTSuperscriptAttributeName): 1]

Slide 98

Slide 98 text

[email protected] Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]

Slide 99

Slide 99 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -8] Here, the radical symbol needs twice height.

Slide 100

Slide 100 text

[email protected] Mathematical Formulas [NSFontAttributeName: font.scale(x: 1, y: 2.4)] So scale the font twice to y axis.

Slide 101

Slide 101 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 20]

Slide 102

Slide 102 text

[email protected] Mathematical Formulas [NSKernAttributeName: 2]

Slide 103

Slide 103 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: 16]

Slide 104

Slide 104 text

[email protected] Mathematical Formulas [NSKernAttributeName: -118]

Slide 105

Slide 105 text

[email protected] Mathematical Formulas [NSBaselineOffsetAttributeName: -8] Alright, I did it!

Slide 106

Slide 106 text

[email protected] 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 [email protected] 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.