To ensure the proper rendering of dimensions and CSS units in PDF, use the
This article explains why the usage of any units other than
pt—leads to unpredictable results.
To draw the DOM, the module inspects the computed styles of the elements. At this stage, all dimensions are converted to pixels. For example, if you take
<div style='width: 1cm'> and if the dots-per-inch (DPI) setting is correctly displayed, this element is rendered by the browser on the screen as being
1cm wide. However, when you query the width in its computed style, you get back a
37.78125px value. This value might vary depending on the display.
For simplicity and because 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 in PDF with a length of
37.78125pt. The conversion rules for these units are:
1 pt = 1/72 in(points to inches)
1 in = 2.54 cm(inches to centimeters)
If you put them together, you get the
37.78125 pt = 37.78125 / 72 in = 1.33 cm result.
This means that you can specify you need 1cm but the actual size in PDF is 1.33cm, which is different from the required dimension. To get a predictable layout in PDF, apply pixels to set all your dimensions. To calculate the values, use the following rules:
N cm = N * 28.346 px(72 / 2.54 ≈ 28.346)
N in = N * 72 px