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

Android Textual Layout

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.

Raph Levien

November 25, 2015
Tweet

Other Decks in Programming

Transcript

  1. +AndroidDevelopers
    ANDROID
    TEXTUAL LAYOUT
    Raph Levien +RaphLevien @raphlinus
    Android UI Toolkit
    @AndroidDev

    View full-size slide

  2. SECTION TITLE
    OUTLINE

    View full-size slide

  3. OUTLINE
    +AndroidDevelopers
    @AndroidDev
    Challenges and Opportunities
    Material Design
    Roboto 2
    Noto fonts
    OpenType typography features
    High quality paragraph layout

    View full-size slide

  4. SECTION TITLE
    CHALLENGES AND OPPORTUNITIES

    View full-size slide

  5. 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

    View full-size slide

  6. SECTION TITLE
    DISPLAY TECHNOLOGY

    View full-size slide

  7. DISPLAY TECHNOLOGY
    +AndroidDevelopers
    @AndroidDev
    Photo credit: Peter Dassow
    Sharp PC-1211 pocket computer, ca 1980

    View full-size slide

  8. DISPLAY TECHNOLOGY
    +AndroidDevelopers
    @AndroidDev
    Laptop
    ~100ppi
    HTC One m7
    468ppi
    4k monitor
    200ppi
    inkjet
    printer
    360ppi

    View full-size slide

  9. DISPLAY TECHNOLOGY
    +AndroidDevelopers
    @AndroidDev
    Nexus 6P
    1440 x 2560 pixels
    515 ppi

    View full-size slide

  10. SECTION TITLE
    MATERIAL DESIGN

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. ROBOTO 2: DESIGN UPDATE
    +AndroidDevelopers
    @AndroidDev

    View full-size slide

  14. ANDROID’S GLOBAL
    REACH

    View full-size slide

  15. THE NEXT BILLION USERS

    View full-size slide

  16. ROBOTO 2: UNICODE COVERAGE

    View full-size slide

  17. SECTION TITLE
    NOTO FONTS

    View full-size slide

  18. 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

    View full-size slide

  19. NOTO SCRIPT SUPPORT IN MARSHMALLOW
    +AndroidDevelopers
    @AndroidDev
    Tibetan
    Vai
    Mongolian

    View full-size slide

  20. 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

    View full-size slide

  21. 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

    View full-size slide

  22. SECTION TITLE
    TYPOGRAPHY FEATURES

    View full-size slide

  23. 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

    View full-size slide

  24. KERNING AND LIGATURES
    +AndroidDevelopers
    @AndroidDev
    default
    android:fontFeatureSettings="'kern' off, 'liga' off"

    View full-size slide

  25. OPENTYPE FEATURE: NUMBER FORMS (L+)
    +AndroidDevelopers
    @AndroidDev
    default
    android:fontFeatureSettings="'pnum'"
    android:fontFeatureSettings="'onum'"

    View full-size slide

  26. LETTERSPACING (L+)
    +AndroidDevelopers
    @AndroidDev
    android:letterSpacing="-0.08"
    android:letterSpacing="-0.04"
    android:letterSpacing="0"
    android:letterSpacing="0.04"
    android:letterSpacing="0.08"

    View full-size slide

  27. 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

    View full-size slide

  28. HIGH QUALITY PARAGRAPH LAYOUT (M+)
    android:breakStrategy="simple"
    android:breakStrategy="high_quality"
    android:hyphenationFrequency="full"

    View full-size slide

  29. 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"

    View full-size slide

  30. 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

    View full-size slide

  31. THANK YOU
    Questions?
    +AndroidDevelopers
    @AndroidDev

    View full-size slide