Units and measurement / mm, cm, in, pt
Which CSS units should a PDF use
Physical units mean a real measurement in the output. A millimetre in a PDF is a millimetre on paper, which is not true of a millimetre on a screen.
What it is for
This is the one context where physical units are correct rather than a mistake. The page is a physical object of known dimensions, and expressing the layout in the same units the paper is described in removes a conversion from the process.
Support: Works everywhere
All of them work. 1in is 96px by definition, 1pt is 1/72in, and 1mm is 96/25.4 px, so the conversions are exact rather than approximate.
The syntax
Written the way it would appear in a document stylesheet, using mm, cm, in, pt as intended.
@page {
size: A4; /* 210mm x 297mm */
margin: 18mm 16mm;
}
.document {
width: 178mm; /* the content box after those margins */
font-size: 10.5pt; /* points, as type has been measured for centuries */
line-height: 1.45;
}
.line-item {
padding: 2mm 0;
border-bottom: 0.25mm solid #ddd;
}The mistake people make
Mixing pixels and millimetres in the same layout. It works arithmetically and makes the file impossible to reason about, because half the numbers relate to the paper and half do not.
Frequently asked
Does mm, cm, in, pt work when generating a PDF?
Works everywhere. All of them work. 1in is 96px by definition, 1pt is 1/72in, and 1mm is 96/25.4 px, so the conversions are exact rather than approximate.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How many pixels wide is an A4 page in a PDF
px in a paged context. Works everywhere.
What does 100vh mean in a PDF
vh and vw. Works in a browser-based render.
What DPI should images be for a PDF
resolution. Works everywhere.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to force a page break before an element in a PDF
break-before. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.