Openweb.eu.org

Maîtriser l'impression CSS

Nico — 2014-05-28T14:26:39Z

@Yves :

Pas de problème pour imprimer à une échelle très (très très) précise avec Firefox et Opéra.

En revanche, les navigateurs Webkit (Safari et Chrome sont nuls sur ce point) et produisent des résultats totalement incontrôlables…

(je n'ai même pas essayé avec Explorer… je n'essaie plus rien avec Explorer pour éviter de me pendre :D )

Maîtriser l'impression CSS

Nicolas Hoffmann — 2013-04-25T18:26:43Z

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)

Maîtriser l'impression CSS

Yves — 2013-04-25T06:58:04Z

Bonjour à tous,
J'ai besoin d'imprimer des cartes d'adhérent à une association au format carte de crédit.
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".

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.

Merci d'avance pour votre aide.

Maîtriser l'impression CSS

Florian — 2013-01-19T09:31:18Z

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... !

Maîtriser l'impression CSS

Nicolas Hoffmann — 2013-01-08T09:40:51Z

Jojaba : effectivement, un chouette article ! Merci :)

Maîtriser l'impression CSS

Jojaba — 2013-01-07T18:08:52Z

J'ai creusé...même un peu plus loin...
http://perso.jojaba.fr/Web-utilisation-developpement/Impression-Web ;)

Maîtriser l'impression CSS

Nicolas Hoffmann — 2012-12-05T16:18:26Z

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.

A creuser ! :)

Maîtriser l'impression CSS

Jojaba — 2012-12-05T10:02:34Z

Bonjour et merci, j'avais lu Une feuille de style pour l'impression mais pas cette ressource-là forte intéressante.
Pour étoffer ce qui a été dit, une expérience et un avis personnels...
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 print.css é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.
En pratique, ma css pour l'impression ressemble à ça :

/* Feuille de style minimaliste pour impression */ /* 1. Dimension des blocs conteneurs définie au max */
body, #wrap, #content, article { width: 100%; margin: 0; padding: 0;
} /* 2. Blocs supprimés */
#evitement, #pub, #menu, #sidebar, nav, aside { display: none;
} /* 3. Contrôle de la dimension de certains éléments - tiré de knacss - http://www.knacss.com/ */
img, table, td, blockquote, code, pre, textarea, input, object, video { max-width: 100%; height: auto;
}
textarea, table, td, th, code, pre, samp, div, p { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;
} /* 4. Traitement des sauts de page indésirables - tiré de knacss - http://www.knacss.com/ */
blockquote,	ul,	ol { page-break-inside: avoid;
}
h1,	h2,	h3,	caption { page-break-after: avoid;
} /* 5. Affichage des liens */
#content a:after { content: " » " attr(href) " ";
}

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.
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,...)
3 » Éviter le "débordement"
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).
5 » Éventuellement, affichage des liens (pas toujours utile ou recommandé, il faut bien cibler le conteneur)

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)... ;)

Maîtriser l'impression CSS

Nicolas Hoffmann — 2012-12-04T11:50:59Z

Kamal : allez lire la partie "Les informations de la page". ;)

Maîtriser l'impression CSS

kamal — 2012-12-03T14:58:22Z

Bonjour,
Svp j'ai besoin de votre aide , je veux pas imprimer le titre et la date lors de l'impression .
Merci d'avance.

Maîtriser l'impression CSS

Olivier — 2012-11-24T09:33:23Z

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 !

Maîtriser l'impression CSS

Nicolas Hoffmann — 2012-11-09T19:27:36Z

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 ;

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.

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).

En espérant que cela répondre à votre question.

Maîtriser l'impression CSS

badem — 2012-11-06T16:39:55Z

bonjour,

J'ai une application interne entreprise. J'aimerais ajouter un bouton imprimer sur ma page pour permettre à l'utlisateur d'imprimer le contenu.
Sur ma page j'ai une bande en haut avec mon entête, un menu sur la gauche et le contenu de la page.
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 ?
J'aimerais aussi que le bouton imprimer n'apparaissent pas.

Merci d'avance,

Maîtriser l'impression CSS

Nicolas Hoffmann — 2012-06-25T13:12:27Z

@François : à ma connaissance, l'implémentation n'a pas évolué sur ce sujet. :-\ (je vais approfondir mes recherches sur le sujet)

Maîtriser l'impression CSS

François — 2012-06-24T11:26:32Z

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.
L'article date un peu, la pratique a t elle évoluée en 2012 ? Ce serait pour une utilisation future sur Autoperfs.com
Merci

Maitriser l'impression CSS

Philippe_ — 2011-06-06T19:10:40Z

Bonjour,
je suis amateur en création de site web ;
il existe un moyen en CSS de créer des sauts de page avec orphelines et veuves au moyen d'une classe
ex :
.impress /
page:portrait ;orphans:5 ;widows:5 ;
/
(avec les accolades qui vont bien)
Je ne sais pas si cela résoudra ton problème. Tu peux avoir plus de renseignement sur le site selfhtml.
cordialement.

Maitriser l'impression CSS

ddpetit — 2010-09-19T19:38:09Z

Bonjour,

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.

Damien, fondateur de Compare Mandataire

Maitriser l'impression CSS

softdaemon — 2010-09-16T09:27:59Z

Mes références
1 - Votre article
2 - http://www.yoyodesign.org/doc/w3c/css2/page.html

Mon problème : un diagramme construit dans les deux dimensions (x et y) en fonction des données d'une base de données.
Ma solution actuelle :
– à 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.
– 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.
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).
Pensez-vous qu'il existe une technique plus efficace dans le cadre des outils de bonnes pratiques web ?