Bert Bos | New typography for Web applications

New typography for Web applications

Latest developments for CSS level 3 in W3C

Cascading Style Sheets

Bert Bos (W3C) <bert@w3.org>
Presented at:
University of Groningen
Groningen, Netherlands
April 14, 2011

Where I work

W3C (World Wide Web Consortium) is a Standards Organization organized as a Consortium

Its standards are called W3C Recommendations

They are made by Working Groups

W3C structure

W3C team

W3C offices

W3C offices

W3C members


W3C is a forum for users and implementers, as well as a source of information

Standardization process

[image: the path           from member-only draft to public Recommendation represented           as a snakes-and-ladders game]

Working Groups, etc.


IETF, ISO, Open Mobile Alliance, ICTSB (European board of ICT standards organizations), ETSI, etc.

Copyrights & patents




The Web is a continuous communication between people           that is enhanced by technology: An author has ideas, reflects           on them and eventually represent them on the Web. Processes           on the Web store and transports them, maybe filter them,           combine them with other ideas and extract parts of them. A           reader displays them, possibly in several different ways, and           interprets what he reads. Eventually, the reader reacts with           ideas of his own and becomes author himself.

Vision and principles

Testing vs flexibility

Many implementations
⇒ difficult to change

No implementations
⇒ not sure the specification works

Two implementations

Usability challenges

Often two solution (“80-20”), e.g,:

But still difficult questions…

CSS level 3

CSS's features are grouped into about 40 modules. The           simplest features from each module together form level 1.           Level 2 is a superset of level 2, and level 3 is again a           superset of that.

Three levels and about 40 modules

Stable & proven

Stable & being implemented

Backgrounds level 3

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

Borders level 3

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

Media Queries

From the demo:

/* Narrow screen */
@media all and (max-width: 30em)
/* Wide screen */
@media all and (min-width: 60em)

Well advanced

Not stable

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)

Grid Layout module

Draft of 7 April 2011

Grid – history (1/2)

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 }

Grid – history (2/2)

Now: renewed interest. New name: “grid layout” [demo]

body {display: "a b"
               "c d"}
div {position: b}

(Syntax may change)

Regions: connected flows

div {
    "@@..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)

Regions: shapes

Shape text inside a path:

div {
   polygon(...) }

Image: a circular 	paragraph floating in the middle of another paragraph

Shape a floating image:

img {
  float: left;
  wrap-shape-image: attr(src);

The transparent parts implicitly define a shape.

Grid future


In development:

Merge from 4 to 1? 2?

The end


Bert Bos <bert@w3.org>
GPG fingerprint:
7744 0204 52A5 14D9 147D
2A13 2D7A E420 184B 5BA4