Largeur sûre en pixels pour l'impression de pages web ?

Question

Quelle est la largeur sûre en pixels pour imprimer une page web ?

Ma page contient des images de grande taille et je veux m'assurer qu'elles ne seront pas coupées à l'impression.

Je connais les différentes marges des navigateurs et les formats de papier US Letter / DIN A4. Nous avons donc un format de lettre standard et des valeurs DPI par défaut. Mais puis-je les convertir en pixel à spécifier dans l'image width attribut ?

Answer 1

Quant à une véritable "réponse universelle", je ne peux pas en fournir une. Je peux, par contre, fournir une réponse simple et définitive pour certaines particularités...

670 PIXELS

Au moins, cela semble être une réponse sûre pour les produits Microsoft. J'ai lu de nombreuses suggestions, dont la 675, mais après avoir testé moi-même cette solution, j'ai trouvé la 670.

Toutes les questions de DPI, de marges et de différences matérielles mises à part, cette réponse est basée sur le fait que si j'utilise l'aperçu avant impression dans IE9 (avec des marges standard) - et que je règle la taille d'impression sur 100 % plutôt que sur la valeur par défaut de "rétrécissement pour s'adapter", tout tient sur la page sans être coupé à cette largeur.

Si je m'envoie un e-mail HTML et que je le reçois avec Windows Live Mail 2011 (ce qu'est devenu Outlook Express) et que j'imprime la page à une largeur de 670 - là encore, tout s'adapte. Cela est vrai si je l'envoie à une copie papier réelle ou à un fichier MS XPS (impression virtuelle).

Avant d'expérimenter, j'utilisais une largeur arbitraire de 700. Dans tous les scénarios mentionnés ci-dessus, une partie de la page était coupée. Lorsque j'ai réduit à 670, tout s'est parfaitement adapté.

Quant à la façon dont j'ai défini la largeur, j'ai simplement utilisé une table html primitive "enveloppante" et défini sa largeur à 670.

Si vous pouvez dicter le logiciel de l'utilisateur final, ces questions peuvent être simples. Si vous ne le pouvez pas (ce qui est généralement le cas bien sûr), vous pouvez tester les particularités comme les navigateurs qu'ils utilisent, etc. et coder en dur les solutions pour les plus importantes. Entre IE et FF, vous couvrirez littéralement environ 90% des utilisateurs du web. Mettez un autre code pour "tous les autres", qui semble généralement fonctionner, et c'est tout...

Answer 2

Ce n'est pas aussi simple qu'il n'y paraît. Je viens de me heurter à une question similaire, et voici ce que j'ai obtenu : Tout d'abord, un peu de contexte sur wikipedia .

Ensuite, en CSS, pour le papier, ils ont pt qui est un point, ou 1/72 pouce. Donc si vous voulez avoir la même taille d'image que sur le moniteur, vous devez d'abord connaître le DPI/PPI de votre moniteur (généralement 96, comme mentionné dans l'article de wikipedia), puis le convertir en pouces, puis le convertir en points (diviser par 72).

Mais là encore, les navigateurs ont toutes sortes de problèmes avec le contenu imprimable. Par exemple, si vous essayez d'utiliser des balises css flottantes, les navigateurs basés sur Gecko couperont vos images au milieu de la page, même si vous utilisez page-break-inside : avoid ; sur vos images (voir ici, dans l Système de suivi des bogues de Mozilla ).

Vous trouverez plus d'informations sur l'impression à partir d'un navigateur dans cet article sur le site de la Commission européenne. A List Apart .

En outre, vous devez faire face à la largeur de l'option "Shrink to Fit" dans l'aperçu avant impression, ainsi qu'aux différents formats et orientations du papier.

Soit vous déterminez une bonne taille d'image en pouces, je veux dire en points (7,1" * 72 = 511,2 points). width: 511pt; fonctionnerait pour le papier de format lettre) indépendamment de la taille des pixels, ou optez pour des largeurs en pourcentage, et basez la largeur de vos images sur la taille du papier.

Bonne chance...

Answer 3

Une solution au problème que j'ai trouvé est de définir la largeur en pouces. Pour l'instant, je n'ai testé/confirmé cette solution que dans Chrome. Cela a bien fonctionné pour l'usage que j'en faisais (impression d'une feuille 8,5 x 11).

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

Answer 4

Pour l'impression, je ne fixe aucune largeur et je supprime tous les obstacles qui empêchent votre mise en page d'impression d'avoir une largeur dynamique. En d'autres termes, si vous réduisez de plus en plus la fenêtre de votre navigateur, aucun contenu n'est coupé/caché mais le document s'allonge simplement. De cette manière, vous pouvez être sûr que le reste sera géré par l'imprimante/le créateur de PDF.

Qu'en est-il des éléments dont la largeur est fixe, comme les images ou les tableaux ?

Images

Les options auxquelles je pense :

• réduisez les images dans votre CSS d'impression à une largeur que vous pouvez supposer adaptée dans tous les cas, utilisez des pt et non des px (mais l'impression aura besoin de plus de points/unité de toute façon, donc cela ne devrait pas être un problème)
• exclure de l'impression

Tableaux

• supprimer la largeur fixe
• utilisez le format paysage si vous avez vraiment des tableaux avec beaucoup d'informations
• n'utilisez pas de tableaux pour la mise en page
• exclure de l'impression
• extraire le contenu, l'imprimer sous forme de paragraphes

http://www.intensivstation.ch/en/css/print/

ou tout autre résultat de google pour les combinaisons de : CSS, impression, média, mise en page

Answer 5

Une imprimante ne comprend pas les pixels, elle comprend les points (pt en CSS). La meilleure solution est d'écrire un CSS supplémentaire pour l'impression, avec toutes ses mesures en points.

Ensuite, dans votre code HTML, dans la section head, mettez :

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">