BonMot Talk @ Swift Office Hours 2017

Learn about BonMot, a library for making beautiful typography on iOS. Full Keynote deck is posted at https://cl.ly/jJqc.

Transcript

1. Zev Eisenberg from Stop Saying NO To DESIGNERS “ ”
3. {Typography}
6. Adobe Illustrator OpenType Panel Figure Style Figure Position Contextual Alternates Discretionary Ligatures Swash Stylistic Alternates Titling Alternates Ordinals Fractions Standard Ligatures
7. macOS Typography Panel
8. {Examples}
14. BlindWays
18. Thin Space Hair Space No-Break Space
19. {The Status Quo}
21. ¶ Unpredictable styling of common views
22. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use
23. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text
24. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings
25. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings ¶ Special characters are hard to read
26. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings ¶ Special characters are hard to read ¶ Dynamic Type API is limited
28. ¶ Unpredictable styling of common views UILabel font lineBreakMode shadowColor shadowOffset text textAlignment textColor UITextField font - - - text textAlignment textColor UIButton - - titleShadowColor - title - titleColor +titleLabel
29. ¶ Unpredictable styling of common views UILabel attributedText UITextField attributedText UIButton attributedTitle Predictable-ish
30. ¶ NSAttributedString is hard to use Swift Office Hours
31. ¶ NSAttributedString is hard to use let label = UILabel() Swift Office Hours
32. ¶ NSAttributedString is hard to use let label = UILabel() 
 let paragraphStyle = NSMutableParagraphStyle()
 paragraphStyle.lineHeightMultiple = 0.7
 paragraphStyle.alignment = .center
 Swift Office Hours
33. ¶ NSAttributedString is hard to use let label = UILabel() 
 let paragraphStyle = NSMutableParagraphStyle()
 paragraphStyle.lineHeightMultiple = 0.7
 paragraphStyle.alignment = .center
 let attributes = [
 NSFontAttributeName: UIFont.systemFont(ofSize: 150),
 NSForegroundColorAttributeName: UIColor.red,
 NSParagraphStyleAttributeName: paragraphStyle,
 ]
 Swift Office Hours
34. ¶ NSAttributedString is hard to use let label = UILabel() 
 let paragraphStyle = NSMutableParagraphStyle()
 paragraphStyle.lineHeightMultiple = 0.7
 paragraphStyle.alignment = .center
 let attributes = [
 NSFontAttributeName: UIFont.systemFont(ofSize: 150),
 NSForegroundColorAttributeName: UIColor.red,
 NSParagraphStyleAttributeName: paragraphStyle,
 ]
 label.attributedText = NSAttributedString(
 string: "Swift Office Hours",
 attributes: attributes) Swift Office Hours
35. ¶ NSAttributedString is hard to use Swift Office Hours easy
36. ¶ NSAttributedString is hard to use let label = UILabel()
 Swift Office Hours easy
37. ¶ NSAttributedString is hard to use let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center)
 )
 Swift Office Hours easy
38. ¶ NSAttributedString is hard to use let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center)
 )
 let string = "Swift Office Hours".styled(with: style)
 Swift Office Hours easy
39. ¶ NSAttributedString is hard to use let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center)
 )
 let string = "Swift Office Hours".styled(with: style)
 label.attributedText = string Swift Office Hours easy
40. T r a c k i n g ning Ker
41. T r a c k i n g ning Ker
42. NSKernAttributeName NSNumber (nonzero) 0 NSNull() controls tracking disables kerning font kerning
43. let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center),
 .tracking(.point(15))
 )
 let string = "Swift Office Hours".styled(with: style)
 label.attributedText = string Swift Office Hours ¶ NSAttributedString is hard to use easy
44. let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center),
 .tracking(.adobe(1000))
 )
 let string = "Swift Office Hours".styled(with: style)
 label.attributedText = string ¶ NSAttributedString is hard to use easy Swift Office Hours
45. Figure Styles 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 uppercase lowercase proportional monospaced
46. Figure Styles 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 uppercase lowercase proportional monospaced
47. Figure Styles 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 0123456789 1111111111 uppercase lowercase proportional monospaced let originalDescriptor = myFont.fontDescriptor let featureSettings = [ [ UIFontFeatureTypeIdentifierKey: kNumberSpacingType, UIFontFeatureSelectorIdentifierKey: kMonospacedNumbersSelector, ], ] let attributes = [ UIFontDescriptorFeatureSettingsAttribute: featureSettings, ] let fontDescriptor = originalDescriptor.addingAttributes(attributes) let font = UIFont(descriptor: fontDescriptor, size: 0)
48. let label = UILabel()
 let style = StringStyle(
 .font(UIFont.systemFont(ofSize: 150)),
 .color(.red),
 .lineHeightMultiple(0.7),
 .alignment(.center),
 .tracking(.adobe(1000)),
 .numberSpacing(.monospaced), .numberCase(.upper)
 )
 let string = "Swift Office Hours".styled(with: style)
 label.attributedText = string ¶ NSAttributedString is hard to use easy Swift Office Hours
49. ¶ Hard to wrap images with text Office Hours
50. ¶ Hard to wrap images with text let attachment = NSTextAttachment() Office Hours
51. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = swift Office Hours
52. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) swift Office Hours
53. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) swift Office Hours
54. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) let fullString = NSMutableAttributedString(string: " Office Hours") swift Office Hours
55. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) let fullString = NSMutableAttributedString(string: " Office Hours") fullString.insert(imageString, at: 0) swift Office Hours
56. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) let fullString = NSMutableAttributedString(string: " Office Hours") fullString.insert(imageString, at: 0) UNCAUGHT EXCEPTION (NSInvalidUnarchiveOperationException): *** -[NSKeyedUnarchiver decodeObjectForKey:]: cannot decode object of class (UIImage) for key (NS.image); the class may be defined in source code or a library that is not linked swift Office Hours
57. ¶ Hard to wrap images with text let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) let fullString = NSMutableAttributedString(string: " Office Hours") fullString.insert(imageString, at: 0) UNCAUGHT EXCEPTION (NSInvalidUnarchiveOperationException): *** -[NSKeyedUnarchiver decodeObjectForKey:]: cannot decode object of class (UIImage) for key (NS.image); the class may be defined in source code or a library that is not linked rdar://30605012 swift Office Hours
58. Office Hours ¶ Hard to wrap images with text Surprisingly easy let fullString = NSAttributedString.composed(of: [ , " Office Hours", ]) let attachment = NSTextAttachment() attachment.image = attachment.bounds = CGRect(origin: .zero, size: myImage.size) let imageString = NSAttributedString(attachment: attachment) let fullString = NSMutableAttributedString(string: " Office Hours") fullString.insert(imageString, at: 0) swift swift
59. ¶ Hard to style ranges of strings
60. ¶ Hard to style ranges of strings I went to Swift Office Hours, and it was not too cold!
61. ¶ Hard to style ranges of strings I went to Swift Office Hours, and it was not too cold! Je suis allé à Swift Office Hours, et il n’était pas trop froid!
62. 8:21 PM - 13 Mar 2015 NSAttributedString is great because it’s the result of years of research that have shown coupling between data and presentation to be ideal. @hyperspacemark Mark Adams ¶ Hard to style ranges of strings
63. ¶ Hard to style ranges of strings Trivial
64. ¶ Hard to style ranges of strings let string = "I went to Swift Office Hours, and it was <strong>not</strong> too cold!"
 Trivial
65. ¶ Hard to style ranges of strings let string = "I went to Swift Office Hours, and it was <strong>not</strong> too cold!"
 let strong = StringStyle(
 .font(myBoldFont)
 )
 Trivial
66. ¶ Hard to style ranges of strings let string = "I went to Swift Office Hours, and it was <strong>not</strong> too cold!"
 let strong = StringStyle(
 .font(myBoldFont)
 )
 let style = StringStyle(
 .font(myNormalFont),
 .xmlRules([
 .style("strong", strong),
 ]))
 Trivial
67. ¶ Hard to style ranges of strings let string = "I went to Swift Office Hours, and it was <strong>not</strong> too cold!"
 let strong = StringStyle(
 .font(myBoldFont)
 )
 let style = StringStyle(
 .font(myNormalFont),
 .xmlRules([
 .style("strong", strong),
 ]))
 let attributed = string.styled(with: style) Trivial
68. ¶ Hard to style ranges of strings let string = "Je suis allé à Swift Office Hours, et il <strong>n’</strong>était <strong>pas</strong> trop froid!"
 let strong = StringStyle(
 .font(myBoldFont)
 )
 let style = StringStyle(
 .font(myNormalFont),
 .xmlRules([
 .style("strong", strong),
 ]))
 let attributed = string.styled(with: style) Trivial
69. ¶ Special characters are hard to read func testSpecialCharacters() { // U+00A0: no-break space let test = "Swift\u{00A0}Office\u{00A0}Hours" XCTAssertEqual(test, "Swift Office Hours") }
70. ¶ Special characters are hard to read func testSpecialCharacters() { // U+00A0: no-break space let test = "Swift\u{00A0}Office\u{00A0}Hours" XCTAssertEqual(test, "Swift Office Hours") } ("Swift Office Hours") is not equal to ("Swift Office Hours")
71. ¶ Special characters are hard to read painless
72. ¶ Special characters are hard to read func testSpecialCharacters() {
 let string = "Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours" painless
73. ¶ Special characters are hard to read func testSpecialCharacters() {
 let string = "Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours" let attributed = string.styled(with: .xmlRules([])) painless
74. ¶ Special characters are hard to read func testSpecialCharacters() {
 let string = "Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours" let attributed = string.styled(with: .xmlRules([])) let test = attributed.bonMotDebugString painless
75. ¶ Special characters are hard to read func testSpecialCharacters() {
 let string = "Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours" let attributed = string.styled(with: .xmlRules([])) let test = attributed.bonMotDebugString XCTAssertEqual(test, "Swift Office Hours")
 } painless
76. ¶ Special characters are hard to read func testSpecialCharacters() {
 let string = "Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours" let attributed = string.styled(with: .xmlRules([])) let test = attributed.bonMotDebugString XCTAssertEqual(test, "Swift Office Hours")
 } painless ("Swift<BON:noBreakSpace/>Office<BON:noBreakSpace/>Hours") is not equal to ("Swift Office Hours")
77. ¶ Dynamic Type API is limited
78. ¶ Dynamic Type API is limited let font = UIFont.preferredFont(forTextStyle: .headline)

79. ¶ Dynamic Type API is limited let font = UIFont.preferredFont(forTextStyle: .headline)
 NotificationCenter.default.addObserver(
 self,
 selector: #selector(changedSize),
 name: .UIContentSizeCategoryDidChange,
 object: nil)

80. ¶ Dynamic Type API is limited let font = UIFont.preferredFont(forTextStyle: .headline)
 NotificationCenter.default.addObserver(
 self,
 selector: #selector(changedSize),
 name: .UIContentSizeCategoryDidChange,
 object: nil)
 override func traitCollectionDidChange(_ previous: UITraitCollection?) {
 super.traitCollectionDidChange(previous)
 ... // iOS 10+
 }
81. ¶ Dynamic Type API is limited rad
82. ¶ Dynamic Type API is limited UIApplication.shared.enableAdaptiveContentSizeMonitor()
 
 rad
83. ¶ Dynamic Type API is limited UIApplication.shared.enableAdaptiveContentSizeMonitor()
 
 let style = StringStyle(
 .font(inputFont),
 .adapt(.body)
 ) rad
84. ¶ Dynamic Type API is limited rad 0 5 10 15 20 25 30 35 40 45 50 55 60 XS S M L (default) XL XXL XXXL AccessibilityM AccessibilityL AccessibilityXL AccessibilityXXL AccessibilityXXXL Caption2 Headline Caption1 Title2 Footnote Title3 Callout Body Subhead
85. ¶ Dynamic Type API is limited rad
87. ¶ Unpredictable styling of common views Predictable-ish
88. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use Predictable-ish easy
89. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text Surprisingly easy Predictable-ish easy
90. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings Trivial Surprisingly easy Predictable-ish easy
91. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings ¶ Special characters are hard to read painless Trivial Surprisingly easy Predictable-ish easy
92. ¶ Unpredictable styling of common views ¶ NSAttributedString is hard to use ¶ Hard to wrap images with text ¶ Hard to style ranges of strings ¶ Special characters are hard to read ¶ Dynamic Type API is limited rad painless Trivial Surprisingly easy Predictable-ish easy
94. {Giant Lists}
95. struct StringStyle { var font: BONFont? var backgroundColor: BONColor? var color: BONColor? var underline: (NSUnderlineStyle, BONColor?)? var strikethrough: (NSUnderlineStyle, BONColor?)? var baselineOffset: CGFloat? var lineSpacing: CGFloat? var paragraphSpacingAfter: CGFloat? var alignment: NSTextAlignment? var firstLineHeadIndent: CGFloat? var lineHeightMultiple: CGFloat? // ✂ snip 40 lines var numberCase: NumberCase? var numberSpacing: NumberSpacing? var tracking: Tracking? } StringStyle (360 lines)
96. StringStyle (360 lines) attributes.update(possibleValue: font, forKey: NSFontAttributeName) attributes.update(possibleValue: link, forKey: NSLinkAttributeName) attributes.update(possibleValue: backgroundColor, forKey: NSBackgroundColorAttributeName) attributes.update(possibleValue: color, forKey: NSForegroundColorAttributeName) attributes.update(possibleValue: underline?.0.rawValue, forKey: NSUnderlineStyleAttributeName) attributes.update(possibleValue: underline?.1, forKey: NSUnderlineColorAttributeName) // etc
97. StringStyle (360 lines) let style = StringStyle() style.font = UIFont.systemFont(ofSize: 150) style.color = .red style.lineHeightMultiple = 0.7 style.alignment = .center let string = "Swift Office Hours".styled(with: style)
98. StringStyle.Part (300 lines) extension StringStyle { public enum Part { case font(BONFont) case backgroundColor(BONColor) case color(BONColor) case underline(NSUnderlineStyle, BONColor?) case strikethrough(NSUnderlineStyle, BONColor?) case baselineOffset(CGFloat) case alignment(NSTextAlignment) case tracking(Tracking) case lineSpacing(CGFloat) case paragraphSpacingAfter(CGFloat) case firstLineHeadIndent(CGFloat) case numberSpacing(NumberSpacing) case numberCase(NumberCase) case fractions(Fractions) // ✂ snip many lines } }
99. StringStyle.Part (300 lines) extension StringStyle { public init(_ parts: Part...) { self.init(parts) } public init(_ parts: [Part]) { self.init() for part in parts { update(part: part) } } }
100. StringStyle.Part (300 lines) let style = StringStyle( .font(UIFont.systemFont(ofSize: 150)), .color(.red), .lineHeightMultiple(0.7), .alignment(.center) ) let string = "Swift Office Hours".styled(with: style)
101. iOS + macOS + tvOS + watchOS Compatibility (50 lines) #if os(OSX) import AppKit public typealias BONColor = NSColor public typealias BONImage = NSImage public typealias BONTextField = NSTextField public typealias BONFont = NSFont public typealias BONFontDescriptor = NSFontDescriptor let BONFontDescriptorFeatureSettingsAttribute = NSFontFeatureSettingsAttribute let BONFontFeatureTypeIdentifierKey = NSFontFeatureTypeIdentifierKey let BONFontFeatureSelectorIdentifierKey = NSFontFeatureSelectorIdentifierKey #else import UIKit public typealias BONColor = UIColor public typealias BONImage = UIImage public typealias BONFont = UIFont public typealias BONFontDescriptor = UIFontDescriptor let BONFontDescriptorFeatureSettingsAttribute = UIFontDescriptorFeatureSettingsAttribute let BONFontFeatureTypeIdentifierKey = UIFontFeatureTypeIdentifierKey let BONFontFeatureSelectorIdentifierKey = UIFontFeatureSelectorIdentifierKey #if os(iOS) || os(tvOS) public typealias BONTextField = UITextField #endif #endif
102. Swift 2.x + 3.0 Compatibility (1,000 lines) https://www.raizlabs.com/dev/2016/10/swift-2-x-3-0-compatibility/
103. Swift 2.x + 3.0 Compatibility (1,000 lines) ¶ Inspired by Olivier Halligon’s OHHTTPStubs. https://www.raizlabs.com/dev/2016/10/swift-2-x-3-0-compatibility/
104. Swift 2.x + 3.0 Compatibility (1,000 lines) ¶ Inspired by Olivier Halligon’s OHHTTPStubs. ¶ Write as though you’re targeting 3.0. https://www.raizlabs.com/dev/2016/10/swift-2-x-3-0-compatibility/
105. Swift 2.x + 3.0 Compatibility (1,000 lines) ¶ Inspired by Olivier Halligon’s OHHTTPStubs. ¶ Write as though you’re targeting 3.0. ¶ Where possible, first arguments should have argument labels. https://www.raizlabs.com/dev/2016/10/swift-2-x-3-0-compatibility/
106. Swift 2.x + 3.0 Compatibility (1,000 lines) ¶ Inspired by Olivier Halligon’s OHHTTPStubs. ¶ Write as though you’re targeting 3.0. ¶ Where possible, first arguments should have argument labels. ¶ Backfill Swift 3-style method names in Swift 2.x extensions. https://www.raizlabs.com/dev/2016/10/swift-2-x-3-0-compatibility/
107. git.io/bonmot @ZevEisenberg