KNACSS/doc/08-print.md
raphaelgoettter 7203d5d406 Doc print
2015-03-09 16:15:48 +01:00

1.4 KiB

Styles d'impression

KNACSS impose une mise en forme d'impression par défaut, à savoir :

  • suppression des couleurs de fond des éléments
  • suppression des ombrages de boîte et de texte
  • largeur automatique à la page (body)
  • couleur de texte #333, couleur de page blanche, taille de texte 12 points, etc.
* {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body {
  width: auto !important;
  margin: auto !important;
  font-family: serif;
  font-size: 12pt;
  background-color: #fff !important;
  color: #333 !important;
}

KNACSS gère également les sauts de pages, les lignes veuves et orphelines :

/* no orphans, no widows */
  p,
  .p-like,
  blockquote {
    orphans: 3;
    widows: 3;
  }
  /* no breaks inside these elements */
  blockquote,
  ul,
  ol {
    page-break-inside: avoid;
  }
  /* page break before main headers */
  h1,
  .h1-like {
    page-break-before: always;
  }
  /* no breaks after these elements */
  h1,
  .h1-like,
  h2,
  .h2-like,
  h3,
  .h3-like,
  caption {
    page-break-after: avoid;
  }

Une classe spécifique permet d'afficher ou de masquer du contenu sur imprimante :

.print {
    display: block;
}
.no-print {
    display: none;
}

Bonus : par défaut, KNACSS décide de rendre toutes les images noir et blanc (sauvons les cartouches d'encre !) :

img {
    -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
}