Les Rencontres de Lure, 23 août 2022, Lurs, France
(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…
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)
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 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
Optima, tellement beau, mais pendant longtemps pas utilisable sur un écran.
Aujourd'hui, avec des écran de 300+ dpi, ça va.
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]
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 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]
Letraset… Je l'ai beaucoup utilisé
J'ai vu récemment dans un tiroir qu'il m'en reste encore
Capture d'écran du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
Ç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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
Comic Sans a tellement mauvaise presse qu'on fait tout pour l'éviter, en choisissant par exemple Tekton, Casual or Chalkboard… ☺︎
Capture d'écran du site chronologie.delure.org :
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
→
Capture d'écran du site chronologie.delure.org :
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
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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 du site chronologie.delure.org :
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
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
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
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! »
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.