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

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]