Publié le 30 octobre 2024
À partir de Chrome 131, vous pouvez utiliser CSS pour ajouter du contenu dans les 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 lorsqu'une page est imprimée (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 @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 de marge appropriée.
Modèle de page
Le modèle de page utilisé dans les supports paginés définit une boîte de page, qui correspond à votre feuille de papier. La zone de la page comprend une marge, une bordure, une mise en page et enfin la zone de la page où votre contenu s'affiche. 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 at associée à la zone que vous souhaitez cibler. Le CSS suivant ajoute le texte "Mon livre" à la 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 dans les 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 laisse pas de place au 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
Dans les livres, le titre du chapitre en cours est souvent imprimé 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. Lorsqu'il 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 de passer à la référence sur le Web. Lorsque le document est 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. Il sera supprimé du paragraphe lorsque le document sera imprimé et affiché en note de bas de page.
.fn {
float: footnote;
}