web-dev-qa-db-fra.com

Marge lors de l'impression d'une page HTML

J'utilise une feuille de style distincte pour l'impression. Est-il possible de définir les marges droite et gauche dans la feuille de style qui définissent la marge d'impression (c'est-à-dire la marge sur le papier).

Merci.

htmlcssprintingstylesheet
121
kobra

Vous devez utiliser cm ou mm comme unité lorsque vous spécifiez pour l'impression. Si vous utilisez des pixels, le navigateur le convertira en quelque chose de similaire à ce à quoi il ressemble à l’écran. L'utilisation de cm ou mm assurera un format uniforme sur le papier.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Pour les tailles de police, utilisez pt pour le support d'impression.

Notez que le réglage de la marge sur le corps en style css ne ( pas ajustera la marge dans le pilote d’imprimante qui définit la zone imprimable de l’imprimante, ou le contrôle de la marge par le navigateur (peut être réglable dans l'aperçu avant impression sur certains navigateurs) ... Il ne restera plus qu'à définir la marge sur le document à l'intérieur de la zone imprimable.

Vous devez également savoir que IE7 ++ ajuste automatiquement la taille pour l'adapter au mieux, et rend tout faux, même si vous utilisez cm ou mm. Pour annuler ce comportement, l'utilisateur doit sélectionner "Aperçu avant impression", puis définir le format d'impression sur 100% (la valeur par défaut est Shrink To Fit).

Une meilleure option pour un contrôle total sur les marges imprimées consiste à utiliser la directive @page pour définir la marge de papier, ce qui affectera la marge sur le papier en dehors de l'élément de corps html, qui est normalement contrôlé par le navigateur. Voir http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Ceci fonctionne actuellement dans tous les principaux navigateurs sauf Safari.
Dans Internet Explorer, la marge est en fait définie sur cette valeur dans les paramètres de cette impression. Si vous effectuez Aperçu, vous obtiendrez cette valeur par défaut, mais l'utilisateur peut la modifier dans l'aperçu.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
}

Réponse associée: Désactivation des options d'impression du navigateur (en-têtes, pieds de page, marges) à partir de la page?

220
awe

Tout d'abord, j'essaie de forcer tous mes utilisateurs à utiliser Chrome lors de l'impression car d'autres navigateurs créent des présentations différentes.

Une réponse de cette question recommande:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Cependant, j'ai fini par utiliser ce CSS pour toutes mes pages à imprimer:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}


Cas particulier: longues tables

Lorsque j'avais besoin d'imprimer un tableau sur plusieurs pages, le margin:0 avec le @page entraînait des bords saillants:

bleeding edges

Je pourrais résoudre ceci grâce à cette réponse avec:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

De plus, définir les marges supérieure-inférieure pour @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Résultat:

solved bleeding edges

Je préférerais une solution concise et compatible avec tous les navigateurs. Pour le moment, j'espère que les informations ci-dessus peuvent aider certains développeurs avec des problèmes similaires.

25
Kai Noack

Personnellement, je suggérerais d'utiliser une unité de mesure différente de px. Je ne pense pas que les pixels aient beaucoup de pertinence en termes d'impression; idéalement, vous utiliseriez:

  • point (pt)
  • centimètre (cm)

Je suis sûr qu'il y en a d'autres, et un excellent article sur print-css peut être trouvé ici: Going to Print , par Eric Meyer .

9
David Thomas

Mise à jour, solution simple

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Ancienne solution

Créez une section avec chaque page et utilisez le code ci-dessous pour ajuster les marges, la hauteur et la largeur.

Si vous imprimez au format A4.

Puis utilisateur

Taille: 8,27 pouces et 11,69 pouces

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
}

créez ensuite une div avec tout votre contenu.

<div class="Section1"> 
    type your content here... 
</div>
9
Pir Abdul

Je recommande également le rapport pt/cm ou mm, car il est plus précis. De plus, je ne parviens pas à faire fonctionner @page dans Chrome (version 30.0.1599.69 m). Il ignore tout ce que je mets pour les marges, grandes ou petites. Mais, vous pouvez le faire fonctionner avec des marges de corps sur le document, bizarre.

1
ironarm

Si vous connaissez le format de papier cible, vous pouvez placer votre contenu dans une DIV avec ce format spécifique et ajouter une marge à cette DIV pour simuler la marge d'impression. Malheureusement, je ne pense pas que vous ayez un contrôle supplémentaire sur la fonctionnalité d’impression, il vous suffit simplement d’afficher la boîte de dialogue Imprimer.

0
jonjbar