表格單元格中的文字不正確對齊

我使用xhtml2pdf（原來的pisa，或者反之亦然？:)）從django模板生成PDF。模板呈現正常，但是我從該模板中得到的PDF以非常奇怪的方式被破壞：表格單元格中的文本被擡起到單元格的頂部，所以大寫字母觸及單元格的上邊框：表格單元格中的文字不正確對齊

enter image description here

而在瀏覽器，它看起來像這樣：

enter image description here

我已經試過：

應用vertical-align - 看起來只是被忽略了，至少我沒有注意到pdf的任何變化，即使它們是在生成的html中
應用padding-top - 它將文本向下移動，但也增加了單元格高度。
包裝文本span與margin-top - 同樣的效果，padding-top

我想原因是，文本由xhtml2pdf在該行的最頂部渲染，而瀏覽器往往某處呈現在中間該塊。換句話說，文本塊在pdf和html中佔據了非常相同的位置，但塊內的文本被移位。但這只是我的猜測。

那麼，有沒有人面臨同樣的問題？難道我做錯了什麼？任何可能的解決方法？

飲片代碼：

來源

2013-06-06 J0HN

完全相同的prolem這裏 – ppetrid

@ppetrid我已經結束了使用[weasyprint ]（http://weasyprint.org/）。它有忽視tr高度的另一個小故障，但這對我來說並不重要。 – J0HN

@JOHN你有weasyprint的一些示例代碼嗎？當我使用weasyprint時，我會得到與問題中顯示的結果相同的結果。 – Steve

感謝例如J0HN - 很好做。網上還沒有很多weasyprint例子。

我發現垂直對齊失敗時，我將高度應用到表格行或單元格。我意識到如果我在該行中創建了一個空白單元格，並將其指定爲0寬度和所需高度，則該行中的其他單元格可以應用垂直對齊，並且它們將正確渲染。

下面是一個示例（創建具有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')

來源

2014-11-15 18:18:23 Steve

表格單元格中的文字不正確對齊

回答

相關問題