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

Mealy

the exact same prolem here – Bignoniaceous

@Bignoniaceous I have ended up using weasyprint. It has another glitch of ignoring tr height, but that's not a big deal for me. – Mealy

@JOHN do you have some sample code for weasyprint? When I use weasyprint I get the same results that you show in the question. – Charles

My problem was the vertical-align would fail when I set the height style on a row or cell. As a workaround I added an extra cell in the same row, set the height to what I needed, the width to 0px, then the next cell I can use vertical-align, and it is the proper height. – Charles

@Charles example: github.com/e-kolpakov/enforta/blob/master/DocApproval/utilities/… – Mealy

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

Charles

Answer 2

you have to use line-height: auto; then it will align vertical properly. This works fine:

td { 
font-family: 'Roboto', sans-serif;
line-height: auto;
border: 0.05pt solid #808080;
vertical-align: middle; 
font-size: 7pt;
text-align: left;
margin-left: 1.5pt;
}

Erlin

Adding line-height: auto fixed the problem for me using xhtml2pdf (seems like the other answer is using a different library). Thank you for this! – Schnozzle

Answer 3

I added some padding (padding-top:2px) to fix the problem

Hassanhassell