[Résolu] Rendu pour l'impression

Bonjour à tous,

L'impression d'une page web, il y a longtemps que je ne m'étais penché sur la question...

Auparavant j'utilisais une feuille de style dédiée à l'impression. Je viens de changer mon fusil d'épaule en prenant la feuille de style de base et en surajoutant des règles pour l'impression, car le rendu par défaut était tout à fait correct.

Voici la page concernée : Article.

Cependant sous Firefox j'ai deux problèmes :
- mes images sont coupées (malgré une règle "break-inside: avoid" sur mes éléments figure et img)
- une page blanche est imprimée en début de document

Plus généralement, comment débugger avec un navigateur (en l’occurrence ici Firefox puisque c'est lui qui me pose des problèmes) ? Il parait qu'il existe un moyen avec l'inspecteur, mais je n'arrive pas à trouver dans les menus :

"https://la-cascade.io/articles/css-noubliez-pas-limpression-papier" a écrit :
Émulation d'impression dans Firefox
Pour cette dernière option, sur Firefox il suffit d'ouvrir la barre d'outils développeurs (Developper Toolbar Shift + F2 ou Tools > Web Developper > Developper Toolbar) et d'entrer media emulate print dans le champ de saisie situé en bas de la fenêtre du navigateur, et de faire enter. L'onglet actif se comportera comme si le media type était print jusqu'à ce que vous fermiez la page ou que vous la rafraîchissiez.

Modifié par Olivier C (07 Apr 2023 - 11:19)

Bonjour,

1) Pour simuler l'impression papier, tu peux éventuellement faire "Menu Fichier de Firefox", "Imprimer", "Enregistrer au format pdf" ou un équivalent (dépend de ton OS) au lieu de faire une véritable impression. C'est selon moi plus sûr que les tests utilisant l'inspecteur de firefox.

Via l'inspecteur, on peut faire :
a) clic droit sur ta page
b) dans le menu qui s'affiche, sélectionner "inspecter"
c) dans le pavé où s'affichent les styles, tu devrais voir une série d'icônes (un plus, un soleil, une lune, et une feuille de papier). L'icône représentant une feuille de papier te permet de simuler un affichage avec le css media="print".

C'est forcément imparfait parce que lors d'une impression, on a tout un tas de paramètres (mode portrait ou paysage, dimension de la feuille, etc.) qu'on ne peut pas préciser ici.

2) Firefox a toujours été un peu à la traine concernant les propriétés "break-*". break-inside: avoid peut poser problème dans un contexte de "Multiple column layout" (voir https://caniuse.com/?search=break-inside CSS3 Multiple column layout). Je n'ai fait que parcourir vite fait ton css, et il me semble que tu es dans ce cas-là. C'est à vérifier cependant car vu la complexité du css, je n'ai pas approfondi, et donc je ne suis sûr de rien là. Il faudrait faire une page de test plus simple avec que du texte et une seule image pour voir si firefox comprend ton break-inside, puis rajouter un à un tes autres éléments pour voir à partir de quel moment ça cloche.

3) Ta page blanche initiale est due à quelque chose se trouvant dans le script main.js (je n'ai pas cherché plus en détails, mais si on supprime l'exécution de ce script, il n'y a pas de page blanche initiale).
EDIT: finalement non, mea culpa. C'est autre chose. Je cherche mais je n'ai pas encore trouvé.

Amicalement,
Modifié par parsimonhi (07 Apr 2023 - 14:07)

Bravo Parsimonhi, tu as touché dans le mille.

Après correction d'un autre élément j'obtiens à peu près le même rendu que sur Chrome :

body,
.article {
  display: block; /* @affected Firefox */
}

Merci beaucoup. Sujet résolu.
Modifié par Olivier C (07 Apr 2023 - 16:52)

parsimonhi a écrit :
c) dans le pavé où s'affichent les styles, tu devrais voir une série d'icônes (un plus, un soleil, une lune, et une feuille de papier). L'icône représentant une feuille de papier te permet de simuler un affichage avec le css media="print".

Et aussi merci pour cette info. Je ne sais plus utiliser Firefox...