Publié le 30 octobre 2024
À partir de Chrome 131, vous pouvez utiliser le CSS pour ajouter du contenu aux marges des pages lorsqu'elles sont imprimées. Cet article explique le modèle de page pour les supports paginés et comment utiliser cette fonctionnalité pour améliorer la sortie imprimée de vos pages Web.
CSS inclut des spécifications qui traitent des supports paginés, du module CSS Paged Media et du contenu généré par CSS pour les supports paginés. Ils définissent des fonctionnalités qui ne sont utilisées que lorsqu'une page est imprimée (y compris au format PDF). Il existe des user-agents qui prennent en charge ce CSS et vous permettent de générer des livres et d'autres supports imprimés à partir de HTML et de CSS. Toutefois, cette fonctionnalité n'a jamais été bien prise en charge dans les navigateurs Web, alors que nous avons souvent besoin d'imprimer ou de créer des PDF à partir d'applications.
Chrome et Firefox sont compatibles avec la règle @@page. Cette règle vous permet de définir la taille de la page sur laquelle vous imprimez et la taille des marges autour du contenu. À partir de Chrome 131, vous pouvez également utiliser du contenu généré pour ajouter du contenu aux marges en ciblant la règle at-margin correspondante.
Le modèle de page
Le modèle de page utilisé dans les supports paginés définit une zone de page, qui correspond à votre feuille de papier. À l'intérieur de la boîte de page se trouvent une marge de page, une bordure de page, une marge intérieure de page et enfin la zone de page où votre contenu est affiché. Lorsque du contenu est imprimé, il est fragmenté en autant de pages que nécessaire pour le contenir.
La marge de la page est ensuite divisée en 16 boîtes, chacune ayant une règle @ correspondante.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Dimensionnement de la boîte de marge
La hauteur des boîtes supérieure et inférieure, et la largeur des boîtes de gauche et de droite sont définies par la taille de la marge définie à l'aide de @page. Les boîtes d'angle ont donc une taille fixe créée par l'intersection de ces marges. Toutefois, les trois boîtes entre chaque angle sont flexibles. Elles se comportent de la même manière que les boîtes dans une mise en page flexible utilisant flex: auto. Elles s'étirent donc pour remplir l'espace. Toutefois, si vous placez une longue chaîne de texte dans l'une d'elles et rien dans les autres, celle contenant le texte s'étendra au lieu d'envelopper le texte.
Ajouter du contenu aux zones de marge
Pour ajouter du contenu aux boîtes de marge, utilisez du contenu généré par CSS, comme vous le feriez avec les pseudo-éléments ::before et ::after. Dans ce cas, utilisez la règle @ liée à la boîte que vous souhaitez cibler. Le code CSS suivant ajoute le texte "Mon livre" à la marge inférieure gauche ou aux pages de droite. Il met également en forme ce texte.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
En plus des chaînes de texte, vous pouvez ajouter des compteurs de pages dans les marges. Le compteur prédéfini page contient la page actuelle. Le code CSS suivant l'ajoute en bas à droite des pages de droite et en bas à gauche des pages de gauche.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Il existe également un compteur pages qui contient toujours le nombre total de pages.
Points à noter lorsque vous utilisez des marges de page
Si vous imprimez depuis un navigateur, celui-ci ajoutera automatiquement du contenu de marge de page s'il y a de la place pour l'afficher. Il le fera même si vous avez ajouté du contenu. Vous pouvez désactiver ces en-têtes et pieds de page générés automatiquement dans la boîte de dialogue d'impression.
Si vous définissez les marges d'une page sur 0 ou sur une valeur si petite qu'il n'y a pas d'espace pour les en-têtes et les pieds de page du navigateur, ils ne s'affichent pas.
En raison du concept de mise en page par défaut dans Chromium, si la première page de votre document imprimé ne contient pas d'espace pour le contenu automatique, le contenu du navigateur ne s'affichera pas sur les pages suivantes, même si elles contiennent de l'espace.
Possibilités futures pour les supports paginés
Les spécifications des supports paginés incluent plusieurs autres fonctionnalités, décrites dans l'article Concevoir des mises en page pour l'impression avec CSS. Si vous avez un cas d'utilisation pour l'une des fonctionnalités suivantes, ajoutez-le aux bugs associés.
Définir des chaînes
Les livres impriment souvent le titre du chapitre en cours dans les marges. Ce titre ne peut pas être codé en dur dans votre CSS, car il change au fur et à mesure que vous parcourez le livre. La propriété string-set vous permet de définir une valeur à partir de votre code HTML pour l'utiliser ensuite dans le contenu généré. Le code CSS suivant suppose que les titres de chapitres sont marqués comme <h1>. Il prend le contenu de chaque <h1> et l'utilise dans la marge en haut à droite des pages de droite. Lorsqu'il atteint le prochain <h1>, la valeur des marges est mise à jour après ce point.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Bug Chromium pour string-set et string().
Références croisées
Une fois un document imprimé, les références à d'autres pages sont généralement indiquées par le numéro de la page où se trouve la référence. Ces références croisées peuvent être créées à l'aide de target-counter. Lorsqu'il est appliqué à un lien, celui-ci permet d'accéder à la référence sur le Web. Lorsque la page est imprimée, le numéro de page s'affiche.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Bug Chromium pour les références croisées
Notes de bas de page
Les notes de bas de page sont également une fonctionnalité des spécifications des supports paginés. En HTML, utilisez une classe pour identifier le texte qui doit être une note de bas de page, par exemple :
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Utilisez ensuite la valeur footnote de float pour transformer ce texte en notes de bas de page. Il sera supprimé du paragraphe lorsque le document sera imprimé et s'affichera sous forme de note de bas de page.
.fn {
float: footnote;
}