This is an archived forum post. The information may be outdated. Contact us if you have any questions.

PDF Margins Pixel size

moolastreet wrote on 2011-10-14:
Hello,

I'm creating a US Letter size PDF...

$client->setPageWidth('8.5in');
$client->setPageHeight('11in');

I'm wanting to set a margin that will work on 99% of printers, so I'm using 0.25in (which I read was right).

$client->setHorizontalMargin('0.25in');
$client->setVerticalMargin('0.25in');

Please correct me if that margin is too small/too big.

Though, I don't know whether the margin is included in the page width/height. Is the page width now 8.25in, 8.5in, or 8.75in?

I'm splitting the page into 4 sections, and I want to replicate the margin around each of the blocks. I'm assuming that a margin of 0.25in is 18px (72px / 4). Is 18px right?

In block 1 (top left) I'm adding a right and bottom margin of 18px. In block 2 (top right) I'm adding a left and bottom margin of 18px. In block 3 (bottom left) I'm adding a right and top margin of 18px. In block 4 (bottom right) I'm adding a left and top margin of 18px.

I'm using a table to split the page into 4, and I'm wrapping it in a div (set to 2550px x 3300px, though this is obviously depending on whether the page width includes the margin etc.). Is using a table the best way to split this into 4?

As you can see, I've got a lot of questions, is anyone able to answer them?

Thanks,

Chris
support wrote on 2011-10-14:
Hi Chris,

The 0.25in margin should be fine. It is not included in the page width/height.

It is more convenient to use points instead of pixels so lets use:
page width: 8.5in = 612pt
page height: 11in = 792pt
margin: .25in = 18pt

wrapping div width = 612pt - 2 * 18pt = 576pt
wrapping div height = 792pt - 2 * 18pt = 756pt

Here is a sample HTML code that should produce the layout you require (check the attached PDF):
<html>
  <head>
    <style>
      body { margin: 0; padding: 0; }
      table { width: 100%; height: 100%; border: none; }
      td { width: 50%; }
      #page-wrapper { width: 576pt; height: 756pt; }
      td div { background-color: #eee; height: 100%;} 
      td.section-1 { padding: 0 18pt 18pt 0; }
      td.section-2 { padding: 0 0 18pt 18pt; }
      td.section-3 { padding: 18pt 18pt 0 0; }
      td.section-4 { padding: 18pt 0 0 18pt; }
    </style>
  </head>
  
  <body>
    <div id="page-wrapper">
    <table cellspacing="0">
      <tr>
        <td class="section-1">
          <div>Section 1</div>
        </td>
        <td class="section-2">
          <div>Section 2</div>
        </td>
      </tr>
      <tr>
        <td class="section-3">
          <div>Section 3</div>
        </td>
        <td class="section-4">
          <div>Section 4</div>
        </td>
      </tr>
    </table>
    </div>
  </body>
  </html>


Is this helpful?
moolastreet wrote on 2011-10-15:
This has been so helpful! Thank you for your fast and helpful reply. We're loving PDFCrowd, and especially the webkit css3 support! Hands down better than the competition!