CSS Print

La principale méthode pour créer des PDFs imprimables avec des technologies du web consiste à utiliser la fonctionnalité imprimer du navigateur, de préférence sur Chromium ou Chrome.

Le CSS permet de créer des feuilles de style spécifiques à l'écran et à l'impression. Grâce à cette fonctionnalité appelé media print, il est possible d'avoir un design différent entre le rendu écran et le rendu print, et même un contenu différent.

Fonctionnement du css print

@media print {
    /*Votre CSS spécifique pour le print ici*/ 
}

Définir le format de la page

@media print {
    @page{size: A4;}
    /* ou */
    @page{size: 21cm 29.7cm;}
}

Définir les marges

/* Définir les marges */       
@page { margin: 2cm }

/* Définir les marges de la page de gauche */
@page :left { margin: 1cm; }

/* Définir les marges de la page de droite */
@page :right { margin: 1cm; }

/* Définir les marges sur la première page, il est aussi possible de sélectionner une page en particulier */
@page :first {margin: 1cm 2cm;}

Attention, si vous voulez imprimer avec un fond de couleur, les marges seront blanches.

Sauts de page

Les 3 propriétés CSS page-break-before, page-break-after, et page-break-inside permettent de définir à quel endroit faire des sauts de page ou non.

page-break-before permet de gérer un saut de page avant un élément HTML.
page-break-after permet de gérer un saut de page après un élément HTML.

page-break-inside empêche un élément HTML de se couper en deux sur deux pages (comme les images par exemple)

page-break-after  : auto | always | avoid 
page-break-before : auto | always | avoid 
page-break-inside : auto | avoid

auto est la valeur standard, always ajoute un saut de page à chaque fois, avoid empêche un saut de page.
Par exemple:

h1, h2, h3, h4, h5, h6 { 
    page-break-after:avoid; 
}

img { 
    page-break-inside:avoid; 
}

Avoir des contenus différents entre la version web et la version print

Il est possible de cacher certains éléments sur le web et de les afficher sur la version print et vice-versa

@media screen{
    h1 { display:none; }
}

@media print{
    img { display:none }
}

Micro Typo

Tableau des espaces en Unicode Les propriétés de micro typographie ne fonctionnent pas ou très mal dans les navigateurs. Il est très compliqué de gérer les paramètres de césure, de justification et les drapeaux. Il existe quelques hacks, des ajustements à faire à la main:

ajouter un <span> avec un letter-spacing pour ajuster la justification
faire les drapeaux avec des <br> ou en mettant un attribut content-editable=true sur un element html

Prévisualisation dans le navigateur

Pour visualiser la version print directement dans le navigateur:

Ouvrir Chromium/Chrome
Ouvrir l’inspecteur (click droit + inspecter ou cmd/ctrl + maj + I)
Cliquer sur les trois points en haut à droite de la fenêtre de l’inspecteur
Puis dans le menu déroulant : More Tools > Rendering
Une fenêtre s’ouvre, plus bas dans la section Emulate CSS media type, sélection print dans le menu déroulant
Si vous fermez l’inspecteur, vous retournerez à une prévisualisation web/screen

Exporter une page web en PDF

Appuyer sur ctrl/cmd + P
Dans Destination, Choisir Fichier PDF
Si vous avez bien déterminé le format de votre PDF et ses marges, il n’est pas nécessaire de choisir la taille du papier et le champ Marges doit afficher « Aucune »
L’option Graphiques d’arrière-plan doit être cochée
Cliquer sur « Enregistrer »

Exercice

À partir de la page web développé dans l’exercice précédent, en faire une version imprimable en A5.