Working with css floats in html2pdf

Question

I'm using floats to position 2 divs beside each other.

<a href="printbox.php">print</a>
<?php ob_start(); ?>
<style>
    #sidedish{
        float: left;

        border: 1px solid black;
        width: 100px;
        height: 100px;
    }
    #maindish{
        float: right;
        width: 200px;
        border: 1px solid black;
        height: 100px;
        text-align: center;
    }

    #container{
        width: 304px;
        height: 100px;
        border: 1px solid black;
    }
</style>

<div id="container">
<div id="sidedish"></div>
<div id="maindish"><div id="box">name</div></div>
</div>
<?php $_SESSION['boxes'] = ob_get_contents(); ?>

Here is what printbox do, it just renders the buffered data into a pdf, but somehow the floats that were set were lost in the process.

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0));
$html2pdf->writeHTML($_SESSION['boxes']);

$html2pdf->Output('random.pdf');
?>

It works fine on html:

but when I click on print it turns to this:

Any idea what the problem is?

Answer 1

Speaking from personal experiences, I would say styling the output of HTML2PDF is, at best, esoteric black magic science. The main reasons for this are:

• The class only supports a (relatively small) subset of CSS styles & selectors
• CSS compatibility is undocumented
• PDF is impossible to debug in relation to the HTML input

To be fair, this is not only the issue for HTML2PDF but also for the TCPDF that HTML2PDF uses.

It might be possible that HTML2PDF, being just an almost-zero-setup, quick & easy alternative interface for the TCPDF, cuts more CSS support off — but I'm sure that even TCPDF wouldn't support float properly.

The best workaround that you could use is to send your floating divs to the nineties:

<table>
    <tr>
        <td><div class="float"> ... </div></td>
        <td><div class="float"> ... </div></td>
    </tr>
</table>

You could also hide this embarrassment from the public HTML:

<?php
    $isPdf = (/* condition that tells us we're outputting PDF */) ? true : false;
    if ($isPdf) {
        echo "<table><tr><td>";
    }
?>
<div class="float"> ... </div>
<?php
    if ($isPdf) { 
        echo "</td><td>";
    }
?>
<div class="float"> ... </div>
<?php
    if ($isPdf) {
        echo "</td></tr></table>";
    }
?>

Answer 2

You can see the quick documentation online in french here: http://demo.html2pdf.fr/examples/pdf/about.pdf

('Les float ne sont gérés que pour la balise IMG')

= Floats are only handled for img markups by the class.

Handled css properties are also listed in the doc.