To ensure the proper rendering of dimensions and CSS units in PDF, use the
The usage of
pt, or any other than
px leads to unpredictable results. This section explains this counter-intuitive fact.
To draw the DOM, you inspect the computed styles of the elements and at that stage all dimensions are converted to pixels. For example, look at a
<div style='width: 1cm'>. Assuming a correct display of the dots-per-inch (DPI) setting, this element has to be rendered by the browser on screen as being
1cm wide. When you query the width in its computed style, however, you get back
37.78125px. Note that this may vary depending on the display.
For simplicity, and since the computed style yields back pixels, the PDF generator keeps a 1:1 mapping between the screen pixels and the default PDF unit, which is the typographic point (
pt). This means that the same element will be rendered to PDF with a length of
37.78125pt. Here are the conversion rules for these units:
1 pt = 1/72 in(points to inches)
1 in = 2.54 cm(inches to centimeters)
If you put them together, you get:
37.78125 pt = 37.78125/72 in = 2.54 * 37.78125/72 cm = 1.33 cm
So, you specified you want 1cm but the actual size on PDF is 1.33cm which is quite a difference.
In conclusion, to get a predictable layout in PDF, apply pixels to set all your dimensions. Use the following rules to calculate the values:
N cm = N * 72/2.54 px
N in = N * 72 px
An exception to this are the
margin options that you pass to
drawDOM. It is safe to use any units there since they have nothing to do with CSS or the display resolution.