Working with css floats in html2pdf
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>";
}
?>
Put elements from left and right side to the same line
According to this answer, the problem is html2pdf itself, because it doesn't render css floats like it should.
Try wrapping your html with a <table>
. Like this:
#upp { width: 100%; /*background:red;*/}.alignleft,.alignright { display: inline-block; background: red;}.alignleft { padding-left: 100px;}.alignright { padding-right: 100px;}
<table id="upp"> <tr> <td> <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p> </td> <td></td> <td align="right"> <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p> </td> </tr></table>
html2pdf: overflow:hidden does not seem to work
overflow:hidden
finally seems to work with DIV elements.
But neither display:inline-block
nor float:left
do, which would allow side by side DIVs...
A few more tests, and I found my turnaround: a DIV with overflow:hidden
in each TD...
TCPDF not render all CSS properties
In the first place, you should note that PDF and HTML and different formats that hardly have anything in common. If TCPDF allows you to provide input data using HTML and CSS it's because it implements a simple parser for these two languages and tries to figure out how to translate that into PDF. So it's logical that TCPDF only supports a little subset of the HTML and CSS specification and, even in supported stuff, it's probably not as perfect as in first class web browsers.
Said that, the question is: what's supported and what's not? The documentation basically skips the issue and let's you enjoy the trial and error method.
Having a look at the source code, we can see there's a protected method called TCPDF::getHtmlDomArray()
that, among other things, parses CSS declarations. I can see stuff like font-family
, list-style-type
or text-indent
but there's no margin
or padding
as far as I can see and, definitively, there's no float
at all.
To sum up: with TCPDF, you can use CSS for some basic formatting. If you need to convert from HTML to PDF, it's the wrong tool. (If that's the case, may I suggest wkhtmltopdf?)
HTML2pdf Css not supporting
I did two tests and CSS is working well except for the size of the div.
PHP Version : 5.6.30
Test 1
<?php
require("html2fpdf.php");
$buffer = "
<h1>Hello Friends</h1><br>
<span style='font-weight: bold; font-size: 18pt; color: #FF0000; font-family: Times'>Hello there! I am red!<br></span>
<br>
<p style='font-size:10'>This is a sample code</p>
<p style='font-size:10px; color:blue;'>This is a sample code</p>
<span style='font-size:10px; color:blue;'>This is a sample code</p>
<span style='font-weight: italic; font-size: 10pt; color: #00FF00;'>I am a pdf ! Please accept my answer!</span>
";
$pdf = new HTML2FPDF('P', 'mm', 'Legal');
$pdf->AddPage();
$pdf->WriteHTML($buffer);
$pdf->Output('my.pdf', 'D');
?>
Result
Test 2
<?php
require("html2fpdf.php");
$buffer = "<div style='width:950px;'>
<h1>Hello Friends</h1><br>
<span style='font-weight: bold; font-size: 18pt; color: #FF0000; font-family: Times'>Hello there! I am red!<br></span>
<br>
<p style='font-size:10'>This is a sample code</p>
<p style='font-size:10px; color:blue;'>This is a sample code</p>
<span style='font-size:10px; color:blue;'>This is a sample code</p>
<span style='font-weight: italic; font-size: 10pt; color: #00FF00;'>I am a pdf ! Please accept my answer!</span></div>
";
$pdf = new HTML2FPDF('P', 'mm', 'Legal');
$pdf->AddPage();
$pdf->WriteHTML($buffer);
$pdf->Output('my.pdf', 'D');
?>
Result
Display:none not working in html2pdf
According to this document (http://www.studentenwerk-goettingen.de/pdf/help/compatibility.css.2.1.html) css display support is only partial.
A workaround would probably be to have some kind of conditional check to figure out what is actually needed and then construct your dynamic html accordingly, i guess. This way there would be no need to set anything to "display:none".
Related Topics
How to Divide Bootstrap Col-Md Div to Half Vertically
CSS - Add Color to Black & White Png Image Using a Filter
HTML5Shiv - Why Is It Only for Ie
Vertically Center Div When Body Height: 100% Without Absolute Pos
How to Use The Bootstrap Form Select CSS with a Rails Model
Extra Padding in Select Option Element in Chrome
Thinking of The 'Zoom' in Responsive Design
Iis 7 Windows Server 2008/CSS File Not Loading Within Aspx
Bootstrap Button Active Color Change
Ie 6,7,8,9 CSS Compatibility Stylesheet
CSS3 Multi Column Layout Ie Workaround
CSS Specific Rule for Opera 12
Table Overflows Parent Div When Td Content Is Too Wide
Using Bootstrap, How to Create Multiple Fullscreen Div's to Stack on One Another