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 n’utiliser une feuille de style supplémentaire qu’en cas d’impression par le navigateur.

 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 a son browser 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 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.  
  6. img, table { margin: 3; padding: 3; border: none; }
  7. a { color: #520; text-decoration: underline; }
  8. a.spip_out:after, a.spip_glossaire:after { display: inline; content: " [" attr(href) "]"; }
  9.  
  10. /* Ne pas imprimer : tous les éléments qu'on souhaite cacher
  11. ---------------------------------------------- */
  12. .couleur, #bandeau, .margegauche, #langues, #otrarts { display: none; }
  13. .spip-admin, .spip-admin-float, .invisible, #reactions { display: none; }
  14.  
  15. /* corrections de mise en page */
  16. p { text-align:justify; }
  17. p { text-align:justify; }
  18. .infos_article { text-align: right; margin-right: 10px; font-size: 12px; }
  19. .titre_site { font-size:24px; font-weight:bold; text-align:right; margin-bottom:20pt; }
  20. 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 http://spip.net 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 ou erreurs qui figureraient dans cette page.

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

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


Liens visibles seulement pour les inscrits.

Article publié le 19 avril 2015, et actualisé en août 2015 .

Répondre à cet article