表格单元格内的文本未正确对齐

Question

我正在使用xhtml2pdf（以前为pisa，反之亦然？:)）从django模板生成PDF。模板呈现正常，但是我从该模板获得的PDF以非常奇怪的方式被破坏：表格单元格中的文本被提升到单元格的顶部，因此大写字母触及单元格的上边界：

在浏览器中看起来像是：

我试过了：

1. 应用vertical-align - 看起来它只是被忽略了，至少我没有注意到pdf的任何变化，即使它们是在生成的html中
2. 应用padding-top - 它会向下移动文本，但也会增加单元格高度。
3. 使用span将文字包装到margin-top中 - 与padding-top
效果相同

我认为原因是文本由xhtml2pdf呈现在行的最顶端，而浏览器倾向于将其呈现在块的中间某处。换句话说，文本块在pdf和html中占据相同的位置，但块内的文本被移位。但那只是我的推测。

那么，有没有人遇到同样的问题？难道我做错了什么？有没有可行的解决方法？

代码：

• 呈现的html：http://pastebin.com/4jMCLrA4
• CSS：http://pastebin.com/vAn8HXkY
• 生成PDF的代码：http://pastebin.com/6wBULrhx

Answer 1

感谢J0HN的例子 - 很好地完成了。网络上没有很多weasyprint示例。

当我将高度应用于表格行或单元格时，我发现垂直对齐失败了。我意识到如果我在行中创建了一个空白单元格，为其指定了0宽度和所需高度，那么该行中的其他单元格我可以应用vertical-align，它们可以正确渲染。

以下是一个示例（创建一个卡片大小的页面，其中1个文本块在页面上水平和垂直居中）：

doc_css = CSS(string='''@page { size: 3.75in 2.75in; margin: .25in }
                    html, body {margin: 0; padding: 0; width: 100%; height: 100%;
                    }''')
doc = HTML(string='''
    <table style="height: 100%; width: 100%;
                  margin: 0;
                  padding: 0;
                  border: 1px solid black">
        <tr>
            <td style="height: 100%; width: 0px;"> /This sets the row height - empty cell
            <td style="vertical-align: middle;
                text-align: center;
                border: 1px solid blue">
                The text to be centered here.
        </tr>
    </table>
''', base_url='/home/Desktop').render(stylesheets=[doc_css])
doc.write_pdf('./weasy_print_sample_pages_list.pdf')