Recent Blink Improvements in Text & Layout #webengineshackfest - - PowerPoint PPT Presentation

▶
recent blink improvements in text layout
SMART_READER_LITE
LIVE PREVIEW

Recent Blink Improvements in Text & Layout #webengineshackfest - - PowerPoint PPT Presentation

Apr 07, 2024 529 likes •1.11k views

Recent Blink Improvements in Text & Layout #webengineshackfest Dominik Rttsches <drott@google.com> December 2015 Agenda Goals & Challenges What does the Font code do? Recent Improvements Future Plans

slide-1
SLIDE 1

Recent Blink Improvements in Text & Layout

#webengineshackfest Dominik Röttsches <drott@google.com>

December 2015

slide-2
SLIDE 2

Agenda

  • Goals & Challenges
  • What does the Font code

do?

  • Recent Improvements
  • Future Plans
slide-3
SLIDE 3

Challenges of Text & Layout (Incomplete)

  • Complexity & Dependencies
  • Pixel precision
  • Optimal Font Matching & Fallback
  • Shaping non-Latin languages
  • Vertical text
  • Performance
  • Typographic features
slide-4
SLIDE 4

Goals of Text & Layout

  • Correct and consistent display of all text in all languages
  • High performance for complex text processing
  • Low overhead & cost for advanced typographic features
slide-5
SLIDE 5

What does Font.h do?

  • Measuring Text
  • Drawing Text
  • Selecting Text
slide-6
SLIDE 6

Measuring Text

slide-7
SLIDE 7

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

slide-8
SLIDE 8

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

slide-9
SLIDE 9

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

Times Source Sans Lobster

slide-10
SLIDE 10

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

6

16

32

slide-11
SLIDE 11

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

LTR RTL TTB BTT

slide-12
SLIDE 12

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

  • Small Caps
  • Ligatures
  • Swashes, Ornamentals
  • Number Forms
  • … more
slide-13
SLIDE 13

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

  • Latin
  • Arabic
  • Hiragana
  • Cyrillic
  • Traditional & Simplified Chinese
  • “Common”
  • … more
slide-14
SLIDE 14

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

Language Script English, German, Finnish… Latin Azerbaijani Cyrillic, Latin, Arabic Chinese Traditional, Simplified

slide-15
SLIDE 15

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

LoremHello WorldIpsum

slide-16
SLIDE 16

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

ﻮﺘﭘ

slide-17
SLIDE 17

Measuring Text

length = f ( font, size, direction, features, script, language, text, context )

و ﺖ پ

slide-18
SLIDE 18

Drawing Text

slide-19
SLIDE 19

Drawing Text

slide-20
SLIDE 20

Drawing Text

slide-21
SLIDE 21

Drawing Text

slide-22
SLIDE 22

Drawing Text GlyphBuffer

slide-23
SLIDE 23

Selecting Text

slide-24
SLIDE 24

Selecting Text

Character Position ⇄ Screen Coordinates

slide-25
SLIDE 25

Selecting Text

Character Position ⇄ Screen Coordinates

slide-26
SLIDE 26

Font.h does:

  • Measuring Text
  • Drawing Text
  • Selecting Text
slide-27
SLIDE 27

Shaping

slide-28
SLIDE 28

Shaping

f ( font, size, direction, features, script, language, text, context )

و ﺖ پ ﻮﺘﭘ

slide-29
SLIDE 29

Simple vs Complex

slide-30
SLIDE 30

Simple vs. Complex Text Path Simple Complex

slide-31
SLIDE 31

Simple Path

slide-32
SLIDE 32

Simple Path

slide-33
SLIDE 33

Complex Path = Full Shaping

length = f ( font, size, direction, features, script, language, text, context )

و ﺖ پ ﻮﺘﭘ

slide-34
SLIDE 34

Simple vs. Complex Text Path

Simple Path Complex Path Typewriter-style glyph selection Shaping, Contextual glyph selection Horizontal advances only 2D glyph placement No control over typographic features Full typographic feature support Fails on scripts that require contextual shaping Comprehensive script and language support

slide-35
SLIDE 35
  • Switching to Complex Text
  • Word Cache
  • Shaper-driven Segmentation
  • Improving Font Fallback
  • Specification Work & Improvements

in CSS3 Writing-modes & Fonts

Recently in Text & Layout

slide-36
SLIDE 36

Switching to Complex

slide-37
SLIDE 37

Switching to Complex

  • No more rendering difference bugs: simple vs. complex
  • Unified code
  • Advanced typography always available
  • Complex script languages become first class citizen

But:

  • Full shaping is more costly
  • Avoid performance regressions
  • Word cache!
slide-38
SLIDE 38

Layout of a TextRun - No Word Cache

slide-39
SLIDE 39

Layout of a TextRun - With Word Cache Word Cache aids in Font.h operations: Width, Drawing, Selection

slide-40
SLIDE 40

Shaper Driven Segmentation

  • Splitting a text run into

individual pieces suitable for shaping

  • Constant values for the variables
  • f measuring text
slide-41
SLIDE 41

Font Coverage

slide-42
SLIDE 42

Font Fallback

slide-43
SLIDE 43

Before: Segmentation through GlyphPageTree results

slide-44
SLIDE 44

New: Clean Run Segmentation Stage

slide-45
SLIDE 45

New: Shaper Driven Segmentation for Font Fallback

slide-46
SLIDE 46

Before: Combining Marks

crbug.com/454405, reported by javsmo

slide-47
SLIDE 47

Before: Fallback Mixup for Combining Marks

U+0065 LATIN SMALL LETTER E U+0327 COMBINING CEDILLA U+0306 COMBINING BREVE

slide-48
SLIDE 48

Grapheme Cluster Based Fallback & Font Selection

slide-49
SLIDE 49

Grapheme Cluster Based Fallback & Font Selection

U+0065 LATIN SMALL LETTER E U+0327 COMBINING CEDILLA U+0306 COMBINING BREVE

slide-50
SLIDE 50

Shaping context across font fallback

unicode-range: U+069A,U+062A,U+646;

slide-51
SLIDE 51

Specification Work & Improvements

slide-52
SLIDE 52

CSS Font Matching Improvements

  • CSS3 Fonts Module Section 5.2 § 4
  • Priority order of matching

○ Choose closest stretch value, then ○ Choose closest style value, then ○ Choose closest weight, then ○ Match size

  • Two main issues:

○ Stretch matching was not implemented, #513670 ○ Priority order violated, #513669

slide-53
SLIDE 53

CSS Writing Mode Improvements

  • Discussions in CSS WG on writing-mode attribute values concluded
  • Pushed “CSS Writing Modes Level 3” to Candidate Recommendation status
  • Intend to unprefix -webkit-writing-mode: to writing-mode: LGMT’ed
  • Unprefixing implemented
  • Contributing tests
  • Test pass rate up: 85.78% (IE 71.33%, FF 86,24%)
  • Spec editorship, contributions to W3C CSS Text, Text Decorations, Writing

Modes, Ruby, Unicode UTR#50 Vertical Text Layout

slide-54
SLIDE 54
  • Switching to Complex Text
  • Word Cache
  • Shaper-driven Segmentation
  • Improving Fallback
  • Spec Compliance Improvements

Recently in Text & Layout

slide-55
SLIDE 55
  • Fully remove Simple Path,

GlyphPageTree and friends

  • Improve Fallback (System APIs)
  • Improve testability
  • Improve WordCache caching

Future Plans

slide-56
SLIDE 56

Thanks!