Mémo CSS Print

Il est préférable d’utiliser toujours le même navigateur lorsque l'on travaille avec du web to print. Afin d’exporter en PDF, il suffit d'utiliser la fonction d'impression du navigateur (ctrl/cmd + P)

Google Chrome, Chromium et la dernière version de Firefox permettent un aperçu direct du rendu PDF.

Définir un format de page

      
/* Définir un format de page personnalisé */
@page {
    size: 140mm 200mm;
}

/* Il est aussi possiblie d'utiliser des formats standards */
@page {
  size: A5;
}

/* Et de définir son orientation */
@page {
  size: A4 landscape;
}
    

Définir les marges de la page

      
/* Toutes les marges sont de 30mm */
@page {
  margin: 30mm;
}


/* Toutes les marges sont différentes */
@page {
  margin-top: 20mm;
  margin-bottom: 25mm;
  margin-left: 10mm;
  margin-right: 35mm;
}
    
  

Avoir des propriétés différentes page de gauche / page de droite

      
@page:left {
  margin-left: 25mm;
  margin-right: 10mm;
}

@page:right {
  margin-left: 10mm;
  margin-right: 25mm;
}
    
  

Gérer les sauts de page

La propriété page-break permet de gérer les sauts de page

• page-break-before: always: le programme effectue un saut de page avant chaque occurrence de l'élément ciblé
• page-break-before: avoid: le programme n'effectue jamais de saut de page avant l'élément ciblé
• page-break-after: always: le programme effectue un saut de page après chaque occurrence de l'élément ciblé
• page-break-after: avoid: le programme n'effectue jamais de saut de page avant l'élément ciblé
• page-break-inside: avoid: le programme n'effectue jamais de saut de page dans l'élément ciblé

      
img {
  page-break-inside: avoid;
}
    
  

La propriété break-before indique qu'un élément doit commencer sur une nouvelle page

• break-before: page : l'élément commence sur la page d'après
• break-before: right ou break-before: left : l'élément commence sur la prochaine page de droite ou la prochaine page de gauche. Le programme crée automatiquement une page blanche si besoin

      
h2 {
  break-before: right;
}
    
  

Vous pouvez aussi utiliser la propriété break-after de la même manière, le saut de page se fera après l'élément ciblé.

Ajouter des numéros de page (paged.js)

      
@page {
  @bottom-left {
    content: counter(page);
  }
}
    
  

Créer du contenu dans les marges (paged.js)

Il est possible de créer du contenu de type titre courant ou numéro de page ou autre dans les marges de la page. Cette image montre toutes les zones sélectionnables.

      
@page {
  @top-right {
    content: "Un titre :)";
  }
}
    
  

Liste des marges

 
    
@top-left-corner {}
@top-left {}
@top-center {}
@top-right {}
@top-right-corner {}
@left-top {}
@left-middle {}
@left-bottom {}
@right-top {}
@right-middle {}
@right-bottom {}
@bottom-left-corner {}
@bottom-left {}
@bottom-center {}
@bottom-right {}
@bottom-right-corner {}
    
  

Nommer une page (pour lui donner un style spécifique) (paged.js)

      
.mapage {
  page: mapage;
}

@page mapage {
  /* ici les propriétés personnalisées de ma page*/
}