We are designing a system to generate label-sheets, which outputs HTML/CSS files which are then intended to be printed on matching label-paper.
This problem inherently involves some simple arithmetic (addition and multiplication), to place the grid of labels on the page, with corresponding margins and offsets.
Minimal example
Let's say we have this minimal example for a 4x12 grid of labels measuring 21.2x45.7mm:
Here is the print CSS:
@page {
/*size: A4;*/
size: 210mm 297mm;
margin-left: 9.9mm;
margin-right: 10.1mm;
margin-top: 20.7mm;
margin-bottom: 21.9mm;
}
html {
-webkit-print-color-adjust: exact;
}
body {
margin: 0px;
}
#content {
display: flex;
column-gap: 2.4mm;
flex-wrap: wrap;
}
.label {
width: 45.7mm;
height: 21.2mm;
}
And here is the (boring and lengthy) corresponding HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="print.css">
</head>
<body>
<div id="content">
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: silver;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
<div class="label" style="background: gold;"></div>
</div>
</body>
</html>
In this situation, the page is 210mm wide, and this exactly matches the length of a 4 label row:
9.9 (left margin) + 4*45.7 (label width) + 3*2.4 (column gap) + 10.1 (right margin) = 210
Yet, if the above content is opened in either Firefox or Chrome web browsers then printed (with default margins and 100% scaling), each line only fits 3 label div.
Questions
Is there some element taking space we did not account for?
or is this an inherent limitation related to numeric precision of layout engine?
Is there a way to fix this code, so the lay out is exact?