Hello!
I’m Chris or @svgeesus

Technical Director at W3C
ex-W3C Technical Architecture Group
W3C Core Web Strategy

Co-authored PNG (1996)

CSS WG: Chair (1997-2002), Staff contact
CSS2 co-editor (@font-face, descriptors)
CSS3, 4, 5 Color co-editor

WebFonts

Fonts WG Chair (1996-1998)
WOFF 1.0, WOFF 2.0
Chromatic Fonts
CSS3, 4, 5 Fonts co-editor

Standards Lifecycle

Propose, forget, remember

Maybe something to think about: when two areas of different color overlap, could the colors be blended?

—W. Perry, 1995

Compositing & Blending

The CSS layout language (1995)

CSS Regions Module (2014)

WebAssembly

cross-platform
secure, sandboxed
statically typed
binary - avoids parsing overhead

Compile to JVM

cross-platform
secure, sandboxed
statically typed
binary - avoids parsing overhead

Early experiments

asm.js (Mozilla)

NaCL & PNaCl (Google)

Extend JS for performance

while breaking it

W3C Working Group created 2017

JVM: poor multilanguage target, opposed by owner

WebAssembly: multilanguage target, consensus-driven, multiple implementations

WebVR & AR

VRML (1994): static 3D worlds, hyperlinks, camera control

Wildly underpowered hardware

(Current phone GPU)

VRML97: interaction, script node, events, animation, sound

Fragmentation: many proprietary extensions, no interoperability

VR input and output capabilities

Detect available Virtual Reality devices
Query the devices capabilities
Query stage info (floor level, safe bounds)
Poll the device’s position and orientation
Display imagery on the device, each frame

W3C Workshop: Web & VR (Oct 2016)

VR on Web needs (from W3C Workshop)

360° media integration in HTML
Positional (immersive) Audio
Non-rectangular (spherical) DOM
VR mode for CSS media queries
Customize user surroundings (Skybox API)

Where are my hands?

Augmented Reality (AR) on the Web

Color

The Prehistoric Web

CRT monitor

Indexed-color displays: 16 color VGA displays. 256 colors common.; “Truecolor” for the lucky few

Gamma mayhem: Mac: 2.6/1.45 = 1.79; SGI: 2.4/1.7 = 1.4; PC, Unix: 2.2 (ish)

W3C Print Workshop

sRGB proposal

Cascading Style Sheets

CSS1 uses sRGB

Color managed screens

Color Management arrives: Mac: ColorSync; Win95/NT: KCMS (aftermarket); Win98/2000: ICM; WinXP: ICM 2.0; Linux/GNOME: GNOME Color Manager; Linux/KDE: colord-kde

Success!

Not so fast

Color Management in Industry

Commercial printing, production of paint, plastics, fabric, 3D print

There is a paying customer
Design is finished before production
Production is centralized
Reliable, calibrated instruments for color QA

Color Management on the Web

Even with color-managed screens:

Content & browsers are free
Design customized to end-user display
Production is distributed
End-user calibration rare

CSS Color 4

What changed?

Wider color gamuts in digital SLR photography
Apple Display P3 devices
Dell, HP, Microsoft wide gamut laptop screens
Samsung, Pixel, OnePlus wide gamut phones
Wide gamut, HDR TV/movies/streaming
Mobile CMS, finally
Safari support for CSS Color 4 display-p3

Predefined Colorspaces

fill: color(display-p3 0.9341 0.8433 0.6361)
fill: color(prophoto-rgb 0.8474 0.8103 0.5824)
fill: color(rec2020 0.9151 0.8359 0.5960)
// these are the same color, L=87.16 C=38.25 H=79.93

CIE Hue, Chroma (LCH)

LCH in CSS Color 4

background: lch(50% 0 0);
border-color: lch(65% 30.7 180 / 50%);

CMYK: ICC Color in CSS Color 4

At-rule (like @font-face) points to ICC profile

@color-profile --fogra39 {
    src: url('https://example.org/C_Fogra39L.icc');
}
.header {
    background-color: color(--fogra39 0% 70% 20% 0%);
}

Mixing & manipulating colors

CSS Color 5: manipulating color

Mixing colors in CSS Color 5

Two colors can be mixed in any colorspace

color-mix(in lch teal 65%, olive);

Most contrasting color in CSS Color 5

Base color, list of alternates

--myAccent: #b22222;
color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e)

WCAG Contrast = (Y_b + 0.05) / (Y_a + 0.05)

Color	Luminance	Contrast
	0.749
	0.482	1.501
	0.137	4.273
	0.107	5.081
	0.305	2.249

WebFonts

W3C Print Workshop, 1996

Several proposals for font delivery on the Web

WebFonts specification (1997)

Dowloadable fonts with @font-face

AtypI 97

John Hudson, Jean-François Porchez, Liam Quin, Chris Lilley

What did we get

CSS Syntax to define a downloadable font:
url to point to the font
descriptors (weight, unicode range, etc)

What didn't we get

Downloadable font format
Consensus on goals

1997-2011

WOFF (2010-12)

Browser, typographic communities working together
Some compression (zlib)
Metadata (license links, etc)
No DRM

WOFF2 (2014-18)

Better compression (two-stage, Brotli)
Metadata (license links, etc)
Still No DRM

WebFonts Take Off

chart showing 0% usage in 2011 to 80% in 2020

OpenType features can be used

CAPITALE FULGURANT

et modeste avec ça

INCROYABLE astrale

1/2 3/4 5/8
13/27 86/483

font-variant-numeric: ;

112,113.56

89,546.87

286,111.10

font-variant-numeric: ;

Variable fonts

Kairos Sans 300
Kairos Sans 800
Kairos Sans

Painter Kaffeel

Are We There Yet?

median webfont size in china is zero

Conclusions

What can we learn from this

Be aware of past efforts
Prototype, test, iterate
Fail early, fail often
Find out what is really missing
Encourage royalty-free patent licensing
Ensure multi-vendor buy-in
Active community (polyfils, bug reporting)
Work in public, encourage participation

W3C Strategy Funnel (on GitHub)

Important

WebFonts

Topics for today

Propose, forget, remember

Compositing & Blending

The CSS layout language (1995)

CSS Regions Module (2014)

WebAssembly

Compile to JVM

W3C Working Group created 2017

Wildly underpowered hardware

(Current phone GPU)

VR input and output capabilities

W3C Workshop: Web & VR (Oct 2016)

VR on Web needs (from W3C Workshop)

Where are my hands?

Augmented Reality (AR) on the Web

The Prehistoric Web

CRT monitor

W3C Print Workshop

sRGB proposal

Cascading Style Sheets

CSS1 uses sRGB

Color managed screens

Success!

Not so fast

Color Management in Industry

Color Management on the Web

CSS Color 4

What changed?

Predefined Colorspaces

CIE Hue, Chroma (LCH)

LCH in CSS Color 4

CMYK: ICC Color in CSS Color 4

Mixing & manipulating colors

CSS Color 5: manipulating color

Mixing colors in CSS Color 5

Most contrasting color in CSS Color 5

W3C Print Workshop, 1996

Several proposals for font delivery on the Web

WebFonts specification (1997)

Dowloadable fonts with @font-face

AtypI 97

John Hudson, Jean-François Porchez, Liam Quin, Chris Lilley

What did we get

What didn't we get

1997-2011

WOFF (2010-12)

WOFF2 (2014-18)

WebFonts Take Off

OpenType features can be used

Variable fonts

Are We There Yet?

What can we learn from this

W3C Strategy Funnel (on GitHub)