Hinting Around: Android text demystified

Slide 1

Slide 1 text

Eugenio Marletti Clue HINTING AROUND #hintingaround Sebastiano Poggi Novoda, Android GDE TEXT DEMYSTIFIED

Slide 2

Slide 2 text

text is important communicate language

Slide 3

Slide 3 text

language

Slide 4

Slide 4 text

CAVE PAINTINGS

Slide 5

Slide 5 text

RUNES

Slide 6

Slide 6 text

GUTEN BERG

Slide 7

Slide 7 text

GUTEN PRINT BERG

Slide 8

Slide 8 text

MODERN TYPESETTING

Slide 9

Slide 9 text

millennia of evolution == legacy == it’s a messy mess mess

Slide 10

Slide 10 text

a beautiful mess

Slide 11

Slide 11 text

pretty typefaces a beautiful mess

Slide 12

Slide 12 text

…and some abominations a beautiful mess

Slide 13

Slide 13 text

a sense of scale

Slide 14

Slide 14 text

a sense of scale 2-300 LOCs

Slide 15

Slide 15 text

a sense of scale Typeface.java (400 LOCs)

Slide 16

Slide 16 text

a sense of scale Drawable.java (1400 LOCs)

Slide 17

Slide 17 text

a sense of scale Context.java (3800 LOCs)

Slide 18

Slide 18 text

a sense of scale View.java (22550 LOCs)

Slide 19

Slide 19 text

a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs)

Slide 20

Slide 20 text

a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs) Editor.java (5700 LOCs)

Slide 21

Slide 21 text

a sense of scale TextView.java (10200 LOCs) View.java (22550 LOCs) Editor.java (5700 LOCs)

Slide 22

Slide 22 text

a sense of scale View.java (22550 LOCs) Editor.java (5700 LOCs) TextView.java + Editor.java (15700 LOCs) EditText.java (150 LOCs)

Slide 23

Slide 23 text

text metrics

Slide 24

Slide 24 text

text metrics baseline 0

Slide 25

Slide 25 text

text metrics 0 A caps height

Slide 26

Slide 26 text

text metrics 0 A x-height x

Slide 27

Slide 27 text

text metrics 0 A descent xp

Slide 28

Slide 28 text

text metrics 0 A ascent xph

Slide 29

Slide 29 text

text metrics Ax h Babou p leading

Slide 30

Slide 30 text

what about android?

Slide 31

Slide 31 text

what about android? Paint.FontMetrics ascent descent top bottom

Slide 32

Slide 32 text

wat? android text metrics

Slide 33

Slide 33 text

android text metrics Axyh 0

Slide 34

Slide 34 text

android text metrics Axyh ascent 0 < 0

Slide 35

Slide 35 text

android text metrics Axyh ascent descent 0 > 0

Slide 36

Slide 36 text

android text metrics Àxyh ascent 0 top descent

Slide 37

Slide 37 text

android text metrics Àxy ̨ h ascent 0 top bottom descent

Slide 38

Slide 38 text

android text metrics Àxy ̨ h ascent 0 top bottom descent text size

Slide 39

Slide 39 text

deal with android metrics

Slide 40

Slide 40 text

deal with android metrics DIY! what about caps height? hat about x-height?

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

drawing on screens

Slide 43

Slide 43 text

Slide 44

Slide 44 text

< #vintage #nostalgia

Slide 45

Slide 45 text

(some) OpenType features shamelessly copied from FontShop.com

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

THERE IS NO PIXEL

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

FreeType

Slide 57

Slide 57 text

meet spans

Slide 58

Slide 58 text

Wubba Lubba Dub Dub span meet spans

Slide 59

Slide 59 text

Wubba Lubba Dub Dub meet spans framework spans custom spans

Slide 60

Slide 60 text

meet spans framework spans custom spans android.text android.text.style

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

String

Slide 63

Slide 63 text

interface class string span CharSequence String I StringBuilder M Spanned SpannedString I I Spannable SpannableString I M Editable SpannableStringBuilder M M

Slide 64

Slide 64 text

a life without textviews

Slide 65

Slide 65 text

Layout android.text. a life without textviews

Slide 66

Slide 66 text

BoringLayout a life without textviews StaticLayout DynamicLayout

Slide 67

Slide 67 text

WE NEED TO GO DEEPER

Slide 68

Slide 68 text

how to render

Slide 69

Slide 69 text

Canvas.drawText how to render Canvas.drawTextOnPath Paint.getTextPath + Canvas.drawPath

Slide 70

Slide 70 text

hardware acceleration

Slide 71

Slide 71 text

hw acceleration no Canvas.drawTextOnPath < 16

Slide 72

Slide 72 text

no Canvas.drawText < 18 no Canvas.drawTextOnPath hw acceleration: scaling support no Canvas.drawPath

Slide 73

Slide 73 text

underlineColor underlineThickness @hide TextPaint bgColor baselineShift linkColor drawableState density Text

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Romain Guy Android’s font renderer

Slide 76

Slide 76 text

hardware acceleration

Slide 77

Slide 77 text

hw acceleration no Paint.setAntiAlias (for text) < 18 no Paint.setLinearText no Paint.setSubpixelText

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

Paint.setLetterSpacing Paint.setElegantTextHeight Paint.setFontFeatures

Slide 80

Slide 80 text

how to measure?

Slide 81

Slide 81 text

how to measure? HÀlp Paint.measureText -> float

Slide 82

Slide 82 text

HÀlp how to measure? Paint.getTextBounds() -> Rect

Slide 83

Slide 83 text

HÀlp how to measure?

Slide 84

Slide 84 text

HÀlp how to measure? 0 FontMetrics.ascent FontMetrics.descent FontMetrics.top FontMetrics.bottom

Slide 85

Slide 85 text

ltr, rtl and stuff

Slide 86

Slide 86 text

4.2 ltr, rtl and stuff hi, this is left-to-right راسيلا ىلإ نيميلا وه اذه ،ابحرم اي

Slide 87

Slide 87 text

ltr, rtl and stuff embedded runs text shaping

Slide 88

Slide 88 text

ltr, rtl and stuff text shaping

Slide 89

Slide 89 text

ltr, rtl and stuff 4.2

Slide 90

Slide 90 text

ltr, rtl and stuff hacks them cray cray hacks what about before 4.2?

Slide 91

Slide 91 text

ltr, rtl and stuff i’m Watch Android 1.6 how?

Slide 92

Slide 92 text

how? ltr, rtl and stuff ch droid 1.6 hax (of course)

Slide 93

Slide 93 text

minSdkVersion 17

Slide 94

Slide 94 text

Sebastiano Poggi @seebrock3r Eugenio Marletti @workingkills bit.ly/hinting-around