Android Textual Layout

Video here: https://youtu.be/GZ0eKqvzJa8

Recent versions of Android have significant advances in typographic sophistication, including automatic hyphenation, balanced and optimized paragraph layout, OpenType features, support for dozens of scripts around the world, and more. We’ll cover these capabilities and how apps can make best use of them.

Transcript

2. +AndroidDevelopers ANDROID TEXTUAL LAYOUT Raph Levien +RaphLevien @raphlinus Android UI Toolkit @AndroidDev
3. SECTION TITLE OUTLINE
4. OUTLINE +AndroidDevelopers @AndroidDev Challenges and Opportunities Material Design Roboto 2 Noto fonts OpenType typography features High quality paragraph layout
5. SECTION TITLE CHALLENGES AND OPPORTUNITIES
6. CHALLENGES AND OPPORTUNITIES +AndroidDevelopers @AndroidDev Challenge Opportunity Battery and RAM constraints 60 fps Small screen Support ~all the scripts of the world Small text regions Powerful compute resources Animations and transitions Very high resolution (500+ dpi) Roboto and Noto fonts Line breaking improvements
7. SECTION TITLE DISPLAY TECHNOLOGY
8. DISPLAY TECHNOLOGY +AndroidDevelopers @AndroidDev Photo credit: Peter Dassow Sharp PC-1211 pocket computer, ca 1980
9. DISPLAY TECHNOLOGY +AndroidDevelopers @AndroidDev Laptop ~100ppi HTC One m7 468ppi 4k monitor 200ppi inkjet printer 360ppi
10. DISPLAY TECHNOLOGY +AndroidDevelopers @AndroidDev Nexus 6P 1440 x 2560 pixels 515 ppi
11. SECTION TITLE MATERIAL DESIGN
12. MATERIAL DESIGN (L+) +AndroidDevelopers @AndroidDev • An entire design language • Widely adopted ◦ Web and Android apps • Typography is integral ◦ Multiple weights and sizes ◦ Layout, alignment, space https://www.google. com/design/spec/style/typograph y.html
13. ROBOTO 2 (L+) +AndroidDevelopers @AndroidDev • Updated design • Expanded Unicode coverage ◦ 1051 → 3296 glyphs ◦ Unicode 8 for Latin, Greek Cyrillic • 18 weights/styles shipping on device ◦ Thin, Light, Regular, Medium, Bold, Black ◦ True italics ◦ Condensed • Fully open source (including build chain) ◦ https://github.com/google/roboto
14. ROBOTO 2: DESIGN UPDATE +AndroidDevelopers @AndroidDev
15. ANDROID’S GLOBAL REACH
16. THE NEXT BILLION USERS
17. ROBOTO 2: UNICODE COVERAGE
18. SECTION TITLE NOTO FONTS
19. NOTO SCRIPT SUPPORT IN MARSHMALLOW Arabic, Armenian, Balinese, Bamum, Batak, Bengali, Buginese, Buhid, Canadian Aboriginal, Cham, Cherokee, Coptic, Devanagari, Ethiopic, Georgian, Glagolitic, Gujarati, Gurmukhi, Hanunoo, Hebrew, Javanese, Kannada, Kayah Li, Khmer, Lao, Lepcha, Limbu, Lisu, Malayalam, Mandaic, Meetei Mayek, Mongolian, Myanmar, N'Ko, New Tai Lue, Ol Chiki, Oriya, Rejang, Saurashtra, Sinhala, Sundanese, Syloti Nagri, Syriac Estrangela, Tagbanwa, Tai Le, Tai Tham, Tai Viet, Tamil, Telugu, Thaana, Thai, Tibetan, Tifinagh, Vai, Yi +AndroidDevelopers @AndroidDev
20. NOTO SCRIPT SUPPORT IN MARSHMALLOW +AndroidDevelopers @AndroidDev Tibetan Vai Mongolian
21. NOTO CJK (L+) +AndroidDevelopers @AndroidDev • Joint project with Adobe ◦ Also released as Source Han Sans ◦ https://github.com/adobe-fonts/source-han-sans • Rendered on Android with high-quality (Adobe) CFF renderer ◦ http://www.freetype.org/ • Support for Simplified and Traditional Chinese, Japanese, Korean ◦ Comprehensive coverage • Unified design but correct handling of variants
22. NOTO COLOR EMOJI +AndroidDevelopers @AndroidDev • Bitmap color font technology ◦ Standardized in OpenType 1.7 • No special app support needed, it’s “just text” • Flags and keycaps ◦ Implemented with GSUB ligatures • Use Paint.hasGlyph() to detect whether emoji exists
23. SECTION TITLE TYPOGRAPHY FEATURES
24. OPENTYPE SUPPORT (L+) +AndroidDevelopers @AndroidDev • Kerning and ligatures ◦ on by default, but can disable • font-feature-settings ◦ CSS-compatible syntax ◦ old-style, tabular, lining figures ◦ fraction forms ◦ discretionary ligatures • ‘locl’ feature: localized forms ◦ automatically selected based on locale
25. KERNING AND LIGATURES +AndroidDevelopers @AndroidDev default android:fontFeatureSettings="'kern' off, 'liga' off"
26. OPENTYPE FEATURE: NUMBER FORMS (L+) +AndroidDevelopers @AndroidDev default android:fontFeatureSettings="'pnum'" android:fontFeatureSettings="'onum'"
27. LETTERSPACING (L+) +AndroidDevelopers @AndroidDev android:letterSpacing="-0.08" android:letterSpacing="-0.04" android:letterSpacing="0" android:letterSpacing="0.04" android:letterSpacing="0.08"
28. HIGH QUALITY PARAGRAPH LAYOUT (M+) +AndroidDevelopers @AndroidDev • Shipping in Marshmallow • Automatic hyphenation ◦ Algorithms and patterns based on TeX • Whole-paragraph optimization ◦ Also based on TeX ◦ Parameters tuned: ▪ Don’t hyphenate next-to-last line ▪ Do hyphenate to prevent one word on last line • High quality mode on by default ◦ But can disable under program control (breakStrategy="normal") ◦ Performance comparable to Lollipop
29. HIGH QUALITY PARAGRAPH LAYOUT (M+) android:breakStrategy="simple" android:breakStrategy="high_quality" android:hyphenationFrequency="full"
30. BREAKSTRATEGY: BALANCED (M+) +AndroidDevelopers @AndroidDev normal balanced It’s not great when a word is by itself on the last line. It’s not great when a word is by itself on the last line. Based on Adobe’s text-wrap: balanced proposal android:breakStrategy="balanced"
31. THE IMPORTANCE OF LOCALE +AndroidDevelopers @AndroidDev Font selection (especially 簡化字 / 正體字) locl OpenType feature lookup ICU line breaking (dictionary-based) Automatic hyphenation (rule-based and exception dict) App TextView Settings (system-wide) setTextLocale() TextView with styled spans LocaleSpan Tip: use Compact Language Detector 2 library
32. THANK YOU Questions? +AndroidDevelopers @AndroidDev