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. OUTLINE +AndroidDevelopers @AndroidDev Challenges and Opportunities Material Design Roboto 2

    Noto fonts OpenType typography features High quality paragraph layout
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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"
  11. 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