Publié le 30 octobre 2024
À partir de Chrome 131, vous pouvez utiliser 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 d'impression de vos pages Web.
Le CSS inclut des spécifications concernant les médias paginés, le module CSS pour les médias paginés et le contenu généré par CSS pour les médias paginés. Ils définissent des fonctionnalités qui ne sont utilisées que lors de l'impression d'une page (y compris au format PDF). Certains user-agents sont compatibles avec ce CSS et vous permettent de générer des livres et d'autres supports papier à partir de HTML et de CSS. Cependant, cette fonctionnalité n'a jamais été bien prise en charge dans les navigateurs Web, bien que nous ayons souvent besoin d'imprimer ou de créer des PDF à partir d'applications.
Chrome et Firefox sont compatibles avec la règle at-rule @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 le contenu généré pour ajouter du contenu aux marges en ciblant la marge appropriée à la règle.
Modèle de page
Le modèle de page utilisé dans les supports paginés définit une zone de page, c'est-à-dire votre feuille de papier. Cette zone comprend une marge de page, une bordure de page, une marge extérieure et, enfin, la zone de la page dans laquelle votre contenu est affiché. Lorsqu'un 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 rectangles, chacun ayant une règle at 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
Mise à l'échelle de la marge
La hauteur des cadres supérieur et inférieur, ainsi que la largeur des cadres latéraux gauche et droit, sont définies par la taille de marge définie à l'aide de @page. Les cases d'angle ont donc une taille fixe créée par l'intersection de ces marges. Cependant, les trois zones entre chaque coin sont flexibles. Ils se comportent de la même manière que les boîtes dans une mise en page flex à l'aide de flex: auto. Ils s'étirent donc pour remplir l'espace, mais si vous placez une longue chaîne de texte dans l'un d'eux et rien dans les autres, celui contenant le texte se développera plutôt que de s'afficher en retour à la ligne.
Ajouter du contenu aux marges
Pour ajouter du contenu aux marges, 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 @
associée à la zone à cibler. Le code CSS suivant ajoute le texte "My book" (Mon livre) à la zone de marge inférieure gauche ou aux pages de droite. Il applique également un style à 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 aux marges. Le compteur page prédéfini contient la page actuelle. Le 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 à prendre en compte lors de l'utilisation des marges de page
Si vous imprimez à partir d'un navigateur, celui-ci ajoute automatiquement du contenu dans les marges de la page s'il y a de la place pour l'afficher. Cela se produit même si vous avez ajouté du contenu. Ces en-têtes et pieds de page générés automatiquement peuvent être désactivés dans la boîte de dialogue d'impression.
Si vous définissez les marges d'une page sur 0 ou sur une valeur si faible 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 dispose pas d'espace pour le contenu automatique, le contenu du navigateur ne s'affichera pas sur les pages suivantes, même si elles disposent d'espace.
Possibilités futures pour les contenus multimédias paginés
Les spécifications multimédias paginées incluent plusieurs autres fonctionnalités, décrites dans l'article Concevoir 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.
Chaînes de configuration
Les livres impriment souvent le titre du chapitre actuel dans les marges. Ce titre ne peut pas être codé en dur dans votre CSS, car il change au fur et à mesure que vous avancez dans 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 CSS suivant suppose que les titres de chapitre sont marqués comme <h1>. Il récupère le contenu de chaque <h1> et l'utilise dans la marge supérieure droite des pages de droite. Lorsque la valeur atteint le <h1> suivant, la valeur est mise à jour pour les marges 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 à l'aide du numéro de page où elles se trouvent. Ces références croisées peuvent être créées à l'aide de target-counter. Lorsqu'il est appliqué à un lien, le lien permet d'accéder à la référence sur le Web, une fois imprimé, 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 multimédias paginées. 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. Elle est supprimée du paragraphe lorsque le document est imprimé et affiché sous forme de note de bas de page.
.fn {
float: footnote;
}