Une feuille de styles de base pour le media print

Astucecss

Publié par le , mis à jour le (77018 lectures)

css web reset print impression framework media

Imprimante

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

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 !

Petite incohérence: tu définis des veuves et des orphelines pour blockquote et puis après tu interdis le page-break-inside. ;-)

@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 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) ") "}