Marge lors de l'impression de la page HTML


141

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

Merci.

Réponses:


247

Vous devez utiliser cmou mmcomme unité lorsque vous spécifiez pour l'impression. L'utilisation de pixels amènera le navigateur à le traduire en quelque chose de similaire à ce à quoi il ressemble à l'écran. L'utilisation de cmou mmgarantira une taille uniforme sur le papier.

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

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

Notez que définir la marge sur le corps en style css n'ajustera pas la marge dans le pilote d'imprimante qui définit la zone imprimable de l'imprimante, ou la marge contrôlée par le navigateur (peut être ajustable en aperçu avant impression sur certains navigateurs) ... définira simplement la marge sur le document à l'intérieur de la zone imprimable.

Vous devez également savoir que IE7 ++ ajuste automatiquement la taille pour qu'elle corresponde au mieux et que tout soit faux, même si vous utilisez cmou mm. Pour remplacer ce comportement, l'utilisateur doit sélectionner «Aperçu avant impression», puis définir la taille d'impression sur 100%(la valeur par défaut est Shrink To Fit).

Une meilleure option pour un contrôle total des marges imprimées consiste à utiliser la @pagedirective pour définir la marge du papier, ce qui affectera la marge du 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 .
Cela fonctionne actuellement dans tous les principaux navigateurs, à l'exception de Safari.
Dans Internet Explorer, la marge est en fait définie sur cette valeur dans les paramètres de cette impression, et si vous faites Aperçu, vous l'obtiendrez 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ésactiver les options d'impression du navigateur (en-têtes, pieds de page, marges) à partir de la page?


3
Cela fonctionne maintenant dans Chrome 18 et IE9 (n'a pas testé les versions antérieures). Ne fonctionne toujours pas dans Firefox 12, mais vous pouvez faire une détection côté serveur et ajouter une classe de corps, <body class="firefox">donc dans votre css, vous pouvez le faire body.firefox {margin: 0mm; padding: 0.25in;}, c'est en fait une marge de 0,75 pouce car Firefox ajoute déjà 0,5 pouce. Cela devrait fonctionner tant que vous avez besoin de marges> = 0,5 pouce.
MrFusion

7
+1 pour @page! C'est exactement ce dont j'avais besoin, puisque j'imprime plusieurs pages.
frappe aérienne du

2
Il fonctionne désormais également avec Firefox. Puisque Firefox a de bonnes routines de mise à jour automatique, cela ne devrait plus être un problème que nous devons résoudre. J'ai testé sur IE, Opera, Chrome, Firefox et Safari. Le seul navigateur avec lequel il ne fonctionne pas actuellement est Safari (version 5.1.7 pour Windows). Je n'ai pas testé sur Mac.
awe

1
Cela n'ajoute que la marge supérieure de la première page. Meilleure solution pour définir les mêmes marges sur toutes les pages: stackoverflow.com/questions/37033766/…
besimple

@besimple: voir l'exemple du bas. L'utilisation de la directive «@ page» ajoutera la marge sur chaque page.
awe le

42

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

Une réponse à 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: Tables longues

Lorsque j'avais besoin d'imprimer un tableau sur plusieurs pages, le margin:0avec le @pagemenait à des saignements:

bords saignants

Je pourrais résoudre cela 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 haut-bas pour @page:

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

Résultat:

bord de saignement résolu

Je préférerais une solution concise et compatible avec tous les navigateurs. Pour l'instant, j'espère que les informations ci-dessus pourront aider certains développeurs à résoudre des problèmes similaires.


1
Votre solution s'est avérée inestimable lorsque vous travaillez avec l'impression de rapports à l'aide d'ERPNext. J'ai pu développer facilement mes propres formats d'impression personnalisés et ces pointeurs m'ont énormément aidé!
Tropicalrambler

10

Solution simple et mise à jour

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

puis créez un div avec tout votre contenu.

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

Cela ne fonctionne pas pour moi dans Chrome ou FF. Aussi, class=Section1devrait être class="Section1".
nu everest

C'est une solution plus simple: stackoverflow.com/questions/37033766/…
besimple

9

Je suggérerais personnellement d'utiliser une unité de mesure différente de celle px. Je ne pense pas que les pixels aient beaucoup d'importance 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 le print-css peut être trouvé ici: Going to Print , par Eric Meyer .


1
Vous avez raison, cela pxn'a pas beaucoup d'importance à imprimer. Mais les navigateurs "traduisent" les unités de pixels de sorte que cela ressemble à ce à quoi il ressemble à l'écran. Il n'utilise pas les "points de résolution d'imprimante" comme pixels (Dieu merci ...).
awe

1

Je recommande également pt par rapport au cm ou au mm car c'est plus précis. De plus, je ne peux 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 les marges du corps sur le document, bizarre.


0

Si vous connaissez le format de papier cible, vous pouvez placer votre contenu dans un DIV avec cette taille spécifique et ajouter une marge à ce 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 à part simplement afficher la boîte de dialogue d'impression.


Merci. N'est-il pas possible de spécifier laisser x pixels à gauche et à droite quel que soit le format du papier. Regards
kobra

1
Je suppose que cela pourrait être possible si vous définissez la taille de votre DIV parent à 100% et y ajoutez une marge de pixels ax.
jonjbar
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.