Maîtriser l'impression CSS - commentaires Maîtriser l'impression CSS 2014-05-28T14:26:39Z https://openweb.eu.org/articles/maitriser_impression_css#comment2418 2014-05-28T14:26:39Z <p>@Yves :</p> <p>Pas de problème pour imprimer à une échelle très (très très) précise avec Firefox et Opéra.</p> <p>En revanche, les navigateurs Webkit (Safari et Chrome sont nuls sur ce point) et produisent des résultats totalement incontrôlables…</p> <p>(je n'ai même pas essayé avec Explorer… je n'essaie plus rien avec Explorer pour éviter de me pendre :D )</p> Maîtriser l'impression CSS 2013-04-25T18:26:43Z https://openweb.eu.org/articles/maitriser_impression_css#comment1609 2013-04-25T18:26:43Z <p>Yves : lancer l'impression d'un PDF automatiquement depuis un navigateur ne me semble pas possible. :) (ceci dit, si le fichier s'ouvre directement, j'imagine que l'utilisateur saura qu'il doit l'imprimer)</p> Maîtriser l'impression CSS 2013-04-25T06:58:04Z https://openweb.eu.org/articles/maitriser_impression_css#comment1607 2013-04-25T06:58:04Z <p>Bonjour à tous, <br class="autobr" /> J'ai besoin d'imprimer des cartes d'adhérent à une association au format carte de crédit.<br class="autobr" /> Il me faut donc une mise en page très précise et ce que j'obtiens avec du CSS à l'écran se reproduit de façon aberrante sur imprimante, malgré une feuille de style media="print".</p> <p>Je vais donc devoir produire en PHP un fichier au format PDF. Pouvez-vous me dire comment l'imprimer automatiquement ou à l'aide d'un bouton sur une page.</p> <p>Merci d'avance pour votre aide.</p> Maîtriser l'impression CSS 2013-01-19T09:31:18Z https://openweb.eu.org/articles/maitriser_impression_css#comment1429 2013-01-19T09:31:18Z <p>Je ne laisse pas souvent de commentaire (faute de temps) mais la je souhaitais tout de même vous remercier pour les astuces ! Un client désirait que l'on ajoute sur son site et plus particulièrement sur certaines de ses pages une possibilité d'impression. Sur le papier, cela parait simple, la réalité en est tout autre ! La mise en page est souvent catastrophique, bref, heureusement, grâce à des articles comme les vôtres on arrive à s'en sortir "plutôt" facilement... !</p> Maîtriser l'impression CSS 2013-01-08T09:40:51Z https://openweb.eu.org/articles/maitriser_impression_css#comment1393 2013-01-08T09:40:51Z <p>Jojaba : effectivement, un chouette article ! Merci :)</p> Maîtriser l'impression CSS 2013-01-07T18:08:52Z https://openweb.eu.org/articles/maitriser_impression_css#comment1390 2013-01-07T18:08:52Z <p>J'ai creusé...même un peu plus loin...<br class="autobr" /> <a href="http://perso.jojaba.fr/Web-utilisation-developpement/Impression-Web" class="spip_url spip_out auto" rel="nofollow external">http://perso.jojaba.fr/Web-utilisation-developpement/Impression-Web</a> ;)</p> Maîtriser l'impression CSS 2012-12-05T16:18:26Z https://openweb.eu.org/articles/maitriser_impression_css#comment1295 2012-12-05T16:18:26Z <p>Effectivement, il y a beaucoup de bonnes astuces à glaner partout pour les CSS print (celles dans le livre "Intégration Web : les bonnes pratiques" de Corinne Schillinger sont vraiment très bien), mais peu de CSS print vraiment complètes.</p> <p>A creuser ! :)</p> Maîtriser l'impression CSS 2012-12-05T10:02:34Z https://openweb.eu.org/articles/maitriser_impression_css#comment1293 2012-12-05T10:02:34Z <p>Bonjour et merci, j'avais lu <i>Une feuille de style pour l'impression</i> mais pas cette ressource-là forte intéressante.<br class="autobr" /> Pour étoffer ce qui a été dit, une expérience et un avis personnels...<br class="autobr" /> Récemment, un client me demandait entre autres tâches de proposer une version *.pdf de certaines pages (générées dynamiquement) de son site pour faciliter l'impression. Comme je n'avais jamais encore réalisé ce type d'implémentation (je m'intéresse à fpdf en ce moment, donc c'est une lacune que je vais combler ;)) et que la solution <i>print.css</i> était rapidement et simplement mise en place, je lui ai proposé cette alternative-là. Comme le client connaissait par le biais d'un autre de ses sites la génération de fichiers pdf dynamique et que les résultats n'étaient pas à la hauteur de ses attentes, il a effectivement opté pour ma solution qui lui convenait tant au niveau des performances que sur le plan pécuniaire. Tout ça pour dire que tout peut se justifier, il suffit d'expliquer clairement les choses.<br class="autobr" /> En pratique, ma css pour l'impression ressemble à ça :</p> <div style="text-align: left;" class="spip_code" dir="ltr"><code>/* Feuille de style minimaliste pour impression */<br /> <br /> /* 1. Dimension des blocs conteneurs définie au max */<br /> body, #wrap, #content, article {<br /> width: 100%; margin: 0; padding: 0;<br /> }<br /> <br /> /* 2. Blocs supprimés */<br /> #evitement, #pub, #menu, #sidebar, nav, aside {<br /> display: none;<br /> }<br /> <br /> /* 3. Contrôle de la dimension de certains éléments - tiré de knacss - http://www.knacss.com/ */<br /> img, table, td, blockquote, code, pre, textarea, input, object, video {<br /> max-width: 100%;<br /> height: auto;<br /> }<br /> textarea, table, td, th, code, pre, samp, div, p {<br /> word-wrap: break-word;<br /> -webkit-hyphens: auto;<br /> -moz-hyphens: auto;<br /> -ms-hyphens: auto;<br /> -o-hyphens: auto;<br /> hyphens: auto;<br /> }<br /> <br /> /* 4. Traitement des sauts de page indésirables - tiré de knacss - http://www.knacss.com/ */<br /> blockquote, ul, ol {<br /> page-break-inside: avoid;<br /> }<br /> h1, h2, h3, caption {<br /> page-break-after: avoid;<br /> }<br /> <br /> /* 5. Affichage des liens */<br /> #content a:after {<br /> content: " » " attr(href) " ";<br /> }</code></div> <p>1 » On utilise tout l'espace de la feuille (les marges sont définies par le navigateur/utilisateur), les conteneurs généraux sont définis au max de leur dimension.<br class="autobr" /> 2 » Tous les blocs inutiles sont supprimés : la pub, les moyens de navigation dans la page (lien pour accessibilité, menu, breadcrumb,...), les menu latéraux également. Le pied de page (footer) peut être conservé s'il apporte des informations utiles (l'adresse de l'entreprise,...)<br class="autobr" /> 3 » Éviter le "débordement"<br class="autobr" /> 4 » Éviter les sauts de page indésirables (pas très utile car très peu de navigateurs prennent en charge ces propriétés).<br class="autobr" /> 5 » Éventuellement, affichage des liens (pas toujours utile ou recommandé, il faut bien cibler le conteneur)</p> <p>Il serait peut-être utile de créer une print.css générique (à l'instar des frameworks css qu'on voit fleurir un peu partout)... ;)</p> Maîtriser l'impression CSS 2012-12-04T11:50:59Z https://openweb.eu.org/articles/maitriser_impression_css#comment1292 2012-12-04T11:50:59Z <p>Kamal : allez lire la partie "Les informations de la page". ;)</p> Maîtriser l'impression CSS 2012-12-03T14:58:22Z https://openweb.eu.org/articles/maitriser_impression_css#comment1287 2012-12-03T14:58:22Z <p>Bonjour,<br class="autobr" /> Svp j'ai besoin de votre aide , je veux pas imprimer le titre et la date lors de l'impression .<br class="autobr" /> Merci d'avance.</p> Maîtriser l'impression CSS 2012-11-24T09:33:23Z https://openweb.eu.org/articles/maitriser_impression_css#comment1230 2012-11-24T09:33:23Z <p>Merci pour toutes ces infos nous avons pu mettre en place sur notre site la possibilité, réservée aux membres, d'imprimer des fiches recettes prêtes à être classées dans un classeur, nos membres sont ravis !</p> Maîtriser l'impression CSS 2012-11-09T19:27:36Z https://openweb.eu.org/articles/maitriser_impression_css#comment1166 2012-11-09T19:27:36Z <p>Alors de deux choses l'une : si vous souhaitez cacher certaines parties, il faut les cacher dans la CSS spéciale print ou dans la partie @media print {} avec un display:none ;</p> <p>Sinon pour générer un PDF depuis cette version imprimable, de mémoire, je crois que c'est possible directement sous Mac (choix de l'imprimante), sur PC il faut installer un logiciel (comme PDF creator) qui permet de choisir une imprimante qui génère un fichier PDF.</p> <p>Par contre, pour générer directement un PDF, il faut se tourner vers une solution serveur (cherchez "générer PDF PHP", il y a plusieurs solutions qui le permettent).</p> <p>En espérant que cela répondre à votre question.</p> Maîtriser l'impression CSS 2012-11-06T16:39:55Z https://openweb.eu.org/articles/maitriser_impression_css#comment1163 2012-11-06T16:39:55Z <p>bonjour,</p> <p>J'ai une application interne entreprise. J'aimerais ajouter un bouton imprimer sur ma page pour permettre à l'utlisateur d'imprimer le contenu.<br class="autobr" /> Sur ma page j'ai une bande en haut avec mon entête, un menu sur la gauche et le contenu de la page.<br class="autobr" /> J'amierais n'imprimer que l'entête et le contenu de la page en passant par un pdf si possible. Comment puis-je faire ?<br class="autobr" /> J'aimerais aussi que le bouton imprimer n'apparaissent pas.</p> <p>Merci d'avance,</p> Maîtriser l'impression CSS 2012-06-25T13:12:27Z https://openweb.eu.org/articles/maitriser_impression_css#comment696 2012-06-25T13:12:27Z <p>@François : à ma connaissance, l'implémentation n'a pas évolué sur ce sujet. :-\ (je vais approfondir mes recherches sur le sujet)</p> Maîtriser l'impression CSS 2012-06-24T11:26:32Z https://openweb.eu.org/articles/maitriser_impression_css#comment694 2012-06-24T11:26:32Z <p>Ca alors je ne connaissais pas du tout l'astuce sur l'orientation de la page. Moi qui cherchais comment gérer l'impression en paysage et en portrait, je suis tombé avec plaisir sur votre site et y ai trouvé ma solution.<br class="autobr" /> L'article date un peu, la pratique a t elle évoluée en 2012 ? Ce serait pour une utilisation future sur <a href="http://www.autoperfs.com" class="spip_out" rel='nofollow external'>Autoperfs.com</a><br class="autobr" /> Merci</p> Maitriser l'impression CSS 2011-06-06T19:10:40Z https://openweb.eu.org/articles/maitriser_impression_css#comment468 2011-06-06T19:10:40Z <p>Bonjour,<br class="autobr" /> je suis amateur en création de site web ;<br class="autobr" /> il existe un moyen en CSS de créer des sauts de page avec orphelines et veuves au moyen d'une classe<br class="autobr" /> ex :<br class="autobr" /> .impress /<i><br class="autobr" /> page:portrait ;orphans:5 ;widows:5 ; <br class="autobr" /> /</i><br class="autobr" /> (avec les accolades qui vont bien)<br class="autobr" /> Je ne sais pas si cela résoudra ton problème. Tu peux avoir plus de renseignement sur le site selfhtml.<br class="autobr" /> cordialement.</p> Maitriser l'impression CSS 2010-09-19T19:38:09Z https://openweb.eu.org/articles/maitriser_impression_css#comment307 2010-09-19T19:38:09Z <p>Bonjour,</p> <p>Félicitations pour votre article, il est vrai qu'il est important de réaliser une feuille de style spéciale impression. Je tiens à préciser que celui-ci est vraiment bien rédigé et je vais donc l'utiliser pour mettre à jour mon site internet.</p> <p>Damien, fondateur de <a href="http://www.comparemandataire.fr" rel='nofollow'>Compare Mandataire</a></p> Maitriser l'impression CSS 2010-09-16T09:27:59Z https://openweb.eu.org/articles/maitriser_impression_css#comment305 2010-09-16T09:27:59Z <p>Mes références<br class="autobr" /> 1 - Votre article<br class="autobr" /> 2 - <a href="http://www.yoyodesign.org/doc/w3c/css2/page.html" class="spip_url spip_out auto" rel="nofollow external">http://www.yoyodesign.org/doc/w3c/css2/page.html</a></p> <p>Mon problème : un diagramme construit dans les deux dimensions (x et y) en fonction des données d'une base de données.<br class="autobr" /> Ma solution actuelle : <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> à l'écran - je charge les données de la base données (requete jQuery Ajax) et laisse un script javascript faire la mise en page des blocs de données en fonction des paramètres locaux sélectionnés Mais avec mes données actuelles de référence j'obtiens (pour avoir une bonne lisibilité à l'écran) un diagramme de environ 2500px x 1250px. <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> Pour imprimer je suis (me semble t'il !!!) obligé actuellement de la faire page par page dans une procédure en javascript qui prépare la page (display : none pour les blocs inutiles) et la découpe en blocs d'impression (clip : rect(a,b,c,d) top :-a left : -d), mais avec un window.print() à chaque fois.<br class="autobr" /> Je n'ai trouvé d'aide effective sur aucun des forums consultés (pas de réponse pour les meilleurs, ou des réponses péremptoires à côté du sujet pour les autres).<br class="autobr" /> Pensez-vous qu'il existe une technique plus efficace dans le cadre des outils de bonnes pratiques web ?</p>