web-dev-qa-db-fra.com

Largeur de sécurité en pixels pour l'impression de pages Web?

Quelle est la largeur de sécurité en pixels pour imprimer une page Web?

Ma page contient de grandes images et je veux m'assurer qu'elles ne seront pas coupées lors de l'impression.

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

cssprinting
82
aemkei

Quant à une vraie "réponse universelle", je ne peux pas en fournir une. Je peux cependant fournir 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 beaucoup de suggestions, y compris 675, mais après avoir testé cela moi-même, c'est 670 que j'ai trouvé.

Tous les DPI, les problèmes de marge, les 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), ainsi que SET FULL SIZE TO 100% plutôt que le paramètre par défaut "Réduire au format" , tout tient sur la page sans être coupé à cette largeur.

Si j'envoie un e-mail HTML à moi-même et que je le reçois avec Windows Live Mail 2011 (ce que Outlook Express est devenu), j'imprime la page à une largeur de 670 - tout fonctionne à nouveau. Cela est vrai si je l'envoie sur une copie papier ou dans 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 tronquée. Quand j'ai réduit à 670, tout correspond parfaitement.

Pour ce qui est de la définition de la largeur, je viens d’utiliser une table HTML "wrapper" primitive et de définir sa largeur à 670.

Si vous pouvez dicter le logiciel de l'utilisateur final, cela peut être simple. Si vous ne pouvez pas (comme c'est généralement le cas bien entendu), vous pouvez tester des informations telles que les navigateurs qu'ils utilisent, etc. et coder en dur les solutions pour les solutions les plus importantes. Entre IE et FF, vous couvrirez littéralement environ 90% des internautes. Introduisez un autre code pour "tout le monde" qui semble généralement fonctionner et appelez-le un jour ...

85
Jonathan

Ce n'est pas aussi simple que ça en a l'air. Je viens de tomber sur une question similaire, et voici ce que j’ai eu: Tout d’abord, un peu de contexte sur wikipedia .

Ensuite, en CSS, pour le papier, ils ont pt, ce 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 indiqué dans l'article de Wikipédia), 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 float, les navigateurs basés sur Gecko couperont vos images au milieu de la page, même si vous utilisez un saut de page: évitez ; sur vos images (voir ici, dans le système de suivi des bogues de Mozilla ).

Il y a (beaucoup) plus d'informations sur l'impression à partir d'un navigateur dans cet article sur A List Apart .

De plus, vous devez traiter la largeur "Réduire au format" dans l'aperçu avant impression, ainsi que les différents formats et orientations de papier.

Donc, soit vous venez de trouver une bonne taille d’image en pouces, je veux dire des points, (7.1 "* 72 = 511.2 alors width: 511pt; fonctionnerait pour le papier de format lettre), quelle que soit la taille du pixel, ou utilisera des largeurs en pourcentage de largeur et basera les largeurs de votre image sur le format du papier.

Bonne chance...

44
Gyuri

Une solution au problème que j'ai trouvé consistait simplement à définir la largeur en pouces. Jusqu'à présent, j'ai seulement testé/confirmé que cela fonctionnait sous Chrome. Cela a bien fonctionné pour ce pour quoi je l’utilisais (pour imprimer une feuille de 8,5 x 11)

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

Pour l’impression, je ne règle aucune largeur et n’élimine aucun obstacle empêchant votre mise en page d’avoir une largeur dynamique. Cela signifie que si vous réduisez la fenêtre de votre navigateur, aucun contenu n'est coupé/masqué, mais le document ne fait que s'allonger. De cette manière, vous pouvez être sûr que le reste sera traité par l’imprimeur/pdf-creator.

Qu'en est-il des éléments de largeur fixe tels que des images ou des tableaux?

Images

Les options auxquelles je peux penser:

  • redimensionnez les images dans votre CSS d'impression à une largeur que vous pouvez supposer adaptée à tous les cas, utilisez pt pas px (mais l'impression nécessitera de toute façon plus de points/unité, ce qui ne devrait donc pas poser de problème)
  • exclure d'être imprimé

Les tables

  • enlever la largeur fixe
  • utilisez paysage si vous avez vraiment des tables avec beaucoup d'informations
  • n'utilisez pas de tableaux pour la mise en page
  • exclure d'être imprimé
  • extraire le contenu, l'imprimer sous forme de paragraphes

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

ou tout autre résultat Google pour les combinaisons de: CSS, print, media, layout

9
markus

Une solution pour éviter que les images ne soient coupées lors de l'impression dans une page Web consiste à appliquer la règle CSS suivante:

@media print { 
  img { 
    max-width:100% !important;
  } 
}
5
dontcallmedom

Une imprimante ne comprend pas les pixels, elle comprend les points (pt en CSS). La meilleure solution consiste à é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">
4
ARemesal

Je doute qu’il en existe un ... Cela dépend du navigateur, de l’imprimante (physique max dpi) et de son pilote, du format de papier que vous indiquez (et j’aimerais aussi imprimer sur du papier B5 ...), des paramètres ( paysage ou portrait?), plus vous pouvez souvent changer l’échelle (pourcentage), etc.
Laissez les utilisateurs ajuster leurs paramètres ...

0
PhiLho