Hinting around: text demystified

What is text? The answer of those who know, and like 90s music, is most likely "baby don't hurt me, don't hurt me, no more". It is often said that text is the most difficult part of a graphics toolkit, and that is for good reasons. In this talk we’re going to give you the tools you need to understand text, and bend this mysterious creature to your will.

From the typography theory behind the fonts system, to the intricacies of supporting Unicode bidirectional text runs, to the typesetting itself, that would be enough to drive someone crazy. And there's still nothing being drawn on screen, with that alone!

Next you'll need to have a text rendering engine that takes care of loading the fonts, laying out the glyphs, taking care of hinting too, and then actually draw them somewhere (let alone doing all this in a performant way).

Still here? Good, then prepare for a journey that will take you through the history, implementation and pain of dealing with text. Behold the amazing powers you’ll acquire, enabling you to tame all kinds of text you’ll see on Android.

---

Video Devoxx 2015: https://www.youtube.com/watch?v=VS7co3TrgKE

---

Did you like the slides? You can also find the Keynote source file here, to learn all the tricks and hacks we used: https://goo.gl/7X9KWo

Note: this deck uses non-system fonts that you will need to properly see the deck, and requires Keynote 6.6 to be opened.

Transcript

1. Eugenio Marletti Clue HINTING AROUND #hintingaround Sebastiano Poggi Novoda, Android GDE TEXT DEMYSTIFIED
2. text is important communicate language
3. language
4. CAVE PAINTINGS
5. RUNES
6. GUTEN BERG
7. GUTEN PRINT BERG
8. MODERN TYPESETTING
9. millennia of evolution == legacy == it’s a messy mess mess
10. a beautiful mess
11. pretty typefaces a beautiful mess
12. …and some abominations a beautiful mess
13. a sense of scale
14. a sense of scale 2-300 LOCs
15. a sense of scale Typeface.java (400 LOCs)
16. a sense of scale Drawable.java (1400 LOCs)
17. a sense of scale Context.java (3800 LOCs)
18. a sense of scale View.java (22550 LOCs)
19. a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs)
20. a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs) Editor.java (5700 LOCs)
21. a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs) Editor.java (5700 LOCs)
22. a sense of scale View.java (22550 LOCs) Editor.java (5700 LOCs) TextView.java + Editor.java (15700 LOCs) EditText.java (150 LOCs)
23. text metrics
24. text metrics baseline 0
25. text metrics 0 A caps height
26. text metrics 0 A x-height x
27. text metrics 0 A descent xp
28. text metrics 0 A ascent xph
29. text metrics Ax h Babou p leading
30. what about android?
31. what about android? Paint.FontMetrics ascent descent top bottom
32. wat? android text metrics
33. android text metrics Axyh 0
34. android text metrics Axyh ascent 0 < 0
35. android text metrics Axyh ascent descent 0 > 0
36. android text metrics Àxyh ascent 0 top descent
37. android text metrics Àxy ̨ h ascent 0 top bottom descent
38. android text metrics Àxy ̨ h ascent 0 top bottom descent text size
39. deal with android metrics
40. deal with android metrics DIY! what about caps height? hat about x-height?
42. drawing on screens
43. vs
44. < #vintage #nostalgia
45. (some) OpenType features shamelessly copied from FontShop.com
49. THERE IS NO PIXEL
56. FreeType
57. meet spans
58. Wubba Lubba Dub Dub span meet spans
59. Wubba Lubba Dub Dub meet spans framework spans custom spans
60. meet spans framework spans custom spans android.text android.text.style
61. android.text android.text.style ParcelableSpan Annotation AbsoluteSizeSpan AlignmentSpan BackgroundColorSpan BulletSpan ClickableSpan DrawableMarginSpan EasyEditSpan ForegroundColorSpan IconMarginSpan ImageSpan LeadingMarginSpan LineBackgroundSpan LineHeightSpan LocaleSpan MaskFilterSpan MetricAffectingSpan QuoteSpan RasterizerSpan RelativeSizeSpan ReplacementSpan ScaleXSpan SpellCheckSpan StrikethroughSpan StyleSpan SubscriptSpan SuggestionRangeSpan SuggestionSpan TabStopSpan TextAppearanceSpan TtsSpan TypefaceSpan URLSpan UnderlineSpan WrapTogetherSpan
62. String
63. interface class string span CharSequence String I StringBuilder M Spanned SpannedString I I Spannable SpannableString I M Editable SpannableStringBuilder M M
64. a life without textviews
65. Layout android.text. a life without textviews
66. BoringLayout a life without textviews StaticLayout DynamicLayout
67. WE NEED TO GO DEEPER
68. how to render
69. Canvas.drawText how to render Canvas.drawTextOnPath Paint.getTextPath + Canvas.drawPath
70. hardware acceleration
71. hw acceleration no Canvas.drawTextOnPath < 16
72. no Canvas.drawText < 18 no Canvas.drawTextOnPath hw acceleration: scaling support no Canvas.drawPath
73. underlineColor underlineThickness @hide TextPaint bgColor baselineShift linkColor drawableState density Text
74. UNDERLINE_TEXT_FLAG STRIKE_THRU_TEXT_FLAG FAKE_BOLD_TEXT_FLAG LINEAR_TEXT_FLAG SUBPIXEL_TEXT_FLAG HINTING_[ON|OFF] LCD_RENDER_TEXT_FLAG @hide Paint flags
75. Romain Guy Android’s font renderer
76. hardware acceleration
77. hw acceleration no Paint.setAntiAlias (for text) < 18 no Paint.setLinearText no Paint.setSubpixelText
79. Paint.setLetterSpacing Paint.setElegantTextHeight Paint.setFontFeatures
80. how to measure?
81. how to measure? HÀlp Paint.measureText -> float
82. HÀlp how to measure? Paint.getTextBounds() -> Rect
83. HÀlp how to measure?
84. HÀlp how to measure? 0 FontMetrics.ascent FontMetrics.descent FontMetrics.top FontMetrics.bottom
85. ltr, rtl and stuff
86. 4.2 ltr, rtl and stuff hi, this is left-to-right راسيلا ىلإ نيميلا وه اذه ،ابحرم اي
87. ltr, rtl and stuff embedded runs text shaping
88. ltr, rtl and stuff text shaping
89. ltr, rtl and stuff 4.2
90. ltr, rtl and stuff hacks them cray cray hacks what about before 4.2?
91. ltr, rtl and stuff i’m Watch Android 1.6 how?
92. how? ltr, rtl and stuff ch droid 1.6 hax (of course)
93. minSdkVersion 17
94. Sebastiano Poggi @seebrock3r Eugenio Marletti @workingkills bit.ly/hinting-around