Kiwi Party 2013 : CSS pour les livres numériques

Le 28 juin dernier, j’étais à Strasbourg pour assister à ma première Kiwi Party (lien externe). L’occasion pour moi de voir et revoir du beau monde, mais aussi d’en apprendre plus sur les différents sujets tournants autour de la conception web et traités ce jour là.
C’est parti pour un petit tour d’horizon des moments marquants de la journée.

On commence la journée avec Bert Bos (lien externe) venu présenter les différentes techniques CSS existantes ou à venir pour mettre en page des livres.
Il commence par brosser un bref contexte historique, à savoir que pendant longtemps le CSS n’était utilisé que pour les documents interactifs. Pour les documents imprimés, c’est XSL qui prévalait. Mais le développement de ce dernier a été arrêté. Parallèlement, le format EPUB s’est développé et sa mise en forme s’appuie sur CSS.

Bert Bos nous présente ensuite les propriétés CSS pour mettre en page un livre. Pour rappel, certaines d’entre elles sont déjà relativement bien implémentées, mais la majorité restent expérimentales.
Nous avons pu voir :

  • Les colonnes avec la propriété columns permettant de définir l’affichage du contenu sous forme de colonnes qui peuvent être à largeur fixe (plus exactement une largeur minimale fixe) ou en nombre fixe.
  • Les sauts de page avec les propriétés page-break-* permettant de forcer ou empêcher les sauts de page, par exemple avant/après les titres. À noter que la propriété se voit raccourcie par un simple break-* pour permettre son utilisation dans un autre contexte que la page. page-break-* reste cependant valide pour le moment.
  • Les veuves et les orphelines avec, respectivement, les propriétés widows et orphans permettant de définir un nombre minimal de ligne à afficher en cas de début/fin de paragraphe en bas/haut de colonne.
  • Les marges de la page peuvent être gérées à l’aide de la règle @page. Il suffit de définir les marges comme pour n’importe quel élément, par exemple : @page { margin: 2cm 1.5cm; }
  • L’adaptation du contenu pour les pages recto-verso se fait simplement avec les pseudo-classes :right, :left ou encore :first pour la première page du document. Il suffit de les appliquer à la règle @page. Utile pour ajuster les marges en fonction de la reliure par exemple.
  • Les numéros de page peuvent être insérés avec la règle content: counter(page);.
  • On peut insérer en entête des informations issues du contenu, par exemple le titre. Cela se passe en deux temps :
    1. On définit une variable reprenant le contenu du titre : Ainsi le code h2 {string-set: chapter contents;} définit une variable « chapter » reprenant le contenu de la balise h2.
    2. On affiche ce contenu dans l’entête avec le code suivant : @page { @top { content: string(chapter); } }.
  • Les césures se gèrent avec la propriété hyphens et a 3 valeurs possibles : none qui supprime toute césure, auto qui applique les règles par défaut dans la langue du document (le dictionnaire de langue étant géré par le navigateur, donc avec des résultats variés) et enfin manual pour définir soi-même les césures dans le HTML.

Enfin un exemple d’expérimentation pour les notes de bas de page est présenté mais va au delà de CSS.
Il complète cette liste par les fonctionnalités qui restent encore à être étudiées : notes dans les marges, catégories de notes, gestion des float vers le haut et le bas, références, texte sur 2 pages opposées, tables des matières… Autant dire qu’il reste du boulot !

Pour finir on a droit à la présentation d’une méthode de pagination à l’aide d’une nouvelle valeur de la propriété overflow. En utilisant paged-x ou paged-y, on peut ainsi faire une pagination horizontale (x) ou verticale (y) permettant de faire défiler les « pages ». On peut même ajouter des contrôles avec les valeurs paged-x-controls ou paged-y-controls.

Voilà pour cette première conférence de la journée !
Ce fut une introduction très intéressante car elle m’a permis de prendre connaissance de techniques de mise en page que je ne connaissais pas encore et qui sortent du cadre de la simple feuille d’impression.
Cependant des questions se posent sur l’accessibilité de tout ça, comme l’a très justement remonté Armony (lien externe) lors des questions/réponses. Bert Bos a en effet présenté plusieurs techniques permettant de manipuler du contenu (entêtes, notes de bas de page, numérotation des pages…) alors que le contenu n’est pas censé être une affaire de CSS.
Prévoir de pouvoir mettre en forme tous ces éléments à l’aide de propriétés CSS prévues à cet effet c’est bien. Retrouver le pendant de ces propriétés dans le balisage du contenu lui-même, ce sera bien mieux.
Mais relativisons, la plupart de ces propriétés sont encore au stade expérimental. Elles vont donc encore certainement évoluer et des solutions seront certainement trouvées pour répondre aux contraintes de mises en page de documents imprimés, tout en offrant un support de l’accessibilité qu’on est en droit d’attendre pour ces documents.

Vous pouvez retrouver les slides de la conférences en ligne (lien externe).