Tekst w komórce tabeli nieprawidłowo wyrównany

Question

Używam xhtml2pdf (wcześniej pisa, czy też odwrotnie? :)) do generowania pliku PDF z szablonu django. Szablon jest renderowany poprawnie, ale plik PDF, który otrzymuję z tego szablonu, jest uszkodzony w bardzo dziwny sposób: tekst w komórkach tabeli jest podnoszony do górnej części komórki, więc wielkie litery dotykają górnej granicy komórki:

Choć w przeglądarce wygląda na to, że:

próbowałem:

1. Stosując vertical-align - wygląda na to, że jest po prostu zignorowany, przynajmniej nie zauważyłem żadnych zmian w pdf, nawet jeśli były one w wygenerowanym html
2. Zastosowanie padding-top - powoduje przesunięcie tekstu w dół, ale również zwiększa wysokość komórki.
3. zawijanie tekstu w span z margin-top - taki sam efekt jak padding-top

Myślę, że powodem jest to, że tekst jest renderowany przez xhtml2pdf na samym szczycie linii, natomiast przeglądarek mają tendencję, aby uczynić go gdzieś w środku blok. Innymi słowy blok tekstu zajmuje tę samą pozycję zarówno w formacie pdf, jak i html, ale tekst wewnątrz bloku jest przesunięty. Ale to tylko moja spekulacja.

Czy ktoś ma ten sam problem? czy robię coś źle? Jakiekolwiek obejścia są możliwe?

Fragmenty kodu:

• wytopione html: http://pastebin.com/4jMCLrA4
• CSS: http://pastebin.com/vAn8HXkY
• kod, który generuje plik PDF: http://pastebin.com/6wBULrhx

Answer 1

Dzięki za przykład J0HN - ładnie wykonane. Nie ma jeszcze wielu przykładów weasyprintów pływających po sieci.

Okazało się, że wyrównanie w pionie nie powiodło się, gdy zastosowałem wysokość do wiersza tabeli lub komórki. Uświadomiłem sobie, że jeśli utworzyłem pustą komórkę w rzędzie, przypisując jej szerokość 0 i pożądaną wysokość, to pozostałe komórki w tym rzędzie mogę zastosować wyrównanie w pionie i renderowałyby się poprawnie.

Oto przykład (tworzenie wielkości strony karty z bloku 1 tekstu, który jest wyśrodkowany w pionie i poziomie na stronie):

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