[Résolu] Impression totalement différente de l'affichage

Bonjour,
Je suis débutant en CSS

Je travaille sur la refonte de mon site en CSS. Ca avance plutôt bien grâce au livre CSS2 de notre admin et à un des gabarits que j'ai pris sur ce site. Pour le reste, je tente de me débrouiller seul (pas toujours évident).
Mais là, je sollicite votre aide...
Lorsque j'imprime ma page, le résultat n'a strictement rien à voir avec l'affichage à l'écran .
J'avoue ne pas comprendre. On dirait que l'impression se fait en mode texte...
J'ai aussi remarqué que certains autres sites, pris dans la liste de la galerie de sites en CSS présentent les mêmes symptômes... et d'autres non
Si vous voulez y jeter un oeil : http://www.avenue-des-assures.com/test/testcss.htm

Je vous remercie sincèrement pour vos éclaircissements

PS : je travaille en code couleurs (on fait comme on peut pour s'y retrouver ), ne faites pas attention au design
Modifié par loufpad (07 Feb 2006 - 00:59)

bonsoir,

pour repondre simplement, je dirais deux choses

1- tu as besoin d'une feuille CSS en media --> print
2- dans ton navigateur, dans les options d'impressions, il te faut cocher une case te permettant d'imprimer les couleur de fond

Merci Philippe

J'ai déjà coché la case "imprimer les couleurs de fonds", sans résultats.

J'ai suivi ton premier conseil et ai mis cette ligne de commande dans ma page :

<style type="text/css" media="print">@import url(testcss.css);

(au lieu de media="screen")

Et là, apparait à l'écran ce que j'avais en impression, c'est à dire les textes les uns sous les autres, sans mise en forme
Et quand j'imprime, et bien apparait bien ce qui devrait être le contenu normal de ma page.
En fait, tout s'inverse...

Comment faire pour avoir une apparence identique à l'écran et à l'impression ?

Merci
Modifié par loufpad (07 Feb 2006 - 00:24)

c'est pas comme ça

il faut rajouter une css supplémentaire

regarde ici ou la

c'est tre bien expliqué

il n'y a plus qu'a coder

Un énorme merci à toi !
Je n'avais encore lu nul part qu'il fallait créer une feuille dédiée à l'impression
C'est chose faite grâce à tes 2 liens.

Mon problème étant résolu...

Bonjour,

très précisemment par rapport à la question.

Si le résultat imprimé est radicalement différent de l'affichage à l'écran c'est que la feuille de style principale a été indiquée pour le media="screen".

Si le but est d'avoir le même résultat en impression et à l'écran alors la solution c'est de mettre la css principale en media="all".

Bonjour,

Ce n'est pas tout à fait ça.

- Il n'est pas possible de forcer l'impression des images, la prise en compte des couleurs d'arrière-plan, etc. dans les navigateurs : les préférences de l'utilisateur ont la priorité sur les propriétés CSS print, qui ne sont qu'indicatives.

- Une grande partie des propriétés CSS2.0 liées au media print n'ont jamais été implémentées (en dehors d'Opera pour certaines). CSS2.1 a réduit les propriétés print, en supprimant notament la propriété size, les pages nommées et les repères de coupes. Les propriétés restantes sont plus ou moins bien supportées (les page-break en particulier). Voir http://www.blog-and-blues.org/weblog/2004/11/24/346

A retenir: une CSS print est indicative et ne peut forcer le rendu à l'identique de l'écran, ou un rendu proche. Ce n'est d'ailleurs en fait pas son rôle. Viser plutôt l'impression du seul contenu utile (pas de menu, pas de header, etc.), en limitant les graphismes, et reformatant résolument pour l'imprimé (polices serif en points, marges et padding revus en pt ou cm, interlignes adaptés, prendre toutes les mesures pour éviter les rognages horizontaux en A4-B4, afficher les url de liens, les titles d'abréviation, etc.)
Modifié par Laurent Denis (07 Feb 2006 - 06:18)

clb56 a écrit :

Si le but est d'avoir le même résultat en impression et à l'écran alors la solution c'est de mettre la css principale en media="all".

Non. Puisqu'une partie des propriétés screen ne seront pas prises en compte, et qu'une autre partie n'est pas adaptée au media print (dimensions en pixels, polices sans serif, boutons de navigation, etc)

Une CSS print vient plutôt surcharger une css screen afin d'adapter la présentation au media.

Laurent Denis a écrit :


Non. Puisqu'une partie des propriétés screen ne seront pas prises en compte, et qu'une autre partie n'est pas adaptée au media print (dimensions en pixels, polices sans serif, boutons de navigation, etc)

Une CSS print vient plutôt surcharger une css screen afin d'adapter la présentation au media.

Si

Mais sauf que ce n'est pas une bonne idée que d'avoir un tel but. Comme je l'ai indiqué je ne faisais que répondre très précisemment (en restant au ras des paquerettes) à la question. Sans commentaires particuliers sur ce qui devait ou ne devait pas être fait.

Sur ce dernier aspect je suis évidemment d'accord avec ce que tu indiques

Comme d'hab ce que j'ai à dire n'a rien à voir avec le sujet mais tant pis. Une recommandation de l'Ademe (Agence de l'Environnement et de la Maîtrise de l'Energie) précise, dans le guide Eco-communication : vers une communication plus Eco-responsable, quelques "bonnes pratiques" pas si éloignées des nôtres :
- réalisation d'une rédaction et d'une mise en page favorable à la lecture d'écran afin d'éviter les impressions (...)
- réalisation d'un format "impression" mis en page spécifiquement pour limiter les consommations d'encre et de papier (fond blanc, limitation des aplats, mise en page optimisée, ...)
- inciter en cas d'impression à l'impression recto verso et écrire en bas de page une phrase du type "n'imprimer que si nécessaire"
- faciliter la lecture d'écran pour tous publics (tenir compte du niveau d'équipement de vos cibles ... et des préconisations existantes pour les personnes handicapées ... )
- éviter de faire imprimer des couleurs et les contenus qui peuvent être inutiles (menus, photos ambiance, etc) et préférer l'impression noir&blanc.

En conséquence de quoi, si tendre l'accessibilité est une attitude "citoyenne" tendre à la limitation des informations grosses consommatrices d'encre, de papier et d'énergie également. Essayons de penser aussi à ça dans nos CSS print.
J'ai vu quelquepart mais je ne sais plus où un site avec un picto "imprimer" qui ouvrait exactement la même page mais en pur texte, sans les CSS... C'est peut-être une bonne solution ?

> Arsene

Très intéressant effectivement. Je touve que l'idée d'une optimisation de la feuille de style media="print" en vue d'une économie de l'impression ressemble beaucoup à une bonne pratique type opquast.

L'atelier opquast serait un lieu très intéressant pour soumettre cette idée.

Quant à l'idée d'un rendu à l'écran permettant de visualisuer ce que sera l'impression c'est bien sur possible via un styleswitcher mais peu utile à mon sens puisque cette possibilité est déjà offerte par les navigateurs eux même (aperçu avant impression) et de surcroit modulable.
Modifié par clb56 (07 Feb 2006 - 11:03)

Bonjour,

Une bonne pratique sur l'impression a été longuement envisagée pratiquement depuis le début des premières discussions sur le référentiel Opquast. Mais elle n'a pas été retenue.

Le difficulté est de définir les caractéristiques souhaitées pour l'impression. Les recommandations de l'Ademe citées ci-dessus sont une des options possibles (quoiqu'il y aurait beaucoup à dire sur certains points). Une autre peut privilégier le contenu "utile" (le "texte" et non les menus). Mais dans d'autres cas, la "bonne" impression va être au contraire celle qui conserve (ou adapte) les couleurs (informatives) et les éléments de navigation pour donner justement un équivalent papier du design écran. Ce n'est pas si simple. En fait, c'est un sujet extrêmement complexe, et c'est pourquoi nous n'avons jusqu'ici pas pu définir une (ou des) bonne pratique qui satisfasse les critères d'universabilité, de possibilité, de vérificabilité du référentiel Opquast.

Mais il serait intéressant de relancer la discussion sur l'atelier Opquast

Après la technique, l'écologie
Décidément on apprend de tout sur ce forum.
Opquast m'a l'air d'un projet intéressant. Je vais aller y jeter un oeil.
Merci

clb56 a écrit :
Quant à l'idée d'un rendu à l'écran permettant de visualisuer ce que sera l'impression c'est bien sur possible via un styleswitcher mais peu utile à mon sens puisque cette possibilité est déjà offerte par les navigateurs eux même (aperçu avant impression) et de surcroit modulable.

Désolé j'ai pas eu le temps de répondre plus tôt. Tout l'intérêt de l'idée d'un styleswitcher pourrait être justement de proposer deux boutons impression, du genre l'un avec un title="imprimer la page complète" et l'autre avec un title="n'imprimer que le contenu-texte"... Par ailleurs la remarque de Laurent sur la complexité d'appréhender les besoins d'un internaute qui choisit d'imprimer une page est juste : ils sont si variés qu'il est difficile en effet de déterminer quelle attitude "optimisée" retenir pour une CSS print.
Une étude avait montré me semble-t-il (mais je ne sais plus où j'ai vu ça) que l'internaute a d'autant plus le réflexe d'imprimer que le contenu est long et l'oblige à scroller. En gros donc, a priori, un écran affichant l'intégralité du contenu de la page sera statistiquement moins souvent imprimé qu'une page demandant des scrolls.

A partir du moment où il y a convergence entre exigences d'accessibilité et prise en compte du facteur énergétique, pourquoi ne pas joindre l'utile à l'agréable ?