Bert Bos | New typography for Web applications
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
To view: switch to full screen
(With Javascript: press A)
Bert Bos (W3C) <bert@w3.org>
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
HTML, CSS, SVG, RDF, PNG, MathML, XML, WCAG, EXI…
W3C (World Wide Web Consortium) is a Standards Organization organized as a Consortium
Founded 1994
Its standards are called W3C Recommendations
They are made by Working Groups
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Director: Tim Berners-Lee
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
W3C is a forum for users and implementers, as well as a source of information
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Communications:
mailing lists, teleconferences, face-to-face
Technical Plenary
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
IETF, ISO, Open Mobile Alliance, ICTSB (European board of ICT standards organizations), ETSI, etc.
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Copyright:
Patents:
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Many implementations
⇒ difficult to change
No implementations
⇒ not sure the specification works
Two implementations
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Often two solution (“80-20”), e.g,:
<audio>
/<audio>
vs SMIL
But still difficult questions…
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Three levels and about 40 modules
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
From the demo:
p { background-image: url(CSS-logo1s), url(sea); background-size: 2em auto, 100% 100%; background-position: bottom right, 0 0; background-repeat: no-repeat, no-repeat }
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
From the demo:
span { border: double orange 1em; border-image: url(border.png) 27 round stretch; }
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
From the demo:
div { column-width: 20em; column-rule: thin solid }
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
From the demo:
/* Narrow screen */ @media all and (max-width: 30em) { ... } /* Wide screen */ @media all and (min-width: 60em) { ... }
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Priority for first half of 2011: Writing Modes
(support vertical scripts, esp. for e-books)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Tables, Grid Layout, Positioning, Generated & Replaced Content, Image Values, 3D Transformations, Lists, Animations…
(Apart from the properties that were already in level 2, of course)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
1996: idea to flow text into a 2D template: “frame-based layout” (nothing to do with Netscape's FRAME element)
1998: too advanced for browsers; compromise is “absolute positioning”
div { position: absolute; top: 100px; left: 25px }
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Now: renewed interest. New name: “grid layout” [demo]
body {display: "a b" "c d"} div {position: b}
(Syntax may change)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
div { display: "@@..ff...." / 3.6em ".aa..gg..." / 3.6em "..bb..hh.." / 3.6em "...cc..ii." / 3.6em "....dd..jj" / 3.6em ".........." / 0.6em "eeee..kkkk" / auto; chains: @ a b c d e, f g h i j k }
( Regions, very early work)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Shape text inside a path:
div { wrap-shape: polygon(...) }
Shape a floating image:
img { float: left; wrap-shape-image: attr(src); }
The transparent parts implicitly define a shape.