Text inside the table cell improperly aligned

Question

I'm using xhtml2pdf (former pisa, or is it vice versa? :)) to generate PDF from the django template. The template is rendered ok, but PDF I get from that template is corrupted in a very weird manner: text in table cells are lifted to the top of the cell, so capital letters touch the upper border of the cell:

While in the browser it looks like that:

I've tried:

1. Applying vertical-align - looks like it's just ignored, at least I didn't notice any changes in pdf, even if they were in generated html
2. Applying padding-top - it moves the text down, but increases the cell height as well.
3. Wrapping text into span with margin-top - same effect as padding-top

I think the reason is that text is rendered by xhtml2pdf at the very top of the line, while browsers tend to render it somewhere in the middle of the block. In other words the text block occupies the very same position both in pdf and html, but the text inside the block is shifted. But that's just my speculation.

So, has anyone faced the same issue? Am I doing something wrong? Any workarounds possible?

Pieces of code:

• Rendered html: http://pastebin.com/4jMCLrA4
• CSS: http://pastebin.com/vAn8HXkY
• Code that generates PDF: http://pastebin.com/6wBULrhx

Answer 1

Thanks for the example J0HN - nicely done. There are not many weasyprint examples floating around the net yet.

I found that the vertical-align was failing when I applied a height to the table row or cell. I realized if I created a blank cell in the row, assigned it 0 width and the desired height, then the other cells in that row I could apply vertical-align and they would render properly.

Here is a sample (creating a card sized page with 1 text block that is centered horizontally and vertically on the page):

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