Récapitulatif CSS pour l’impression sur papier

 (voussoir.net)
26 points par GN⁺ 2024-03-04 | 2 commentaires | Partager sur WhatsApp
  • Je travaille en entreprise sur la recréation et le remplacement, avec du HTML, de formulaires auparavant remplis à la main sur papier/Excel par un outil web, donc j’ai rassemblé ici quelques notes sur le sujet.
  • Présentation des bases du CSS qui permettent de contrôler l’apparence d’une page web à l’impression, ainsi que de quelques astuces et bonnes pratiques.

@page

  • @page est une règle CSS qui indique au navigateur les paramètres d’impression du site web.
  • @page englobe le DOM : sur le web, l’élément <html> est limité par les bords de l’écran, alors qu’à l’impression il est limité par @page.
  • Les réglages de @page correspondent globalement à ceux que l’on retrouve dans la boîte de dialogue d’impression du navigateur quand on appuie sur Ctrl+P.

@media print

  • Il existe une media query print qui permet d’écrire des styles appliqués uniquement lors de l’impression.
  • On peut ajouter display:none aux en-têtes, options, textes d’aide utilisateur, etc. qui ne doivent pas apparaître sur la version imprimée.

Largeur, hauteur, marges, padding

  • Il faut bien comprendre le modèle de boîte, et la raison pour laquelle on définit souvent margin: 0 dans @page est qu’on préfère gérer les marges au niveau des éléments du DOM.
  • Il est plus simple de garder à l’esprit que <html> occupe toute la feuille physique et que les marges se trouvent à l’intérieur du DOM.

Positionnement des éléments

  • Lors de la conception du document, on place les éléments avec un HTML/CSS approprié.
  • On peut aussi utiliser le positionnement absolu lorsqu’il faut créer des rectangles adaptés à une feuille d’étiquettes d’une taille précise, ou imprimer des données sur du papier avec un marquage particulier.

Documents multipages et éléments répétés

  • Lorsqu’on écrit un générateur d’impression contenant des données tabulaires, comme une facture, si un <table> se poursuit sur une deuxième page, le navigateur duplique automatiquement le <thead> en haut de chaque page.
  • On peut générer les pages en JavaScript en découpant le tableau en plusieurs petits tableaux.

Mode portrait / paysage

  • L’utilisateur peut remplacer les règles définies dans @page s’il le souhaite.
  • On peut créer des éléments <style> distincts pour les modes portrait et paysage, puis basculer de l’un à l’autre avec JavaScript.

Source des données

  • Il existe plusieurs façons d’injecter les données dans la page : emballer toutes les données dans les paramètres d’URL, ou utiliser JavaScript pour récupérer un enregistrement en base via une API.
  • On peut définir contenteditable pour permettre à l’utilisateur d’effectuer de petites modifications avant l’impression.

L’avis de GN⁺

  • Cet article fournit aux développeurs web un guide utile pour écrire du CSS destiné à l’impression. Il sera particulièrement utile à celles et ceux qui travaillent à transformer des pages web en documents physiques.
  • Le CSS d’impression est un sujet souvent négligé, mais il reste précieux, car de nombreuses entreprises doivent encore imprimer des documents importants.
  • L’approche technique présentée dans l’article semble avoir été testée et validée en conditions réelles, et propose des solutions pratiques à des problèmes concrets.
  • L’utilisation de la règle CSS @page et de la query @media print est essentielle pour contrôler la taille du papier et les marges lors de l’impression d’une page web, et c’est un point que tout développeur web devrait connaître.
  • L’article va au-delà d’une compréhension théorique du CSS d’impression en fournissant des exemples concrets et des conseils pratiques sur sa mise en œuvre, ce qui aide à réduire l’écart entre théorie et pratique.

À lire aussi

2 commentaires

 
cosine20 2024-03-11

J’aimerais essayer d’en faire un petit projet la prochaine fois.
 
GN⁺ 2024-03-04
Avis Hacker News

  • Explication des styles d’impression préférés pour un site web personnel :

    • Les en-têtes de section sont empêchés d’être imprimés en bas de page afin que le contenu ne se retrouve pas en haut de la page suivante sans son en-tête.
    • Les graphiques et diagrammes sont imprimés en entier sur une page, sans déborder sur la suivante.
    • Les URL des hyperliens sont imprimées afin que les liens ne restent pas simplement du texte souligné.

  • Retour d’expérience sur l’édition d’un livre avec Pagedjs.org :

    • Il y avait quelques bugs dans l’aperçu, mais le rendu final était parfait, et cela a permis de gagner les trois quarts du temps par rapport à l’utilisation d’InDesign.
    • Si l’on est à l’aise à la fois avec HTML/CSS et InDesign, Pagedjs est un meilleur choix pour la mise en page de longs textes.

  • Problèmes de prise en charge par les navigateurs du CSS d’impression :

    • Il n’existe pas d’équivalent pour certaines fonctionnalités en CSS, comme l’ajout de notes de bas de page à chaque page.
    • Question sur l’existence d’un moteur de mise en page HTML simple permettant d’expérimenter avec des propriétés CSS personnalisées et de combler ces lacunes.

  • Facilité de l’impression avec CSS :

    • N’importe quelle application peut produire du HTML+CSS et préparer facilement des documents imprimés propres et élégants.
    • Il est plus facile d’écrire en quelques minutes une typographie CSS que d’apprendre PostScript ou TeX.

  • Situation où la prise en charge de l’impression par les navigateurs est si mauvaise qu’il faut créer une application native :

    • Actuellement, il faut télécharger un PDF pour pouvoir imprimer.
    • Appel aux développeurs de Chrome/Blink, Safari/Webkit et Firefox/Mozilla pour qu’au moins les solutions de contournement puissent fonctionner.

  • Réflexion sur l’histoire et la situation actuelle de CSS :

    • CSS a d’abord été conçu en pensant aux médias imprimés, mais la prise en charge par les navigateurs est restée en retard.

  • Manière de créer des factures et certains livres électroniques avec HTML & CSS :

    • Présentation de l’utilisation de print-css.rocks et Weasyprint.

  • Mention de paper-css, utilisé pour générer des PDF via le navigateur.

  • Avantages de la production de documents imprimés avec HTML/CSS :

    • Tout le nécessaire à la production de supports imprimés est réalisé avec HTML/CSS.

  • Retour d’expérience sur l’utilisation des compétences CSS pour proposer des profils de réseau social en version imprimable :

    • Possibilité d’imprimer les profils dans un réseau social destiné aux ouvriers d’usine.
    • Partage également de l’expérience de création d’un éditeur en ligne pour produire des certificats d’ateliers et de cours.