@media print
Attention: cet article date du 19 octobre 2018
Ce qu'il contient est peut être encore valable...
... ou complètement obsolète!
Ayant eu à travailler dernièrement avec du papier (pour imprimer des pages web), voici un petit mémo de quelques propriétés css spécifiques pour l’impression…
Je fais ici un petit récapitulatif sous forme d’aide mémoire, n’hésitez pas à compléter par une recherche dans un moteur de recherche.
Et bien sûr quelques expérimentations et calage…
Media
On peut faire une section dans notre css, sous forme de media query:
@media print {
/* spécifique */
}
Ou bien faire un lien vers une css spécifique (solution un peu moins bonne car nécessite un aller-retour supplémentaire vers le serveur)
<link media="print" rel="stylesheet" href="css/papier.css" />
Propriétés spécifiques
La gestion des ruptures de page, des veuves et orphelines ou lignes solidaires est un problème spécifique au papier.
Pour mémoire: Une orpheline n’a pas de passé, une veuve n’a pas d’avenir (l’orpheline est la première ligne d’un paragraphe, et la veuve la dernière). On peut aussi se souvenir que dans l’expression « veuves et orphelines », la veuve est en premier (donc haut de page), l’orpheline en second (donc bas de page).
Comment le gérer ?
selecteur {
/* force un saut de page avant */
page-break-before: always;
/* ou après... */
page-break-after: always;
/* mais pas dedans */
page-break-inside: avoid;
/* Veuves: nb de lignes rejetées sur la page suivante */
/* en cas de fin de contenu */
widows: 3;
/* Orphelines: nb de lignes conservées sur la page */
/* en cas de fin de contenu (le reste allant sur la suivante) */
orphans: 3;
}
La page
Gérer le format de la page est assez intéressant aussi. La propriété size semble mal supportée pour l’instant…
@page {
/* définition des marges */
margin: 1cm;
/* page et orientation */
size: A4 portrait ;
}
Économiser de l’encre…
On use souvent du display:none dans une css pour impression, afin de cacher tout ce qui ne sert à rien sur du papier (publicité, navigation, call to action, animation, header/footer…)
selecteur {
/* fond transparent, écriture noire */
background: transparent;
color: black;
/* cacher les trucs sans intérêt... */
display: none;
/* pleine largeur, pour le <main> ou le <body> par exemple */
width: 100%;
margin: 0;
padding: 0;
/* vider la cartouche: forcer l'impression des couleurs */
/* et images de background - non standard... */
print-color-adjust: exact;
}
Ne pas hésiter à utiliser le !important pour surclasser tout réglages pouvant être présent dans votre css.
Autres réglages…
Si on évite de s’en servir sur un écran, le multi-colonnage peut être intéressant sur papier.
selecteur {
column-count: 2 ;
column-gap : .3cm ;
}
Les unités de mesure sur papier peuvent facilement être des cm ou des mm…
Pratique, pouvoir afficher l’url d’un lien (qui, rappelons le, n’est pas cliquable sur papier) après celui ci, trouvé sur lacascade.io (comme d’ailleurs quelques autres trucs de cet article).
a[href^="http"]:not([href*="richardcarlier.com"]):after {
content: " (" attr(href) ")";
}
Que signifie ce sélecteur barbare? Tout simplement:
- pour tous les liens (
a) - qui commencent par
http(donc externe), - et qui ne contiennent pas l’url de votre site (richardcarlier.com dans mon cas),
- ajouter un contenu (
content:) après (:after) - la valeur de l’
attribut href(donc l’url du lien, faut suivre un peu) - et entre parenthèses en plus…
On notera dans un article de Smashing Magazine quelques idées supplémentaires:
- Ajouter un QR Code dans un coin, pour renvoyer facilement vers la page web (
si votre site est responsive… mais il l’est forcément) - Utiliser un filtre css négatif sur certaines images (pour inverser le noir/blanc par exemple)
Et si j’ai oublié des trucs importants, n’hésitez pas à me le signaler!