De nombreuses règles (

@page
,
::call
,
string-set
, etc) permettent de faire la mise en page de vos documents web (gamebook, roman, règles du jeu, wiki, fiche d’une personnage, …). Les marges des pages, définies par le navigateur, peuvent alors être stylisées. N’oubliez pas que les écrans ne sont pas paginés, alors que les médias imprimés le sont.

CSS Books

Le WHATWG a défini un standard étoffé pour permettre aux CSS de styliser des livres (en voici une version PDF). Dans la pratique, cela peut servir si vous voulez faire un gamebook et permettre son impression. Mais, en élargissant les choses, cette spécification permet en fait de styliser en profondeur l’impression papier d’un site. Cela peut donc servir pour un Wiki, les règles d’un jeu, des fiches de personnages, des cartes à collectionner, etc.

Je vous invite à la lire intégralement (même si elle fait une trentaine de pages). En voici toutefois un résumé pratique, qui sera peut-être un peu obscure malgré tout puisque je n’ai pas encore eu l’occasion de mettre tout cela en pratique:

At-rules

@page
Sélecteur de pages. On peut lui adjoindre
@page :first
,
@page :nth(1)
,
@page :nth(3n+1)
, etc. La propriété CSS
page
permet alors de définir le type de pagination des éléments.
page: chapter;
indiquera que cet élément est un “chapitre”, et il pourra alors être sélectionné par
@page chapter:nth(2)
.
@top-left @right-middle @top-left…
Sélecteurs spéciaux permettant de styliser les éléments hors page. Par exemple,
@top-left
permet de styliser ce que le navigateur va rajouter dans la marge de la page, en haut à gauche (souvent, c’est le titre de la page qui est là).
@footnote
Sélecteur spécifique aux notes de base de page.
@area
Permet de créer des zones nommées (
@area monnom
), utiles pour faire des notes “volantes”. On peut alors se servir de
flow: area(monnom);
pour déplacer des éléments vers ces zones nommées.
@inside
Bon, là, je ne sais pas trop à quoi sert ce sélecteur spécifique.
@layout
Indique comment les pages sont agencées l’une par rapport à l’autre: est-ce qu’elles se succèdent l’une sous l’autre (comme c’est généralement le cas)? L’un à coté de l’autre (façon slide)? Ou en forme de grille?

Sélecteurs

::footnote-call
,
::footnote-marker
Quand un élément crée un renvoie dans les notes de bas de page, un pseudo-élément
::footnote-call
est placé à l’endroit où l’élément se trouvait.
::call
Même principe que les notes de bas de page, mais dans le cas des notes en général (voir
@area
).

Propriétés

string-set
Permet de créer une “variable” (constante en fait) dont la valeur sera issue d’une expression.
string-set: heading content();
permet par exemple de copier le contenu (
content()
) du noeud ciblé par le sélecteur CSS dans une variable nommée
heading
. On peut alors récupérer cette valeur via
content: string(heading);
. On peut aussi utiliser des compteurs (
string-set: header "Chapter " counter(header) ": " content();
).
content(before)
,
content(after)
et
content(first-letter)
sont également utilisables.
counter-reset
,
counter-increment
Permet de manipuler des compteurs, utiles pour la pagination ou la numérotation des chapitres (
counter-increment: header;
incrémentera le compteur nommé
header
).
position: running(…)
position: running(…)
permet de faire référence à un élément (comme
string()
), que l’on peut alors dupliquer dans les marges de la page (
@page
) via
element(…)
.
leader
Les
leader
sont les pointillés que l’on trouve parfois dans les sommaires et qui relient le titre d’un chapitre à sa page, sous la forme Les Dracquints…………………………p27. On peut choisir un style
dotted
,
solid
,
space
, ou un caractère quelconque de son choix.
target-counter
,
target-counters
Permettent de faire des références, comme “Voir page 17” ou “cf Section 1.2.4”. Par exemple,
content: "(see page " target-counter(attr(href url), page, decimal) ")";
permet d’ajouter un texte après chaque ancre
a
.
target-text
Similaire à
target-counter
, cette propriété permet de faire référence à un élément en reprenant un texte (comme “Voir chapitre 2, ‘Alternatives au JS’“).
float
footnote
permet de faire un renvoie vers une note de pied de page. Par exemple,
.footnote { float: footnote; }
permet de faire un renvoie type Une phrase est une suite de mots <span class=”footnote”>le plus souvent</span> qui deviendra “Une phrase est une suite de mots [1]” et en pied de page, on aura [1] Le plus souvent.
bottom
float-reference
,
float-defer-column
,
columns
,
column-span
Permettent de gérer la mise en forme des colonnes de texte dans la page, et de position des éléments flottants dans ces colonnes (façon journal papier).
target-pull()
Utile pour faire des renvois similaires aux notes de bas de page ou aux
@area
.
bookmark-level
,
bookmark-label
,
bookmark-state
Spécifie les marque-page dans le livre.
condition
Propriété CSS permettant de poser une condition sur un élément. Par exemple,
condition: at-page-break;
appliquera le styling si l’élément est en bas ou haut de page.
column-rule-clip
Permet de gérer les tailles de colonnes, et la façon qu’elles auront de “couper” leur contenu en cas de débordement.
baseline-grid
,
baseline-block-snap
Permet d’aligner les textes de deux colonnes adjacentes, facilitant grandement la lecture.
text-replace
Permet de remplacer un caractère par un autre, par exemple dans le cadre de caractères non imprimables.
nav-up-shift
,
nav-down-shift
Détermine l’effet entre deux pages (…).

Ce sont donc des notes plutôt en vrac, et assez difficiles à comprendre, mais j’espère que les choses s’éclairciront dans les années à venir, quand les navigateurs déploieront ces nouvelles propriétés et que j’aurai eu l’occasion de m’en servir en pratique (par exemple, sur Dracca).