Css 边框小于 4px @300dpi 使用 wkhtmltopdf

Question

我正在生成一个自动填充的 PDF，它是从给我的 inDesign 布局中克隆而来的。此布局使用表格，表格边框为 0.5pt。使用 wkhtmltopdf 时，这些边框无法正确呈现，因为 webkit 不希望线条细于 0.8pt/1px。

我尝试使用变通方法，例如 0.8px（屏幕上 100% 时不显示，正确高度为 400%），直接 0.5pt，或使用 1px 框阴影，none 这似乎给我的厚度是正确的，因为低于 1px 或低于 0.8pt 的线没有呈现到我的 PDF 文件中，而 1px 的框阴影给我同样的问题。

编辑：我用来生成 PDF 的命令：wkhtmltopdf.exe -T 0 -B 0 -L 0 -R 0 --dpi 300 --disable-smart-shrinking <input> <output>

我不反对光学解决方法。这是我的问题的预览：

提前致谢！

Answer 1

已解决。如果它被 wkhtmltopdf 处理，则无法使用 CSS。

我发现的第一个解决方法是用 zoom:1.41 以 A3 纸张大小呈现页面，然后以 zoom:1/(1.41) 呈现 A4 纸张大小。那是相当臃肿。

所以，我用 SVG 精灵替换了边框，height/width 为 0.2 毫米。它允许我跳过 A4->A3->A4 转换，并且仍然使用 --disable-smart-shrinking 选项，即使我的标记现在很难看。

Answer 2

我找到的解决方法是将文档中的所有像素值缩放 2，然后应用 css 变换将其再次缩小到正确的大小。

//original

body{ width: 210mm; }
p{ font-size:12px; }
.bordered{ border-width: 0.5px; ) //didn't work

//hacked

body{ width: 420mm; transform: scale(0.5); transform-origin: 0 0; }
p{ font-size:24px; }
.bordered{ border-width: 1px; }

呈现引擎在执行 css 转换之前必须解析所有值并舍入到最接近的整数。

显然，如果您需要 0.5 像素的线条（无论这在现实印刷世界中意味着什么！），这很有效。更细粒度的控制需要更大的比例，我还没有尝试过。

从理论上讲，将正文字体大小设置为正常值的某个倍数相当容易，然后使用 rems 使 css 更加美观且缩放速度更快。

编辑：

我可以确认缩放 10 倍然后向下变换非常有效，可以生成精确到 0.1 像素的边框/线条。这是一些 scss:

$final_width: 210mm;
$final_height: 297mm;
$scale_factor: 10;

$page_width: #{$scale_factor * $final_width};
$page_height: #{$scale_factor * $final_height};

html{
    padding: 0;
    margin: 0;
    font-size: #{$scale_factor*10}px;
}

body{
    transform: scale(#{1/$scale_factor});
    transform-origin: 0 0;
    width: $page_width;
    height: $page_height;
    margin: 0;
    margin-bottom: -$page_height;

...

以 rems 为单位定义所有布局尺寸：例如border: 0.05rem（最终结果为 0.5px，在本例中为 1rem = 10px）

Answer 3

我在 CSS 中设置了正文宽度。

我必须在 100 dpi 下设置 800 像素的宽度才能获得 1 像素的边框

Css 边框小于 4px @300dpi 使用 wkhtmltopdf

Css border smaller than 4px @300dpi using wkhtmltopdf

css

printing

wkhtmltopdf