Une fiche de livre imprimable — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Une fiche de livre imprimable

Responsive design · niveau 2

Énoncé

Un libraire imprime la page d'un livre pour l'afficher en vitrine. Avec la feuille du chapitre, que reste-t-il de la page imprimée ? Quelles règles de @media print faudrait-il ajouter pour que la couverture reste à gauche du texte, comme à l'écran, et que ni la couverture ni la fiche technique ne soient coupées entre deux pages ? Comment vérifier sans imprimer ?

Corrigé

Avec la feuille du chapitre, l'impression masque le lien d'évitement, la navigation, le second paragraphe du pied et le bouton « Commander ce livre » ; le corps redevient un bloc ordinaire, noir sur blanc ; les liens du contenu sont suivis de leur adresse. On peut ajouter :


@media print {
  .fiche-livre {
    grid-template-areas:
      "titre      titre"
      "signature  signature"
      "couverture resume"
      "couverture fiche";
    grid-template-columns: 6cm 1fr;
  }

  .fiche-livre figure,
  .fiche {
    break-inside: avoid;
  }
}

Une page A4 imprimée offre environ 17 centimètres de large, soit moins de 48rem : sans ces règles, c'est la disposition du téléphone (une colonne) qui s'applique. La largeur de la page est fixe, d'où une colonne en centimètres, unité qui n'a de sens qu'à l'impression. La zone action disparaît des zones puisque le bouton est masqué. On vérifie avec l'aperçu avant impression du navigateur, ou dans l'onglet Rendering (Emulate CSS media type: print) ; en simulant l'impression, Chromium calcule bien display: none pour la navigation.