Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering TextKit

9bf923e39671cde83584e3e926296c13?s=47 Kishikawa Katsumi
September 02, 2016
17k

Mastering TextKit

try! Swift NYC 2016
- Mastering TextKit

9bf923e39671cde83584e3e926296c13?s=128

Kishikawa Katsumi

September 02, 2016
Tweet

Transcript

  1. Mastering TextKit try! Swift NYC 2016 Katsumi Kishikawa kk@realm.io

  2. Katsumi Kishikawa Realm Inc. kk@realm.io

  3. kk@realm.io

  4. kk@realm.io

  5. kk@realm.io

  6. kk@realm.io

  7. Agenda ˖ )PXUFYUTMBJEPVUJOJ04 ˖ #BTJDUZQPHSBQIZ ˖ #BTJDVTBHFPG5FYU,JU ˖ "EWBODFEFYBNQMFT kk@realm.io

  8. Text Layout after iOS 7 kk@realm.io

  9. What is TextKit? kk@realm.io

  10. TextKit is ˖ .PEFSOUFYUSFOEFSJOHFOHJOF ˖ #VJMUPOUPQPG$PSF5FYU ˖ )JHIMZJOUFHSBUFEXJUI6*,JU kk@realm.io https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

  11. UILabel kk@realm.io

  12. kk@realm.io UILabel

  13. Font Metrics kk@realm.io

  14. kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html

  15. kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html

  16. kk@realm.io Font metrics Baseline X-Height Cap height Ascent Descent

  17. How to know the display size kk@realm.io

  18. 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
  19. 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
  20. kk@realm.io Get Bounding Rect

  21. UITextView kk@realm.io

  22. kk@realm.io UITextView

  23. kk@realm.io UITextView

  24. kk@realm.io UITextView

  25. kk@realm.io Default margins

  26. 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
  27. kk@realm.io Leading

  28. kk@realm.io CJK Font font.leading

  29. kk@realm.io Custom Font (Not built-in) font.leading

  30. Reset Default Margins kk@realm.io

  31. let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit()

    kk@realm.io Remove textContainerInset
  32. let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit()

    kk@realm.io Remove textContainerInset
  33. kk@realm.io Remove textContainerInset

  34. let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit()

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

    kk@realm.io Remove lineFragmentPadding
  36. kk@realm.io Remove lineFragmentPadding

  37. let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit()

    kk@realm.io Ignore font.leading
  38. kk@realm.io Ignore font.leading @interface NSLayoutManager : NSObject <NSCoding> ... //

    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;
  39. let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit()

    kk@realm.io Ignore font.leading
  40. kk@realm.io Ignore font.leading

  41. 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
  42. kk@realm.io Including font.leading

  43. kk@realm.io textView.textContainerInset = UIEdgeInsetsZero textView.textContainer.lineFragmentPadding = 0 textView.layoutManager.usesFontLeading = false

    Reset Default Margins
  44. Displaying Rich Text kk@realm.io

  45. 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
  46. kk@realm.io Change Line Height

  47. kk@realm.io Change Line Height

  48. 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
  49. let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight)

    paragraphStyle.lineSpacing = ceil(font.pointSize / 2) kk@realm.io min/maxLineHeight
  50. kk@realm.io min/maxLineHeight https://github.com/ibireme/YYText MinimumLineHeight MaximumLineHeight

  51. kk@realm.io Line spacing https://github.com/ibireme/YYText

  52. kk@realm.io FirstLineHeadIndent https://github.com/ibireme/YYText

  53. kk@realm.io TextAlignment https://github.com/ibireme/YYText

  54. kk@realm.io Kerning https://github.com/ibireme/YYText

  55. Advanced Example of NSAttributedString kk@realm.io

  56. kk@realm.io

  57. kk@realm.io

  58. kk@realm.io

  59. kk@realm.io

  60. kk@realm.io

  61. kk@realm.io

  62. kk@realm.io Mathematical Formulas

  63. kk@realm.io Mathematical Formulas

  64. kk@realm.io Mathematical Formulas

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

  66. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 18]

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

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

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

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

  71. 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) } }
  72. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 2]

  73. kk@realm.io Mathematical Formulas "\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}"

  74. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 14]

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

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

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

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

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

  80. kk@realm.io Mathematical Formulas

  81. kk@realm.io Mathematical Formulas

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  106. kk@realm.io https://github.com/ kishikawakatsumi/TextKitExamples

  107. 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