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?

Suppositious

Not find your mentioned problem. see jsfiddle.net/DYGvR/show, test in chrome click mouse right, page print. – Bechuana

Are you using the browser to print? What does printbox.php do? I'm assuming he's clicking on the print link and printbox.php is somehow setting a width on the document. – Maronite

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>";
    }
?>

Thunderhead

This was extremely helpful to me after I was ripping my hair out trying to figure out css workarounds. Back to the tables!! Also, fyi, I created a different copy of the page-in-question entirely, and if it was for PDF, direct there. If it wasn't, direct to the non-table. – Masonry

I had the same problem. My solution was to use absolute positioning instead of floats, which worked well, but you need to set the container dimensions. – Ecumenicism

Actually, HTML2PDF supports far more CSS than TCPDF does, including absolute positioning, margins and paddings. Worth mentioning. – Dachi

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.

Simonides