带有 Wicked PDF 和字母间距问题的 HTML 到 PDF [英] HTML to PDF with Wicked PDF and letter-spacing issues

问题描述

同时使用 0.79 和 0.7.2 生成的 PDF 看起来与我的原始 HTML 略有不同.添加 show_as_html 标志会按预期显示它，但是内联样式在 PDF 中的处理方式与 HTML 预览中的处理方式不同.

Using both 0.79 and 0.7.2 the PDF generated looks slightly different than my original HTML. Adding the show_as_html flag presents it as expected however the inline-styles are being handled differently in the PDF then they are in the HTML preview.

特别是我遇到的问题是字母间距声明，它也有一个浮点数没有被正确呈现.因此，例如在具有字母间距的右侧浮动元素上，PDF 会将字符与中心间隔太多，这样文本会部分离开屏幕，而不是因字母间距宽度的差异而进一步向左碰撞.

Specifically the problem I'm having is with letter-spacing declarations which also have a float not being rendered correctly. So for instance on a right float element which has the letter-spacing, the PDF will space the characters too much and from center such that the text goes partially off the screen rather than bumping further to left for the difference of the letter-spacing width.

这是原始 HTML 片段:

Here is the original HTML snippet:

<table width="800" border="0">

  <tr>
    <td colspan="3"><span style="font-family:Helvetica, Arial, sans-serif;font-size:10pt;margin-top:18px;text-transform:uppercase;float: right;letter-spacing:2pt">Winter 2013</span></td>
  </tr>
</table>

这是进行渲染的代码:

<代码>渲染:pdf =>'文档名称'，:模板=>'template.html.erb',:布局 =>'pdf.html'

这是呈现的 HTML:http://jsfiddle.net/wX4DQ/

Here is the rendered HTML: http://jsfiddle.net/wX4DQ/

这是输出的 PDF:http://imgur.com/sdUPM

我注意到有一些关于 wkhtmltopdf 关于这似乎是相关的.这可能是这个问题的罪魁祸首，什么是可以接受的解决方法?

I noticed there are a few bug reports on wkhtmltopdf about this which seem to be related. Could that be the culprit of this issue, what's an acceptable work-around?

我尝试了不同的字体，但我真的必须使用 Helvetica.

I've tried different fonts but I really have to use Helvetica.

关于这里做什么的任何建议或可行的解决方法?

Any suggestions as to what do here or a plausible work around?

推荐答案

有很多因素会导致文本呈现和字母间距出现问题.如果您使用的是二进制文件，请尝试获取针对 QT 编译的二进制文件.如果您自己编译 wkhtmltopdf，请确保您编译它的系统安装并注册了一套合适的字体，否则字体看起来不正确.

There are a lot of things that can cause issues with text rendering and letter spacing. If you are using a binary, try to get one that was compiled against QT. If you compiled wkhtmltopdf yourself, make sure the system you compiled it on has a decent set of fonts installed and registered, or typefaces will just not look right.

此外，这一点 css 可以提供帮助，尤其是在复制/粘贴某些字符之间有随机额外空格时:

Also, this bit of css can help, especially with copy/pasting having random extra spaces between some characters:

body { text-rendering: optimize-speed; }

这篇关于带有 Wicked PDF 和字母间距问题的 HTML 到 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！