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 :
- [(#REM) Feuille de style CSS pour l'impression, n'existe pas par defaut ]
- [<link rel="stylesheet" href="(#CSS{css/print.css})" type="text/css" media="print" />]
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 :
- [(#REM) feuille pour impression.css ]
- #page {width:1150px;}
- <!-- <link href="perso_print.css" rel="stylesheet" media="print" type="text/css" /> -->
- body { background: #FFF; font: 12pt Verdana, Tahoma, Arial, sans-serif; color: #000; }
- img, table { margin: 3; padding: 3; border: none; }
- a { color: #520; text-decoration: underline; }
- a.spip_out:after, a.spip_glossaire:after { display: inline; content: " [" attr(href) "]"; }
- /* Ne pas imprimer : tous les éléments qu'on souhaite cacher
- ---------------------------------------------- */
- .couleur, #bandeau, .margegauche, #langues, #otrarts { display: none; }
- .spip-admin, .spip-admin-float, .invisible, #reactions { display: none; }
- /* corrections de mise en page */
- p { text-align:justify; }
- p { text-align:justify; }
- .infos_article { text-align: right; margin-right: 10px; font-size: 12px; }
- .titre_site { font-size:24px; font-weight:bold; text-align:right; margin-bottom:20pt; }
- h1, h2, h3, h4, li { text-align:left; }
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 :
- #extra, #navigation, #outils, #pied, #entete p.langues, #entete .download_bouton, .cadre_download {display:none;}
- #entete img {display: block; margin: auto; text-align:center; width: 100px; height:auto; }
- #conteneur {background:none;clear:none;padding:0;}
- #contenu {float:none;width:98%}
- #page{width:18cm;margin: 0 1.5cm;font-size:14px;}
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...
Article publié le 19 avril 2015, et actualisé en mai 2020 .
Répondre à cet article