Quelle est la largeur sûre en pixels pour imprimer une page Web?
Ma page comprend de grandes images et je veux m'assurer qu'elles ne seront pas coupées lors de l'impression.
Je connais les différentes marges du navigateur et les formats de papier US Letter / DIN A4. Nous avons donc obtenu une taille de lettre standard et des valeurs DPI par défaut. Mais puis-je les convertir en valeurs de pixels à spécifier dans l' widthattribut de l'image ?
Réponses:
Quant à une vraie «réponse universelle», je ne peux pas en fournir une. Je peux cependant apporter une réponse simple et définitive à certains détails ...
670 PIXELS
Au moins, cela semble être une réponse sûre pour les produits Microsoft. J'ai lu de nombreuses suggestions, dont 675, mais après avoir testé cela moi-même, 670 est ce que j'ai trouvé.
Mis à part tous les DPI, les problèmes de marge, les différences matérielles, 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 RÉGLEZ LA TAILLE D'IMPRESSION À 100% plutôt que la valeur par défaut "Réduire pour s'adapter" , tout tient sur la page sans être coupé à cette largeur.
Si je m'envoie un e-mail HTML à moi-même et que je le reçois avec Windows Live Mail 2011 (ce qu'est devenu Outlook Express) et que j'imprime la page à 670 de largeur - encore une fois, tout convient. Cela est vrai si je l'envoie vers 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. Quand j'ai réduit à 670, tout allait parfaitement.
Quant à la façon dont j'ai défini la largeur - j'ai juste utilisé une table html «wrapper» primitive et défini sa largeur à 670.
Si vous pouvez dicter le logiciel de l'utilisateur final, ces questions peuvent être simples. Si vous ne pouvez pas (comme c'est généralement le cas bien sûr), vous pouvez tester des détails tels que 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 internautes. Mettez un autre code pour «tout le monde» qui semble généralement fonctionner et appelez-le un jour ...
Ce n'est pas aussi simple que l'apparence. Je viens de rencontrer une question similaire, et voici ce que j'ai obtenu: Premièrement, un petit historique sur wikipedia .
Ensuite, en CSS, pour le papier, ils ont pt, qui est un point, ou 1/72 de 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é sur l'article wikipedia), puis le convertir en pouces, puis le convertir en points (divisez 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 le saut de page à l'intérieur: éviter ; sur vos images (voir ici, dans le système de suivi des bogues de Mozilla ).
Il y a (beaucoup) plus sur l'impression à partir d'un navigateur dans cet article sur A List Apart .
De plus, vous devez gérer la largeur "Réduire pour s'adapter" dans l'aperçu avant impression, ainsi que les différentes tailles et orientations de papier.
Donc, soit vous déterminez simplement une bonne taille d'image en pouces, je veux dire des points, (7,1 "* 72 = 511,2, width: 511pt;cela fonctionnerait pour le papier au format lettre) quelles que soient les tailles de pixels, ou choisissez les largeurs en pourcentage de largeur et basez vos largeurs d'image sur le format du papier.
Bonne chance...
Une solution au problème que j'ai trouvé était de simplement définir la largeur en pouces. Jusqu'à présent, je n'ai testé / confirmé que cela fonctionnant dans Chrome. Cela a bien fonctionné pour ce que je l'utilisais (pour imprimer une feuille de 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, vous pouvez les définir. Vous pouvez définir size: letterou size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Pour l'impression, je ne règle aucune largeur et je supprime les obstacles qui empêchent votre mise en page d'avoir une largeur dynamique. Cela signifie que si vous réduisez de plus en plus la fenêtre de votre navigateur, aucun contenu n'est coupé / masqué, mais le document s'allonge simplement. Ainsi, vous pouvez être sûr que le reste sera géré par l'imprimante / pdf-creator.
Qu'en est-il des éléments de largeur fixe tels que des images ou des tableaux?
Options auxquelles je peux penser:
http://www.intensivstation.ch/en/css/print/
ou tout autre résultat google pour des combinaisons de: CSS, impression, média, mise en page
Une solution pour s'assurer que les images ne sont pas coupées lors de l'impression dans une page Web est d'avoir la règle CSS suivante:
@media print {
img {
max-width:100% !important;
}
}
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">
<img>tag un entourage <div>le div obtient la largeur une hauteur en pt et l'image obtientwidth:100%; height:100%;
Je doute qu'il y en ait un ... Cela dépend du navigateur, de l'imprimante (dpi max physique) et de son pilote, du format du papier comme vous le faites remarquer (et je pourrais peut-être aussi imprimer sur du papier B5 ...), des paramètres ( paysage ou portrait?), et vous pouvez souvent changer l'échelle (pourcentage), etc.
Laissez les utilisateurs modifier leurs paramètres ...
width:autoce qui ajustera la largeur du contenu à la largeur du papier