BlueTooth4269 BlueTooth4269 - 1 month ago 24
HTML Question

iText XMLWorker table weirdness when converting to PDF

Ok, basically I've been trying to convert an HTML file to PDF using iText's XMLWorker in Java. Because there were issues converting directly from HTML, I've been using JTidy to convert the file to XHTML first (works like a charm), but when I try and convert it to PDF it messes up my layout big time.

Again, both the HTML and XHTML files (which are identical when viewed in a browser) look exactly the way I want them to, but the PDF file is screwed.
Here's the HTML code, obviously I replaced all the information contained in the tables with "Bla":

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Bla</title>
<style>
table#t0a {margin-top: 0.8cm; width: 90%; font-size: 13px; border-collapse: collapse;}
table#t0a td {padding: 4px; border: 1px solid;}
table#t0a td.span {width: 70%;}
table#t0a td.long {width: 32%;}
table#t0a td.short {width: 6%;}
table#t0b {margin-top: 0.8cm; margin-bottom: 0.8cm; width: 90%; font-size: 13px; table-layout: fixed; border-collapse: collapse;}
table#t0b td {padding: 4px; border: 1px solid; width: 20%;}
table#t0b th {background-color: #bbb; padding: 4px; border: 1px solid;}
table#t0b th:nth-child(2) {background-color: #bbb; padding: 4px; border: 1px solid; width: 20%;}
table#t1a {margin-top: 0.8cm; width: 90%; font-size: 13px; border-collapse: collapse;}
table#t1a td {padding: 4px; border: 1px solid;}
table#t1a td.span {width: 70%;}
table#t1a td.long {width: 32%;}
table#t1a td.short {width: 6%;}
table#t1b {margin-top: 0.8cm; margin-bottom: 0.8cm; width: 90%; font-size: 13px; table-layout: fixed; border-collapse: collapse;}
table#t1b td {padding: 4px; border: 1px solid; width: 20%;}
table#t1b th {background-color: #bbb; padding: 4px; border: 1px solid;}
table#t1b th:nth-child(2) {background-color: #bbb; padding: 4px; border: 1px solid; width: 20%;}
</style>
</head>
<body>
<div id="container">
<div class="tables0" style="margin-left: 0.93cm">
<table id="t0a" cellspacing="0">
<tr><td>Bla</td><td class="span" colspan="3">Bla</td></tr>
<tr><td>Bla</td><td class="span" colspan="3">Bla</td></tr>
<tr><td>Bla</td><td class="long">Bla</td><td class="short">Bla</td><td class="long">Bla</td></tr>
</table>
<table id="t0b" cellspacing="0">
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td><p>Bla</p></td><td>Bla</td></tr>
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td><p>Bla</p></td><td>Bla</td></tr>
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td>
<b>Bla</b><br>Bla<br>
<b>Bla</b><br>Bla<br>
<b>Bla</b><br>Bla<br>
</td><td>Bla</td></tr>
</table>
</div>
<hr style="height:3px;border:none;color:#000;background-color:#000;" />
<div class="tables1" style="margin-left: 0.93cm">
<table id="t1a" cellspacing="0">
<tr><td>Bla</td><td class="span" colspan="3">Bla</td></tr>
<tr><td>Bla</td><td class="span" colspan="3">Bla</td></tr>
<tr><td>Bla</td><td class="long">Bla</td><td class="short">Bla</td><td class="long">Bla</td></tr>
</table>
<table id="t1b" cellspacing="0">
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td><p>Bla</p></td><td>Bla</td></tr>
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td><p>Bla</p></td><td>Bla</td></tr>
<tr><th><b>Bla</b></th><th>Bla</th></tr>
<tr><td>
<b>Bla</b><br>Bla<br>
<b>Bla</b><br>Bla<br>
<b>Bla</b><br>Bla<br>
</td><td>0</td></tr>
</table>
</div>
</div>
</body></html>


Now when viewed in the converted PDF, the first table extends through the edge of the screen to the right, which is obviously not intentional. Any ideas why this might be happening?

Answer

Turns out iText isn't really all that compatible with CSS. Ended up using Flying Saucer instead and it worked.