Une feuille de styles de base pour le media print

Astucecss

Publié par le , mis à jour le (76799 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.



/**
* Définition des marges de la page
*/

@page {
  margin: 2cm;
}

@media print {
  /**
  * Reset global de toutes les propriétés
  */
  * {
    all: unset;
    display: revert;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  img {    
    max-width: 100%;
  }
  input,
  textarea,
  select {
    all: revert;
  }

  /**
  * Taille de polices globales (13pt=16px), couleur de texte et de fond
  * Famille de police en serif (avec empattements)
  */
  
  body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13pt;
    line-height: 1.5;
    background-color: #fff!important;
    color: #000!important;
  }
  h1 {
    font-size: 24pt;
  }
  h2 {
    font-size: 20pt;
    margin-top: 20pt;
  }
  h3,
  h4 {
    font-size: 14pt;
    margin-top: 14pt;
  }
  h5,
  h6 {
    font-size: 13pt;
    margin-top: 14pt;
  }

  /**
  * Lignes veuves et orphelines
  */

  p,
  blockquote,
  figcaption {
    orphans: 3; /* pas de ligne seule en bas */
    widows: 3; /* pas de ligne seule en haut */
  }

  /**
  * Sauts de pages
  */

  ul,
  ol,
  dl,
  a,
  table,
  pre,
  blockquote {
    page-break-inside: avoid; /* pas de sauts au sein de ces élements */
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  img,
  figure,
  caption {
    page-break-inside: avoid; /* pas de sauts au sein de ces élements */
    page-break-after: avoid; /* pas de saut après ces éléments */
  }

  ul,
  ol,
  dl {
    page-break-before: avoid; /* pas de sauts avant de ces élements */
  }

  /**
  * Liens
  */

  a,
  a:link,
  a:visited {
  background: transparent !important;
  color: unset;
  font-weight: 700;
  text-decoration: underline !important;
  }

  a[href^=http]:after,
  a[href^=https]:after,
   {
    content: " (" attr(href) ")"; /* affichage des URL des liens externes */
  }

  /**
  * Masquage des vidéos
  */

  video,
  object,
  iframe {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /**
  * Classes utilitaires
  */

  .u-print {
    display: block;
    display: revert !important; /* affichage des éléments de classe u-print */
  }
  .u-no-print {
    display: none !important; /* masquage des éléments de classe u-no-print */
  }

}

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