Kiwi Party 2013 : CSS pour les livres numériques

Publié le dans Articles. Mots-clés : , .

Le 28 juin dernier, j’étais à Strasbourg pour assister à ma première Kiwi Party. 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 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 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.

6 commentaires sur « Kiwi Party 2013 : CSS pour les livres numériques »

  1. Gaël a répondu le

    Merci pour ce CR, c’est beaucoup plus clair que les slides de M. Bos que j’ai déjà lues – sans le support oral il est difficile de suivre.

    Beaucoup de techniques intéressantes mais le nœud du problème subsiste : qu’est-ce qui est utilisable actuellement, dans tout ça ? Les numéros de page et les entêtes notamment me sont totalement inconnus et j’ai du mal à voir comment les appliquer, et si ce sera réellement utile – les navigateurs fournissant déjà un excellent travail dans ce domaine.

    Concernant la remarque d’Armony sur l’accessibilité, la génération de contenu important est proscrite sur un site web, mais est-ce applicable dans le cas d’une impression ? Si les technologies qui impriment en braille (au hasard) se basent sur ce qui est fourni par les navigateurs, ce point ne sera(it) pas gênant – puisque la majorité des utilisateurs de lecteurs d’écran interprètent les CSS via leur navigateur support (lu dans l’excellent livre d’Armony, d’ailleurs).

    Encore un degré de profondeur dans les nuances des règles d’accessibilité à creuser…

    Répondre
    1. Luc (Rédacteur) a répondu le

      En l’état on ne peut pas utiliser beaucoup de chose (mais pour tester, c’est Opéra qui est le plus avancé en termes d’implémentation).

      Pour l’accessibilité, les livres numériques n’ont effectivement pas pour vocation première d’être lus dans un navigateur et l’important est que les outils dédiés soient OK. Mais le concept de gérer des contenus en CSS reste tout de même dérangeant quand on prône sur le web de distinguer fond et forme.

  2. Charly a répondu le

    Très bon article et sympa de voir que des amis Suisses étaient également présent à cette Kiwiparty 😉

    Répondre
    1. Luc (Rédacteur) a répondu le

      Merci. Strasbourg reste pas très loin, ajouté à cela la gratuité de l’évènement, autant en profiter ! 🙂

  3. tetue a répondu le

    Merci pour ce compte-rendu clair ! Et pareillement, je suis réservée sur l’usage du CSS pour formater un document texte et sur la séparation fond-forme. À suivre !

    Répondre
  4. Pingback : Blog – Max. Deconinck» Blog Archive Compte-rendu de la KiwiParty 2013 » Blog - Max. Deconinck

Laisser un commentaire