Testo all'interno della cella della tabella allineato in modo errato

Question

Sto utilizzando xhtml2pdf (precedente pisa o viceversa? :)) per generare PDF dal modello django. Il modello è reso ok, ma il PDF che ottengo da quel modello è corrotto in un modo molto strano: il testo nelle celle della tabella viene sollevato nella parte superiore della cella, quindi le lettere maiuscole toccano il bordo superiore della cella:

Mentre nel browser sembra che:

ho provato:

1. Applicando vertical-align - sembra appena ignorato, almeno non ho notato alcuna modifica in pdf, anche se erano in html generato
2. Applicazione padding-top - sposta il testo verso il basso, ma aumenta anche l'altezza della cella.
3. disposizione del testo in span con margin-top - stesso effetto di padding-top

Penso che il motivo è che il testo è reso dal xhtml2pdf al vertice della linea, mentre i browser tendono a rendere da qualche parte nel mezzo di il blocco. In altre parole, il blocco di testo occupa la stessa posizione sia in pdf che in html, ma il testo all'interno del blocco viene spostato. Ma questa è solo la mia speculazione.

Quindi, qualcuno ha affrontato lo stesso problema? Sto facendo qualcosa di sbagliato? Sono possibili soluzioni alternative?

pezzi di codice:

• rendering HTML: http://pastebin.com/4jMCLrA4
• CSS: http://pastebin.com/vAn8HXkY
• codice che genera PDF: http://pastebin.com/6wBULrhx

Answer 1

Grazie per l'esempio J0HN - ben fatto. Non ci sono ancora molti esempi di weasyprint in giro per la rete.

Ho trovato che l'allineamento verticale non funzionava quando ho applicato un'altezza alla riga o alla cella della tabella. Mi sono reso conto che se avessi creato una cella vuota nella riga, assegnata la larghezza 0 e l'altezza desiderata, allora le altre celle in quella riga avrei potuto applicare l'allineamento verticale e sarebbero state visualizzate correttamente.

Ecco un esempio (la creazione di una pagina di carta di dimensioni con blocco di 1 testo che è centrato orizzontalmente e verticalmente sulla pagina):

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