Hinting Around: Android text demystified

Hinting Around: Android 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.

---

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.

4580c218737149bf44d012a110612010?s=128

Sebastiano Poggi

November 11, 2015
Tweet

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?
  41. None
  42. drawing on screens

  43. vs

  44. < #vintage #nostalgia

  45. (some) OpenType features shamelessly copied from FontShop.com

  46. None
  47. None
  48. None
  49. THERE IS NO PIXEL

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  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
  78. None
  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