Unicode on the Web: Text Rendering in the Chrome Browser Dominik Röttsches [email protected] Behdad Esfahbod [email protected] Source: SIL Source: http://www.h-57.com/the-force-of-typography/ Challenges ● Millions of Users - what if we break stuff? ● ~17.84 Million page loads per minute - how can we keep those going fast? ● Chrome shipping on 5 platforms: Android, Windows, ChromeOS, Linux, Mac - how can we ensure it works everywhere? ● Speed, Simplicity, Security, Stability ● The Web: Mixed scripts and languages, mixed directionality of text, text and Emoji, demand for fast web fonts Source: https://chrome.googleblog.com/2016/04/chrome-50-releases-and-counting.html Scope ● Recap: What is text shaping? ● Evolution of Chrome’s text stack ● Benefits and notable features of Chrome’s current text stack Text Shaping Text Shaping e ̆ ̧ a ̥ ᵉ ĕ ̧ ḁ ᵉ ȩ ̆ ḁ ᵉ ḝ ḁ ᵉ GlyphBuffer Text Shaping gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping Times Source Sans Lobster gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping 32 16 6 gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping TTB LTR RTL BTT gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping ● Small Caps ● Ligatures ● Swashes, Ornamentals ● Number Forms ● … more gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping ● Latin ● Arabic ● Hiragana ● Cyrillic ● Traditional & Simplified Chinese ● “Common” ● … more gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping Language Script English, German, Finnish… Latin Azerbaijani Cyrillic, Latin, Arabic Chinese Traditional, Simplified gb = f ( font, size, direction, features, script, language, text, context ) Text Shaping LoremHello WorldIpsum length = f ( font, size, direction, features, script, language, text, context ) Text Shaping length = f ( font, size, direction, features, script, language, text, context ) Text Shaping پ ت و length = f ( font, size, direction, features, script, language, text, context ) Text Shaping requires Segmentation gb = f ( font, size, direction, features, script, language, text, context ) Evolution of Chrome’s Text Stack Initial Architecture, before November 2013 Simple vs. Complex Text Path Simple Path Complex Path Typewriter-style glyph selection Shaping, Contextual glyph selection Horizontal advances only 2D glyph placement No typographic features Full typographic feature support Fails on scripts that require contextual Comprehensive script and language shaping support Simple vs. Complex Text Path Simple Complex Code Path Confusion Bugs Nov 2013 Using HarfBuzz on Windows Bugs: Shaping Differences, CoreText vs. HarfBuzz Sept 14 Switching to HarfBuzz on Mac M40 Issue: Regression test failures ● Line spacing issues ● Issues with degraded vertical text Dec 2014 Vertical Text through HarfBuzz Layout of a TextRun - No Word Cache Layout of a TextRun - With Word Cache July 2015 Accelerating Complex Path: Word Cache Fallback Mixup for Combining Marks U+0065 LATIN SMALL LETTER E U+0327 COMBINING CEDILLA U+0306 COMBINING BREVE Font Fallback Recap: Segmentation gb = f ( font, size, direction, features, script, language, text, context ) Before: Font Pre-Segmentation and Basic Script Resolution New Step 1: Run Segmentation Stage New Step 2: Shaper Driven Font Segmentation Oct 2015: Shaper Driven Font Segmentation Fallback Mixup for Combining Marks U+0065 LATIN SMALL LETTER E U+0327 COMBINING CEDILLA U+0306 COMBINING BREVE Grapheme Cluster Based Fallback & Font Selection U+0065 LATIN SMALL LETTER E U+0327 COMBINING CEDILLA U+0306 COMBINING BREVE Nov 2015 First attempt at switching to Complex M49 Memory Issues on Android “7.40% (+676.0 KiB) regression in ChromiumPerf/android-nexus5/memory.top_10_mobile/” ● Identified life cycle issues with the active font handles ● Removed redundant caching July 2016 Switching to Complex Text on Android M54 Oct 2016 Removing the Simple Path Recap: Challenges and features that address them ● Bugs through platform differences ● Bugs through code path differences ● Reduce platform specific code by harmonizing on one shaper ● Add vertical text support to this code path ● Improve performance by adding a word cache ● Modular, staged approach to text segmentation ● Improve quality through shaper driven font segmentation ● Enable complex text by default on all platforms ● Remove the simple text code path Reaping the Benefits True OpenType small caps: font-variant-caps Future Plans Continue to improve language support and typography in Chrome text-decoration-skip: ink Variation Fonts Recap ● High performance unified text shaping ● Chrome now treats all supported scripts/languages and OpenType typographic features as first class citizens Thanks! [email protected] [email protected].