Créer une page d'impression

Meeuuuhhh · 27 Novembre 2009

Bonjour,

Je veux proposer aux visiteurs d'imprimer le contenu de l'article. Ils doivent pouvoir imprimer l'article, sans que la page ne soit encombrée par le menu, la bannière et tout le tralala : Que le texte, comme avec word par exemple.

J'étais parti pour faire un lien "imprimer cet article" qui ouvre une nouvelle page générant l'affichage de l'article dans une page html toute simple : <head><body> et texte, plus quelques styles CSS pour que les liens soient de la même couleur que le texte et sans soulignement, donc invisible sur la page imprimée.

Bon, mais en faisant quelques recherches sur google, je lis des histoires de media="print". Je ne comprends pas à quoi sert cette balise, comment l'utiliser, si c'est obligatoire, etc... Y-a-t'il des règles en vigueur à respecter pour proposer une fonction d'impression ? Un standard à appliquer, ou que sais-je encore ?

Merci d'avance pour votre aide.

Marie-Aude · 27 Novembre 2009

La feuille de style specifique au media "print" permet de mettre des éléments en display none, de changer des couleurs, voir même d'afficher des éléments qui ne le sont pas sur le site en vision "normale". C'est une feuille de style supplémentaire. On peut ainsi définir des styles différents pour chaque sort d'affichage (normal, print, etc). Elle n'est appelée que lors d'une impression : ses styles se superposent donc à la feuille de style standard, et les éléments modifiés remplacent ceux se trouvant dans la feuille standard.

Tu peux voir un exemple sur www.mezgarne.com où j'ai par exemple supprimé des menus, et rajouter une identification plus complète du site pour la version imprimée.

Je précise tout de suite que cet élément d'identification, en display none pour l'affichage 'html" ne m'a jamais posé de problème vis à vis de Google : c'est quelque chose de licite, puisqu'il apparait dans une situation donnée, et qu'il sert bien à quelque chose d'autre qu'à bourrer de mots clés

Meeuuuhhh · 27 Novembre 2009

Merci pour ta réponse Marie-Aude,

Je n'ai pas trouvé de lien "imprimer" sur ton site, pour voir ce que ça donne en pratique.

Parti comme c'est, je pense que je vais appliquer ma soluce, à savoir générer une nouvelle page n'affichant que le texte. Vous y voyez quelque chose à redire ?

UsagiYojimbo · 27 Novembre 2009

Il n'y a pas besoin de lien imprimer, essaie juste d'afficher l'aperçu avant impression de ton navigateur.

bproductiv · 27 Novembre 2009

Meeuuuhhh a dit:
Parti comme c'est, je pense que je vais appliquer ma soluce, à savoir générer une nouvelle page n'affichant que le texte. Vous y voyez quelque chose à redire ?

Tu te complique la vie...la feuille print est là pour ca.
Et sinon les liens, il faut pas les cacher au contraire, il existe des moyens avec le css pour afficher le lien en entier entre crochet par exemple : mon lien[http://www.monlien.truc] (sinon l'article pers de son intérêt non ?)

Marie-Aude · 27 Novembre 2009

Meeuuuhhh a dit:
Merci pour ta réponse Marie-Aude,

Je n'ai pas trouvé de lien "imprimer" sur ton site, pour voir ce que ça donne en pratique.

Effectivement, pas besoin de bouton, l'avantage de la solution css print, c'est qu'elle utilise les fonctions de base du navigateur, un bouton de moins, un javascript de moins.
Comme le dit le lapin-au-nom-compliqué-que-je-retiens-maintenant, fais juste "aperçu avant impression" et tu comprendras

Et oui, je vois un inconvénient à ta solution du bouton

: duplicate content ou gestion des no index, difficultés éventuelles en cas de mise à jour des pages (synchronisation du contenu)

metropoway · 27 Novembre 2009

Meeuuuhhh a dit:
Parti comme c'est, je pense que je vais appliquer ma soluce, à savoir générer une nouvelle page n'affichant que le texte.

Non, non et non.

Meeuuuhhh a dit:
Vous y voyez quelque chose à redire ?

Oui.
Pour en rajouter une couche, 100% d'accord avec Marie-Aude, UsagiYojimbo et bproductiv.
Les feuilles de styles css sont faites pour ça : adapter ton contenu en fonction du média de sortie, print ou screen.
T'embête pas à faire d'autres pages. Tu as ton contenu. Pourquoi le dupliquer, quand ton problème est juste un problème de présentation, c'est à dire de css ?

Meeuuuhhh · 27 Novembre 2009

J'ai pas compris votre truc.

Je ne veux pas imprimer toute la page, avec le menu et tout le tralala, quand bien même ce serait avec un style différent de celui de l'affichage.

Je ne veux afficher que l'article avec son titre, c'est tout, tout le reste doit disparaitre de la page.

En quoi le fait de faire une feuille de style print va-t'il faire disparaitre tout le contenu indésirable ?
Ou alors il faut que j'attribue la propriété "display : none" à toutes les div qui ne contiennent pas le contenu que je veux afficher, c'est ça ?
Si oui, je pige, le problème c'est que c'est un script invision, ça va pas être aisé de coller du display:none partout dans la feuille de style print.css

Autre question : Comment faire un lien "imprimer" qui appelle de lui-même la fonction "aperçu avant impression" du navigateur ?

C'est un peu confus tout ça, désolé.

UsagiYojimbo · 27 Novembre 2009

Je te conseille de lire dans le détail cet article très intéressant sur le sujet : http://www.alsacreations.com/tuto/lire/586-feuille-css-impression.html. Je vois mal en quoi le fait que ce soit un script invision t'empêcherait de mettre en place une feuille de style pour l'impression, il suffit de redéfinir les éléments que tu souhaites modifier sur la page à imprimer : masquer des blocs, en déplacer certains, changer les couleurs, etc.

Quand à avoir un lien qui lance l'impression, il y a window.print() en JS pour ça : https://developer.mozilla.org/en/DOM/window.print, mais vu que la feuille de style print est directement interprétée par le navigateur lors d'une demande d'impression, l'utilité de faire appel à print() est mince...

Marie-Aude · 27 Novembre 2009

Meeuuuhhh a dit:
J'ai pas compris votre truc.

Je ne veux pas imprimer toute la page, avec le menu et tout le tralala, quand bien même ce serait avec un style différent de celui de l'affichage.

Je ne veux afficher que l'article avec son titre, c'est tout, tout le reste doit disparaitre de la page.

En quoi le fait de faire une feuille de style print va-t'il faire disparaitre tout le contenu indésirable ?
Ou alors il faut que j'attribue la propriété "display : none" à toutes les div qui ne contiennent pas le contenu que je veux afficher, c'est ça ?
Si oui, je pige, le problème c'est que c'est un script invision, ça va pas être aisé de coller du display:none partout dans la feuille de style print.css

Autre question : Comment faire un lien "imprimer" qui appelle de lui-même la fonction "aperçu avant impression" du navigateur ?

C'est un peu confus tout ça, désolé.

As tu pris au moins le temps de regarder l'exemple que je t'indiquais, c'est à dire de regarder la page à l'écran, à l'aperçu avant impression et la feuille de style css pour le print ? Sinon, regarde ça clarifiera les choses.

Oui, il faut que tu appliques le display none aux divs que tu veux cacher.
Tu peux aussi changer d'autres propriétés, comme la couleur des caractères, etc...

Et pourquoi veux tu faire un lien "imprimer", alors que dans chaque navigateur, tu as dans le menu fichier la fonction imprimer standard ? (et que c'est en imprimant que le style "print" s'active, le truc de l'aperçu avant impression, c'est simplement pour que tu vois à l'écran au lieu de gâcher du papier). Ta page "deuxième version", ton visiteur l'imprime bien tout seul comme un grand ? Eh bien là c'est la même chose, directement sur ta page. Sans page dupliquée

Après je ne connais pas les scripts invision, mais bon, rajouter une feuille de style supplémentaire dans un header de page html, ça doit quand même être faisable, non ?

Meeuuuhhh · 27 Novembre 2009

Marie-Aude a dit:
As tu pris au moins le temps de regarder l'exemple que je t'indiquais, c'est à dire de regarder la page à l'écran, à l'aperçu avant impression et la feuille de style css pour le print ? Sinon, regarde ça clarifiera les choses.

Oui, il faut que tu appliques le display none aux divs que tu veux cacher.
Tu peux aussi changer d'autres propriétés, comme la couleur des caractères, etc...

Ca y'est j'ai pigé. :idea:

Et pourquoi veux tu faire un lien "imprimer", alors que dans chaque navigateur, tu as dans le menu fichier la fonction imprimer standard ?

Pour frimer 8)

Après je ne connais pas les scripts invision, mais bon, rajouter une feuille de style supplémentaire dans un header de page html, ça doit quand même être faisable, non ?

Sont quand même complexe leurs feuilles de style. :?

En fait je suis obligé de faire ma soluce, même si la règle est de faire comme vous dites, parce que je dois proposer d'imprimer plusieurs pages d'un même chapitre en une seule fois, or elles sont sur des pages web séparées. :arrow:

Mais bon j'ai appris un truc, merci.

(Et je veux bien le truc pour faire un lien qui appelle directement la fonction imprimer du navigateur, sans passer par fichier en haut à gauche) :!:

UsagiYojimbo · 27 Novembre 2009

Relis mon dernier post dans ce topic alors, il y a la solution pour lancer l'impression, pour lancer l'aperçu avant impression par contre ce ne sera pas possible (pas à ma connaissance en tout cas).

Marie-Aude · 27 Novembre 2009

Meeuuuhhh a dit:
Pour frimer 8)

Bon, ça j'ai rien à dire ^^

Meeuuuhhh a dit:
En fait je suis obligé de faire ma soluce, même si la règle est de faire comme vous dites, parce que je dois proposer d'imprimer plusieurs pages d'un même chapitre en une seule fois, or elles sont sur des pages web séparées. :arrow:

Vive Drupal ^^

Meeuuuhhh · 27 Novembre 2009

UsagiYojimbo a dit:
Relis mon dernier post dans ce topic alors, il y a la solution pour lancer l'impression, pour lancer l'aperçu avant impression par contre ce ne sera pas possible (pas à ma connaissance en tout cas).

Ton dernier poste m'avait échappé, merci pour l'info, UsagYojimbo.

Et merci à tous pour votre aide

Pour Drupal, je ne l'ai jamais utilisé, j'ai voulu l'installer une fois ça plantait de partout, j'ai laissé tomber... Mais c'est parait-il très bien.