Nous avons parfois la fâcheuse habitude de penser que le Web n’est bon à être restitué que sur un écran d’ordinateur. Pourtant, un grand nombre de documents web et d’informations en ligne sont parfaitement adaptés au médium d’impression. Non seulement pour faciliter leur consultation, les transmettre, mais aussi pour les archiver.
Pour vous faciliter la tâche et ne plus la négliger, je vous propose une feuille de style dédiée à l'impression qui condense bonnes pratiques et astuces.
Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}.
L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes (marges, couleurs, contrastes, tailles, gestion des sauts de pages et des veuves et orphelines), que vous pourrez adapter à vos convenances ou besoins personnels.
/* -----------------------/*
* Reset CSS Print "Bretzel"
* Made par Alsacréations
/* ---------------------- */
/*
* Ressources et documentations :
* 1- https://www.docuseal.co/blog/css-print-page-style
* 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
*/
@media print {
/* Dimension et marges de page */
@page {
size: A4 portrait;
margin: 2cm 1.5cm;
}
/* Reset général */
* {
all: unset;
display: revert;
box-sizing: border-box;
}
img {
max-width: 100%;
}
input,
textarea,
select {
all: revert;
}
/* On redéfinit les styles globaux (12pt = 16px) */
body {
width: auto;
margin: 0;
font-family: serif;
font-size: 12pt;
font-family: Georgia, serif;
line-height: 1.5;
color: #000000 !important;
background-color: #ffffff !important;
}
/* Espacements typographiques (15pt = 20px) */
p,
blockquote,
label,
ul,
ol {
margin-block: 0 15pt;
}
p:last-child {
margin-bottom: 0;
}
/* Titrages (24pt = 32px) */
h1 {
margin-block: 0 24pt;
font-weight: 700;
font-size: 18pt;
line-height: 1.1;
}
h2 {
margin-block: 0 18pt;
font-weight: 700;
font-size: 16pt;
line-height: 1.1;
}
h3 {
margin-block: 0 15pt;
font-weight: 700;
font-size: 14pt;
}
h4 {
margin-block: 0 12pt;
font-weight: 700;
font-size: 12pt;
}
/* Classes dédiées print / no-print */
.print {
display: revert;
}
.no-print {
display: none;
}
/* Pas de veuves ou orphelines (3 lignes minimum) */
p,
blockquote {
orphans: 3;
widows: 3;
}
/* Pas de saut de page au sein de ces éléments */
blockquote,
ul,
ol,
figure,
table {
page-break-inside: avoid;
}
/* Pas de saut de page après ces éléments */
h1,
h2,
h3,
h4,
caption {
page-break-after: avoid;
}
/* Styles des liens */
a,
a:link,
a:visited {
background: transparent !important;
color: unset;
font-weight: 700;
text-decoration: underline !important;
}
/* On affiche l'URL des liens externes */
a[href^="http"]:after,
a[href^="https"]:after {
content: " (" attr(href) ")";
}
/* On masque les vidéos */
video,
object,
iframe {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
Si vous voulez aller encore plus loin, sachez qu'un projet de framework CSS minimaliste et collaboratif a été créé et est hébergé sur GitHub, il se nomme KNACSS.
Commentaires
Excellent ! Je ne savais pas pour les lignes veuves et orphelines. 5 yous.
Pour les URL relatives je rajoute le nom du domaine. Par exemple :
a:[href^="/"]:after{content:" http://normandie-web.hiseo.fr" attr(href... ">"}
Je me permets de compléter ces bonnes infos avec ceci : http://openweb.eu.org/articles/maitriser_impr... ;)
Merci pour cette bonne base de CSS pour les impressions.
Attention toutefois, pour les malheureux qui comme moi utilisent toujours un H1 en haut de document :
body > h1, body > header > h1 {page-break-before: avoid;}
Sinon, gare à l'impression d'une page blanche en début de document !
Intéressant merci !!
Petite incohérence: tu définis des veuves et des orphelines pour blockquote et puis après tu interdis le page-break-inside. ;-)
J'aime bien l'affichage des URL.
@Patidou : en fait, les veuves et orphelines indiquent qu'il faut *au-moins* 3 lignes soudées, donc je ne vois pas où est l'incohérence.
merci. l'idée des affichages des urls est bonne.
Merci pour les astuces.
Pour ma part, en plus des urls à côté des liens, j'ai tendance à proposer la signification des abréviations ainsi que les urls des sources des citations (longues) lorsqu'elles sont renseignées :
abbr[title]:after {content:" (" attr(title) ") "}
blockquote[title]:after {content:" (" attr(cite) ") "}
Merci Raphael pour ce petit CSS ! Je ne savais pas que l'on pouvait aussi précisément gérer l'affichage en impression... ;-)