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

Android Textual Layout

A3ff029f1f543279612e6b89b71e58e3?s=47 Raph Levien
November 25, 2015

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.

A3ff029f1f543279612e6b89b71e58e3?s=128

Raph Levien

November 25, 2015
Tweet

Transcript

  1. None
  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