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

Question 1

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 ?

Question 2

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 ...

Question 3

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...

Question 4

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;
    }
}

Question 5

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?

Images

Options auxquelles je peux penser:

Réduisez les images dans votre CSS d'impression à une largeur que vous pouvez supposer qu'elle conviendra dans tous les cas, utilisez pt pas px (mais l'impression aura besoin de plus de points / unité de toute façon, donc cela ne devrait pas poser de problème)
exclure de l'impression

les tables

supprimer la largeur fixe
utilisez le paysage si vous avez vraiment des tableaux avec beaucoup d'informations
n'utilisez pas de tableaux à des fins de 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 google pour des combinaisons de: CSS, impression, média, mise en page

Question 6

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;
  } 
}

Question 7

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">

Question 8

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 ...

Answer 1

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 ?

Answer 2

3

au lieu d'utiliser la largeur en pixels, vous devriez utiliser width:autoce qui ajustera la largeur du contenu à la largeur du papier

Marko Vranjkovic

Answer 3

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 ...

Answer 4

Je voudrais juste ajouter un commentaire qui, au moment de cette réponse, FF et IE détenaient peut-être entre eux 90% de part des navigateurs utilisés (je trouve cela peu probable avec Google offrant du chrome à presque toutes les personnes qui ont cherché avec un autre navigateur dont imo est pour le moment un meilleur navigateur plus léger) mais il est peu probable qu'ils le fassent toujours car les tendances changent et une part de navigateur change souvent comme toute autre part de marché.

Chris

Answer 5

Cela répond à la question, même si c'est évidemment plus compliqué qu'une simple taille px.

rune711 le

Answer 6

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...

Answer 7

En fait, j'ai eu plus de facilité à créer une version PHP Image GD du matériel que je voulais imprimer (cartes postales, dépliants, etc.) que je venais de fournir des informations à partir d'une base de données et qui s'est reformatée en conséquence. J'ai juste gardé le rapport de pixels correct. Carte postale 4x6 (350 dpi) == 2135x1435 px

Michael

Answer 8

20

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;
    }
}

jMaison
la source

5

Vous ne prenez pas en compte les marges de la page. Ou la possibilité de formats de papier A4.

Blazemonger

1

C'était parfait pour moi, cela a tellement de sens.

leedotpang

@Blazemonger avec @media print, vous pouvez les définir. Vous pouvez définir size: letterou size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css

J.Ko

@ J.Ko Ce n'était pas le but; c'est l'utilisateur final qui peut utiliser du papier A4 ou Letter, et le concepteur CSS ne peut pas être certain de celui qui est disponible pour l'utilisateur.

Blazemonger

Answer 9

5

Vous ne prenez pas en compte les marges de la page. Ou la possibilité de formats de papier A4.

Blazemonger

Answer 10

1

C'était parfait pour moi, cela a tellement de sens.

leedotpang

Answer 11

@Blazemonger avec @media print, vous pouvez les définir. Vous pouvez définir size: letterou size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css

J.Ko

Answer 12

@ J.Ko Ce n'était pas le but; c'est l'utilisateur final qui peut utiliser du papier A4 ou Letter, et le concepteur CSS ne peut pas être certain de celui qui est disponible pour l'utilisateur.

Blazemonger

Answer 13

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?

Images

Options auxquelles je peux penser:

Réduisez les images dans votre CSS d'impression à une largeur que vous pouvez supposer qu'elle conviendra dans tous les cas, utilisez pt pas px (mais l'impression aura besoin de plus de points / unité de toute façon, donc cela ne devrait pas poser de problème)
exclure de l'impression

les tables

supprimer la largeur fixe
utilisez le paysage si vous avez vraiment des tableaux avec beaucoup d'informations
n'utilisez pas de tableaux à des fins de 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 google pour des combinaisons de: CSS, impression, média, mise en page

Answer 14

2

Mais qu'en est-il des éléments de largeur fixe tels que les images et les tableaux?

aemkei

Answer 15

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;
  } 
}

Answer 16

4

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">

ARemesal
la source

Mais les images nécessitent des attributs de largeur et de hauteur spécifiés en pixels. Je dois convertir les valeurs PT en pixels en fonction du DPI et de la dimension standard de l'imprimante.

aemkei

Ensuite, vous devez jouer avec les conteneurs d'images ... ou appliquer des essais et des erreurs;) Cependant, je pense que l'utilisation de deux fichiers CSS séparés, un pour l'écran et un autre pour l'impression, est une bonne pratique.

ARemesal

1

donnez au <img>tag un entourage <div>le div obtient la largeur une hauteur en pt et l'image obtientwidth:100%; height:100%;

Hafenkranich

Answer 17

Mais les images nécessitent des attributs de largeur et de hauteur spécifiés en pixels. Je dois convertir les valeurs PT en pixels en fonction du DPI et de la dimension standard de l'imprimante.

aemkei

Answer 18

Ensuite, vous devez jouer avec les conteneurs d'images ... ou appliquer des essais et des erreurs;) Cependant, je pense que l'utilisation de deux fichiers CSS séparés, un pour l'écran et un autre pour l'impression, est une bonne pratique.

ARemesal

Answer 19

1

donnez au <img>tag un entourage <div>le div obtient la largeur une hauteur en pt et l'image obtientwidth:100%; height:100%;

Hafenkranich

Answer 20

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 ...

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

Réponses:

Images

les tables