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

CSS width?

med2033 wrote on 2010-09-10:
The following code would be expected to occupy half the page, given 1-inch horizontal margins (the area between the margins being 6.5" on an 8.5x11 page).:

<html>
 <head>
 <style type="text/css">
   body {
     margin: 0px;
     border: 1px solid black;
     padding: 0px;
     width: 234pt; /* 3.25 inches at 72 pts per inch */
   }
   p {
     line-height: 7pt;
     font-size: 5pt;
     margin: 0px;
     border: 0px;
     padding: 0px;
   }
 </style>
 </head>
 <body>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </body>
</html>


Alas, it extends beyond the middle of the page. Any idea why? (I suspect it might be looking at the wrong value. I'm using a predefined Page Size (Letter), but the (disabled) Page Width field shows 9.8 inches, which looks about right for what is actually being rendered).

Thanks for your help.
Mike
support wrote on 2010-09-10:
To get the desired result, set page size to letter, horizontal margins to 1 inch, and change body width from 234pt to 175.5pt.

Here is an explanation:

Browsers render HTML at 96 CSS pixels per inch whereas PDF uses 72 DPI.

So, 72 pts in HTML is 96/72=1.333 inch in PDF.

Similarly, 1 inch in PDF is 72/96=0.75 inch i.e. 54 pts in HTML.

So, to get 3.25'' in PDF you must specify 3.25 * 54 = 175.5 pts in HTML.
med2033 wrote on 2010-09-10:
Aha. This also explains why 10 pt type seems much larger than it should when printed.

Since you know this, why doesn't the conversion just handle it automagically?
support wrote on 2010-09-11:
We actually tried that but it seems that the 96dpi to 72dpi conversion degrades the visual appearance of PDFs on the screen.
SearchPath wrote on 2010-12-13:
support Wrote:
-------------------------------------------------------
> To get the desired result, set page size to
> letter, horizontal margins to 1 inch, and change
> body width from 234pt to 175.5pt.
>
> Here is an explanation:
>
> Browsers render HTML at 96 CSS pixels per inch
> whereas PDF uses 72 DPI.
>
> So, 72 pts in HTML is 96/72=1.333 inch in PDF.
>
> Similarly, 1 inch in PDF is 72/96=0.75 inch i.e.
> 54 pts in HTML.
>
> So, to get 3.25'' in PDF you must specify 3.25 *
> 54 = 175.5 pts in HTML.

I was just wondering if my equations below are correct...

PDF Settings
Width: 8.3inc
Height: 11.7
Margins: None

(96 / 72) = 1 pdf inch
(96 / 72) * 11.7 = 11.7 pdf inches

((96 / 72) * 11.7) * 96 = 1497.2256 (CSS Pixels Height)
((96 / 72) * 8.3) * 96 = 1 062.4 (CSS Pixels Width)


Obviously if you have got margins set then you will need to convert both the pdf page width or height and horizontal or vertical margin into the same unit of mesurement. Then subtract the margin width from the pdf page size (width or height) and then use the equations above. See example below...

PDF Settings
Width: 8.3inc
Height: 11.7inc
Margins: 30mm Horizontal, 25mm Vertical

In this example we will calculate the page height...

1 inch is 25.4 mm
Convert 30mm into inches

(30 / 25.4) = magrinWidth


But do not forget that setting horizontal margin will give a header and footer margin, vertical will set left and right margins. Therefore we need to multiply the result by two to get the total margin width for that page axis.

((30 * 2) / 25.4) = magrinWidth


Now that we have converted the total margin width into the same units as the page height we can now use our original equation to work out the total page height in CSS pixels.

((CssInch / pdfDpi) * (page height - totalMarginWidth)) * CssInch = TotalCssPixelHeight

((96 / 72) * (11.7 - ((30 * 2) / 25.4)) * 96 = 1195.2378 (Css Pixels Height)


I have been working on a bulletin to pdf system where the bulletin blocks are dynamic in hight, so I use javascript to calculate the gaps (in pixels) between blocks (where a invisible block is added) to prevent blocks being cut in half, and to ensure that the footer is always flush with the bottom of the page.

It is working pretty good but that was based of a estimate I made for the total css pixels height for the PDF. When I saw this page I thought that I could work out the propert widths and heights of a page based on the information read in the quoted bit of this post.

I was just wondering if you help me to ensure that I have got the correct equations and if so I would suggest to create a section on the API page with this information "Calculting Css Pixels For PDF Dimensions" so that others can use this very useful information.

Many thanks in advance,

Shane Simpkins
support wrote on 2010-12-13:
Shane,

simply put, 1 inch in PDF is 72px or 54pt in HTML.

So, to get [8.3', 11.7'] in PDF use [598px, 842px] or [448.2pt, 631.8pt] in HTML.

A 25mm margin in PDF is 71px or 53.1pt in HTML.

Hope this helps. You are right that it probably deserves to be mentioned in the docs.
SearchPath wrote on 2010-12-16:
I think I done some major over thinking then, it is as simple as multiplying the height in inches by 72 to get the pixel height. Yet I was thinking of some very complicated equations to work it all out.

Quick funny when I look at it!

Many thanks for your quick reply, and I definately think it will make a good addition to the api pages :P

Thanks,

Shane Simpkins