Ces transparents utilisent le script b6+ et le style W3C générique avec humaaans.

Pour commencer la présentation, activez JavaScript et appuyez sur « A » ou cliquez deux fois dur un transparent. Pour revenir à la table des transparents, appuyez sur « A » ou « Esc ». Pendant la présentation, appuyez sur « ? » pour la liste des commandes disponibles.

Arrêt de la présentation.

Une histoire de CSS
et des « paged media »

Bert Bos

Les Rencontres de Lure, 23 août 2022, Lurs, France

CSS, c'est quoi ?

[Commit Strip]

(Case 1) Stagiaire : En fait, j'voudrais centrer verticalement un paragraphe dans une div…

Codeur 1 : Ah ouais ? Mais y a rien de plus simple !

(Case 2) Codeur 1 : C'est natif en CSS ! Indice : ça commence par v… »

Stagiaire : vertical-align ! Génial, j'connaissais pas ! »

(Case 3) Codeur 1 : Tu vois, ils ont tout prévu ! Ça va régler tous tes problèmes d'ailignement ! T'as plus qu'à coder ! »

Stagiaire : Super, merci beaucoup ! »

(Case 4) Codeur 2 : T'es pas sympa, il va perdre la foi…

Codeur 1 : Le plus tôt c'est le mieux…

About me

[Map of the Provence]

Mathématiques, informatique, ergonomie à l'Université de Groningue

Co-inventeur de CSS (1994) avec Håkon Wium Lie

Travail au W3C • groupes de travail (MathML, Spatial Data, Internationalization) • équipe marcomm (mini-sites web, transparents, logos…) • recherche (protection des données, sécurité, RGPD)

TimeLure

[Photo: Le village de Lurs]

Je suis allé sur chronologie.delure.org pour voir qu'est-ce que le site dit de CSS

Magnifique résumé de la mode graphique depuis 70 ans !

Je vous montre quelques captures d'écran…

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

1953
Premier manifeste
[Photo de quatre hommes assis devant un buisson]
Contexte technique
Photocomposeuse lumitype
[Photo de la photocomposeuse]
Contexte (typo)graphique
Optima

[Capture d'écran : 1953 / Premier manifeste / Contexte technique / Photocomposeuse lumitype / Contexte (typo)graphique / Optima]

Optima, tellement beau, mais pendant longtemps pas utilisable sur un écran.

Aujourd'hui, avec des écran de 300+ dpi, ça va.

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

1954
Pour une graphie latine
De la retraite graphique à l’école de Lure : la ligne se dessine
[Dessin d'une main derrière les lettres L U R E]
Contexte (typo)graphique
Classification Vox
[Image avec des détails de lettres]

[Capture d'écran : 1954 / Pour une graphie latine / De la retraite graphique à l’école de Lure : la ligne se dessine / Contexte (typo)graphique / Classification Vox]

Ce n'était pas du tout la classification Vox, mais…

En CSS niveau 1 (1996), on pouvait spécifier toutes les polices, mais la chance que le lecteur les avaient était mince. Il fallait des polices de repli. On a décidé que chaque navigateur devrait en proposé cinq, un dans chaque catégorie : serif, sans-serif, monospace, cursive, et fantasy.

Dans CSS niveau 2, en 1998, on a introduit les « web fonts » et aussi PANOSE. Mais PANOSE était encore plus biaisé vers l'écriture latine que serif/sans-serif/cursive, et ça n'a jamais marché.

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

1959
Le Mouvement d’Action Graphique
[Photo de derrière l'épaule d'un homme qui parle à un group de gens assis devant lui]
Letraset
Les caractères transfert, ou décalcomanies, s’achètent en planche et se reportent sur le papier à l’aide d’un stylet ou stylo. Ce moyen simple et relativement peu onéreux de manipuler la typographie, combiné à la xérographie, va permettre l’explosion du monde des fanzines et populariser la réalisation de maquettes.
[Photo de quelques feuilles de Letraset]

[Capture d'écran]

Letraset… Je l'ai beaucoup utilisé

J'ai vu récemment dans un tiroir qu'il m'en reste encore

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Ce « '62, » n'est-ce pas l'image même des années 1960 ?

Et Eurostile : Je l'ai utilisé beaucoup, notamment en Letraset

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

J'ai rencontré Douglas Engelbart, pendant une conférence à l'Université de Stanford, où il parlait de son Bootstrap Institute.

J'ai aussi rencontré Ted Nelson, l'autre père du hypertexte.

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Ça me rappelle l'annuaire au Pays Bas, ou Gerard Unger en avait fait la typographie

Il avait choisi d'omettre tous les majuscules

(Gerard Unger apparaît sur http://chronologie.delure.org/ pour 1997)

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Les livres de mathématiques étaient très chers – heureusement qu'on faisait deux ans avec un seul livre, pas comme les étudiants en droit

J'avais des professeurs qui écrivaient à la main et faisait des photocopies

TEX82 a changé tout ça

Pour ma thèse, j'ai fait ma propre mise en page et mes propres macros

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Ma thèse avait même une police créée par moi-même dans Metafont (version de 1984), Gladiator.

Une des idées de Håkon pour implémenter le « cascading » était de calculer une moyenne entre deux valeurs. Si l'auteur voulait serif, le lecteur sans-serif, le résultat pourrait être entre les deux

J'avais déjà fait des expérimentations dans ce sens avec Metafont et je pouvais lui dire que ce n'était pas une bonne idée

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

QuarkXPress était membre du groupe de travail CSS et nous a donné quelques démos

On voulait pouvoir faire pareil dans CSS, mais c'était beaucoup trop avancé pour les navigateurs

Example : depuis 2018, le texte peut suivre le contour d'une image, mais seulement d'un côté

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Tim Berners-Lee a publié le web en 1991 et je'ai vu le line mode browser pour la 1ere fois en 1992

Je le trouvais moins joli que Gopher et j'ai proposé d'installer un serveur Gopher pour la Faculté des Arts de l'Université de Groningue, ou je travaillais

Mais quelques mois plus tard je me suis ravisé et j'ai installé un serveur web

C'était le premier de l'université et un des premiers au Pays Bas

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Comic Sans a tellement mauvaise presse qu'on fait tout pour l'éviter, en choisissant par exemple Tekton, Casual or Chalkboard… ☺︎

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

1996 – CSS !

À propos de Zuzana Licko et Emigre : le logo W3C est en « Base 12 » (et « Base 9 » pour le logo étendu)

Mais à partir de l'année prochaine se sera un logo légèrement redessiné par moi

[Current W3C logo][Future W3C logo]

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

En 1997–1998 on discutait avec Adobe (qui le faisait déjà pour PDF) et Microsoft (qui avait le format EOT) comment ajouter des web fonts

Microsoft a immédiatement implémenté @font-face, les autres navigateurs (dont Netscape) pas

Netscape/Bitstream avaient PFR – légalité douteuse

Il n'y avait pas beaucoup de polices libres

EOT était crypté et protégeait les droits d'auteurs, mais était propriétaire

… →

En 2008, Håkon voyait qu'il avait maintenant des fontes libres et il recommençait de promouvoir les web fonts

Je suis allé parler à l'ATypI et on a organisé des téléconférences

La plupart des typographes était d'accord, si les navigateurs n'offraient pas la possibilité de sauvegarder une police

On a aussi ajouté le Same Origin

J'ai demandé à Microsoft d'ouvrir leur format EOT, ce qu'ils ont fait

Mais le cryptage n'était plus nécessaire et la compression d'EOT n'était pas gzip, le seul algorithme disponible dans les navigateurs

[Capture d'écran]

L'orange et le pourpre

En 1996, CSS avait 16 couleurs avec un nom (et des millions de couleurs representées par des chiffres)

On a discuté s'il fallait ajouter l'orange, mais qui avait encore besoin de la couleur des années 70 ?

(Pareil pour les coins arrondis)

Plus tard, en 2014, on a ajouté rebeccapurple en hommage à la fille d'Eric Meyer, Rebecca, décédée cette année – sa couleur préferée

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Les livres numériques montraient qu'on avait raison d'inclure plusieurs types de support dans CSS

Mais ils posaient aussi de problèmes imprévus

Les numéros de page peuvent changer, alors le marque-page marque quoi ?

Les liseuses, à l'inverse des navigateurs, proposent plusieurs styles personnalisés, mais le « cascading » de CSS est trop primitif et trop imprévisible

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

L'Open Font License illustre bien le changement depuis 1998, quand CSS avait défini les web fonts (@font-face)

Les fontes libres existent maintenant, et en grand nombre

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Depuis 2008, les web fonts marchaient, avec du OpenType

Mais comme une forme de compression était quand même nécessaire, on a créé un groupe de travail pour développer WOFF

Plus tard, ce même groupe a développé WOFF2, qui n'utilise pas gzip, mais compresse tellement mieux que les navigateurs l'on implémente quand même

[Capture d'écran]

Capture d'écran du site chronologie.delure.org :

[Capture d'écran]

Les Variable Fonts sont encore expérimental dans CSS

Et également expérimental : Color Fonts

Le groupe de travail CSS étudie depuis quelques années comment utiliser les polices en couleur, par la manipulation du tableau de couleurs (CPAL) dans OpenType

FrameMaker et HoTaMaLe

[Dessin: trois personnages autour de deux paniers de tamales et deux casseroles de ragoût de viande]
HoTaMaLe, hot tamale

Håkon et moi ont d'abord écrit en FrameMaker, parce que nous voulions un nègre et Addison-Wesley n'en avait pas qui pouvait écrire en HTML

FrameMaker au moins avait HoTaMale, un module pour exporter vers HTML et CSS

Finalement, on a réécrit tout, parce qu'on faisait moins de fautes et notre texte était plus clair

Prince

[Photo de deux pages dans le livre de Håkon et moi]
Mike Day, l'auteur de Prince, a pu implémenter beaucoup de nos souhaits. Le reste on a fait en Perl.

Pour la 2eme version on a fait tout en HTML et CSS. Entre-temps on avait trouvé Prince.

Pour Addison-Wesley c'était le 1ère livre produit en HTML. Et c'était 2 ou 3 mois plus court que leur processus habituel.

J'utilise Prince toujours. Håkon a fait mieux : il en est le Conseil d'Administration. Il s'occupe entre autres d'extensions pour le placement d'illustrations (les « float » de CSS) et de notes dans les marges

Évolution ou révolution(s) ?

[Commit Strip]

Case 1 : Mars 2019 « Hourra ! CSS va supporter les fonctions trogonométriques ! Plus besoin de calcul en JS ! »

Case 2 : 2020 « Yeaaah, on peut enfin faire des boucles et des conditions en CSS !»

Case 3 : 2025 « Wouhou ! CSS 8 tourne enfin en backend et peut stocker de la adata, plus besoin de Node ni de BDD !»

Case 1 : 2035 « Victoire ! CSS 19 auto-génère toutes les règles via IA et fait tourner des containers avec son propre serveur web dans son OS dédié ! EVERYTHING IS CSS! »