7

I'm trying to create styles that match label sheets exactly. My general strategy is to set the body to have no margin, set the page size exactly, and have an inner div per page print_layout that also matches 8½″ × 11″ (in this case).

The problem is that setting the page margin to 0 doesn't actually set it to precisely zero.

@page {
    size: 8.5in 11in;
    margin: 0;
}

My understanding after looking around a bit is that you can't truly set a page margin to zero and expect the results to be zero. What I'd like is:

1) A way in javascript to get the minimum print margin so I can compensate with precise negative margin's and padding of my inner styles.

2) A way to override this setting so I can get a true zero margin (note: I have no need to print edge-to-edge, I just need the styling to be sized to the page)

3) Some other solution I'm not thinking of yet.

Below is a screen capture of the print preview in edge-dev. The margin is set to zero like indicated above. I've changed the background of my inner div and turned on the background graphics settings to show visually the size of the body (and inner div).

enter image description here

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
xoorath
  • 425
  • 2
  • 15
  • Have you tried a browser other than Edge? I've gotten this to work in other browsers just fine. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12506010-add-print-margin-setting-of-none-to-correctly-prin – Kerri Sep 06 '19 at 20:38
  • Might want to read https://stackoverflow.com/a/1542543/2813263 and other answers on that question in case it helps. – Domino Sep 09 '19 at 14:38
  • 1
    Maybe something's overriding your initial rules? Try `margin: 0 !important;padding:0 !important;` – weegee Sep 09 '19 at 14:39
  • Having suffered similar issues, the problem is that each separate browser has its own "default" margin and interpretation of page size, with overflow (and other) measurement system's in place that make it only an approximation. I have found that a Safari browser and a Mozilla browser print different sizes for exactly the same CSS, also that in some situations the print-preview is not always the same as what is actually printed - often due to "smarter" printer interfaces understanding you don't want the margin passed by the browser and ignoring it. Either offset the margin or change browser. – Martin Sep 09 '19 at 14:43
  • Also CSS real world unit sizes are [notoriously](https://www.w3.org/Style/Examples/007/units.en.html) [unreliable](https://stackoverflow.com/questions/37791498/css-inch-mm-measurements-not-accurate) – Martin Sep 09 '19 at 14:44
  • @Martin Not for print – jhpratt Sep 09 '19 at 14:51
  • 1
    This doesn't really answer your question, but if you really want consistent control across multiple browsers/printers, your best bet is probably to generate a PDF instead. – Michael Mior Sep 09 '19 at 14:57

4 Answers4

0

try 

@page{
margin-top: -10px;
margin-right: -10px;
}

instead of margin:0;

Remy Baas
  • 1
  • 3
0

Your style could be overwritten, try using margin:0 !important or maybe you are having caching issues.

Martin
  • 22,212
  • 11
  • 70
  • 132
Ozgur O.
  • 97
  • 9
0

  1. Measure the print margins by hand with a ruler as accurately as you can, or look up the print margins of your printer.

  2. Set the page size to the paper size (including print margins).

  3. Use the following styling:

CSS:

@page {
    width:  <paper width>;
    height: <paper height>;
    box-sizing: border-box;
    padding: <print margins>;
}

border-box will maintain the element width exactly as the padding is subtracted from its element's content width. This will cover your print margin without changing the size of your page element allowing you to exactly layout elements as they will appear on the page.

EDIT: Make sure you print to 100% of the page size. Some printing software might adjust for print margins, but from your question it sounds like your printing software does not.

Jochem Kuijpers
  • 1,770
  • 3
  • 17
  • 34
0

I don't know if this works for everybody, but I was able to use css transforms to scale the body slightly larger so that it takes up more marginal space.

Nathan
  • 96
  • 7