Imprimer proprement les pages

Très souvent, vient la question de pouvoir imprimer proprement des pages du site : en l’occurrence, cela veut dire pouvoir faire comme si on dupliquait les squelettes des pages pour avoir des squelettes dédiés à l’impression, expurgés des éléments d’habillage graphique, de menus et autres renvois...

Plusieurs possibilités permettent d’éviter une duplication complète des squelettes, qui reste néanmoins la solution basique.....utilisant toujours le principe des surcharges de squelettes.

La bonne solution consiste à utiliser une facilité automatisée dans les navigateurs Web pour changer de feuille de style, plus exactement forcer une feuille de style supplémentaire uniquement en cas d’impression par le navigateur.

Article publié le 19 avril 2015, et actualisé en mai 2020


Les navigateurs gèrent automatiquement un attribut des feuilles de styles, pour activer éventuellement certains styles en fonction du média ; quand l’utilisateur demande à son navigateur d’Imprimer une page, celui-ci rajoute d’habitude divers informations (date, pagination, URL d’origine), et active en plus les styles présentés dans une feuille CSS possédant cet attribut, comme ci-dessous.
Ainsi, le squelette standard de SPIP 2 contenait dans le <HEAD> un appel (repris dans les squelettes Z) à une feuille facultative :

  1. [(#REM) Feuille de style CSS pour l'impression, n'existe pas par defaut ]
  2. [<link rel="stylesheet" href="(#CSS{css/print.css})" type="text/css" media="print" />]

Télécharger

La feuille impression en 2.1

Et les squelettes des versions 2.1 disposaient aussi de cette solution avec la feuille impression.css [1] ; vous pouvez donc reprendre :

  1. [(#REM) feuille pour impression.css ]
  2. #page {width:1150px;}
  3. <!-- <link href="perso_print.css" rel="stylesheet" media="print" type="text/css" /> -->
  4. body { background: #FFF; font: 12pt Verdana, Tahoma, Arial, sans-serif; color: #000; }
  5. img, table { margin: 3; padding: 3; border: none; }
  6. a { color: #520; text-decoration: underline; }
  7. a.spip_out:after, a.spip_glossaire:after { display: inline; content: " [" attr(href) "]"; }
  8. /* Ne pas imprimer : tous les éléments qu'on souhaite cacher
  9. ---------------------------------------------- */
  10. .couleur, #bandeau, .margegauche, #langues, #otrarts { display: none; }
  11. .spip-admin, .spip-admin-float, .invisible, #reactions { display: none; }
  12. /* corrections de mise en page */
  13. p { text-align:justify; }
  14. p { text-align:justify; }
  15. .infos_article { text-align: right; margin-right: 10px; font-size: 12px; }
  16. .titre_site { font-size:24px; font-weight:bold; text-align:right; margin-bottom:20pt; }
  17. h1, h2, h3, h4, li { text-align:left; }

Télécharger

Attention, si vous voulez modifier ou compléter les codes de style à masquer, il faudra reprendre l’intégralité de cette feuille de style, en la recopiant sous le meme nom dans votre dossier de squelettes, pour qu’elle surcharge la feuille impression.CSS de la dist par remplacement/masquage complet du fichier d’origine [2].

Impression propre avec SPIP 3+

Les squelettes standard de SPIP 3 ne proposent plus de feuille de style de versions imprimées, ni de l’appel de cette feuille facultative... vous devrez donc le refaire.

Il faudra aussi reprendre et compléter les autres styles éventuellement introduits par des plugins ou vos propres squelettes...

Maintenant, si vous n’avez pas la patience, une lame du CS permet de rajouter automatiquement une option d’élimination des zones non-imprimables par le même principe, à condition que vous rappeliez votre squelette par l’usage d’un bouton spécial rajouté sur la page web affichée, comprenant l’URL avec l’option &cs=print.

En activant cette lame, il suffit donc d’ajouter cette noisette dans chaque page à imprimer :
[<a href="(#SELF|parametre_url{cs,print})">Imprimer</a>]

Alternativement, vous trouverez (au moins) un plugin Version imprimable qui introduit cette facilité...


La feuille ./css/print.css de https://www.spip.net/fr_rubrique91.html par exemple, propose simplement :

  1. #extra, #navigation, #outils, #pied, #entete p.langues, #entete .download_bouton, .cadre_download {display:none;}
  2. #entete img {display: block; margin: auto; text-align:center; width: 100px; height:auto; }
  3. #conteneur {background:none;clear:none;padding:0;}
  4. #contenu {float:none;width:98%}
  5. #page{width:18cm;margin: 0 1.5cm;font-size:14px;}

Télécharger


Ensuite, à vous d’avoir utilisé les bons identifiants pour les "div" dans la structure de vos squelettes, pour que leurs contenus ne soit pas affichés en impression...


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1] Appel des CSS définis dans le fichier squelette ./squelettes-dist/inc-head.html, à consulter sur core.spip.net pour plus de détails !

[2] Le contraire des surcharges CSS par redéfinition postérieure dans les styles CSS perso : où ? ; attention à distinguer ces deux comportements.


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 19 avril 2015, et actualisé en mai 2020 .

Répondre à cet article