Văn bản bên trong ô bảng không được liên kết không đúng

Question

Tôi đang sử dụng xhtml2pdf (trước đây là pisa hoặc ngược lại? :)) để tạo PDF từ mẫu django. Mẫu được hiển thị ok, nhưng PDF tôi nhận được từ mẫu đó bị hỏng theo cách rất lạ: văn bản trong ô bảng được nâng lên đầu ô, vì vậy chữ hoa chạm vào đường viền trên của ô:

trong khi trong trình duyệt có vẻ như rằng:

tôi đã thử:

1. Áp dụng vertical-align - có vẻ như nó chỉ bị bỏ qua, ít nhất là tôi không nhận thấy bất kỳ thay đổi nào trong pdf, ngay cả khi chúng được tạo trong html
2. Áp dụng padding-top - nó di chuyển văn bản xuống, nhưng cũng tăng chiều cao của ô.
3. Wrapping văn bản vào span với margin-top - cùng tác dụng như padding-top

Tôi nghĩ lý do là văn bản được đưa ra bởi xhtml2pdf ở đầu rất của dòng, trong khi trình duyệt có xu hướng làm cho nó ở đâu đó ở giữa khối. Nói cách khác, khối văn bản chiếm vị trí rất giống nhau cả trong pdf và html, nhưng văn bản bên trong khối được dịch chuyển. Nhưng đó chỉ là suy đoán của tôi.

Vì vậy, có ai phải đối mặt với cùng một vấn đề không? Tôi có làm điều gì sai? Bất kỳ cách giải quyết nào có thể?

Pieces mã:

• rendered html: http://pastebin.com/4jMCLrA4
• CSS: http://pastebin.com/vAn8HXkY
• Mã mà tạo ra PDF: http://pastebin.com/6wBULrhx

Answer 1

Cảm ơn các ví dụ J0HN - độc đáo làm. Không có nhiều ví dụ mờ nhạt nổi trên mạng.

Tôi thấy rằng căn chỉnh dọc đã thất bại khi tôi áp dụng chiều cao cho hàng hoặc ô của bảng. Tôi nhận ra nếu tôi tạo một ô trống trong hàng, gán nó 0 chiều rộng và chiều cao mong muốn, sau đó các ô khác trong hàng đó tôi có thể áp dụng thẳng đứng căn chỉnh và chúng sẽ hiển thị đúng.

Đây là một mẫu (tạo ra một thẻ trang có kích thước với khối 1 văn bản được làm trung tâm theo chiều ngang và theo chiều dọc trên trang):

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')