我们正在设计一个系统来生成标签表,它输出 HTML/CSS 文件,然后打算打印在匹配的标签纸上。
这个问题本质上涉及一些简单的算术(加法和乘法),以将标签网格放置在页面上,并具有相应的边距和偏移量。
最小的例子
假设我们有一个 4x12 网格标签的最小示例,尺寸为 21.2x45.7mm:
这是打印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;
}
这是(无聊而冗长的)相应的 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>
在这种情况下,页面为 210 毫米宽,这与 4label
行的长度完全匹配:
9.9 (left margin) + 4*45.7 (label width) + 3*2.4 (column gap) + 10.1 (right margin) = 210
然而,如果上述内容在Firefox或Chrome网络浏览器中打开然后打印(使用默认边距和 100% 缩放),每行仅适合 3 label
div
。
问题
是否有一些我们没有考虑到占用空间的元素?
或者这是与布局引擎的数值精度相关的固有限制?
有没有办法修复这个代码,所以布局是准确的?