TCPDF not render all CSS properties

Question

I try to make a PDF writing CSS and HTML but my CSS doesn't appear in my PDF. The only thing considered is the font-size and font-color.

I give you the code (sorry, it's a little long...)

$config = sfTCPDFPluginConfigHandler::loadConfig('my_config');

    $doc_title    = "Fiche Logement";

    $html = <<<EOF
<style>
        .informations {
            padding: 10px;
            margin: 10px;
            border: 1px dotted black;}
        .informations table {
            margin-top: 10px;}
        #modif {
            margin: 20px;
            text-align: left;
            float: right;}
        #modif th {
            padding-left: 10px;}
        #modif td {
            padding-left: 10px;}
        #adresse {
            width: 307px;
            float: left;}
        #reservataire {
            width: 307px;
            float: right;}
        #intergen {
            width: 307px;
            float: right;}
        #infos {
            width: 290px;
            float: left;}
        #handicap {
            padding-bottom: 12px;
            width: 324px;
            float: right;}
        #charges {
            margin-bottom: 20px;
            width: 307px;
            float: left;}
        #loyer {
            width: 307px;
            float: right;}
        #commentaires {
            clear: both;}
        h2 {
            font-variant: small-caps;
            text-align: center;
            font-size: 19px;
            font-weight: bold;
            padding: 0px 0px 2px 5px;
            margin: 15px 0px 20px 0px;
            color: #000000;
            border-top: 1px dotted black;
            border-bottom: 1px dotted black;}

        h3 {
            width: 250px;
            font-variant: small-caps;
            font-size: 15px;
            font-weight: bold;
            padding: 0px 0px 0px 5px;
            margin: 0px;
            color: #225D6D;
            border-top: 1px dotted black;
            border-bottom: 1px dotted black;}
</style>


            <div id='intergen' class='informations'>
                <h3>Intergénérationnel</h3>
                <table>
                    <tr>
                        <th>Intergénérationnel :</th> <td><?php echo \$logement->getIntergen() ?></td>
                    </tr>
                </table>
            </div>

            <div id='infos' class='informations'>
                <h3>Informations logement</h3>
                <table>
                    <tr>
                        <th>Bâtiment :</th> <td><?php echo \$logement->Parclogement->getBatiment() ?></td>
                    </tr>
                    <tr>
                        <th>Taille :</th> <td><?php echo \$logement->getTaille() ?></td>
                    </tr>
                    <tr>
                        <th>Type :</th> <td><?php echo \$logement->getTypelog() ?></td>
                    </tr>
                    <tr>
                        <th>Surface habitable :</th> <td><?php if(\$logement->getSurfacehab() == 0){ echo 'Non Spécifié';} else {echo \$logement->getSurfacehab(). " m²";} ?></td>
                    </tr>
                    <tr>
                        <th>Chauffage :</th> <td><?php echo \$logement->getChauffage() ?></td>
                    </tr>
                    <tr>
                        <th>Ascenseur :</th> <td><?php echo \$logement->getAscenseur() ?></td>
                    </tr>
                </table>
            </div>

            <div id='handicap' class='informations'>
                <h3>Infrastructures handicapés</h3>
                <table>
                    <tr>
                        <th>Immeuble accessible :</th> <td><?php echo \$logement->getAccessibl() ?></td>
                    </tr>
                    <tr>
                        <th>Ascenceur accessible :</th> <td><?php echo \$logement->getAscenseuracc() ?></td>
                    </tr>
                    <tr>
                        <th>Logement adaptable :</th> <td><?php echo \$logement->getAdaptable() ?></td>
                    </tr>
                    <tr>
                        <th>Logement adapté :</th> <td><?php echo \$logement->getAdapte() ?></td>
                    </tr>
                </table>
            </div>

EOF;

    //create new PDF document (document units are set by default to millimeters)
    $pdf = new sfTCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true);

    // set document information
    $pdf->SetCreator(PDF_CREATOR);
    $pdf->SetAuthor(PDF_AUTHOR);
    $pdf->SetTitle($doc_title);

    //set default header data
    $pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE, PDF_HEADER_STRING);

    //set margins
    $pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
    $pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
    $pdf->SetFooterMargin(PDF_MARGIN_FOOTER); 

    //set auto page breaks
    $pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

    //set header and footer fonts
    $pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
    $pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));

    //set default monospaced font
    $pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

    // Fixe la taille de la page
    $pdf->SetDisplayMode(90);

    //initialize document
    $pdf->SetFont('helvetica', '', 10);
    $pdf->AddPage();

    // output some HTML code


    $pdf->writeHTML($html , true, false, true, false, '');

    //reset pointer to the last page
    $pdf->lastPage();  

    // Close and output PDF document
    $pdf->Output('fichelogement.pdf', 'I');

    // Stop symfony process
    throw new sfStopException();

I know this is a very old question. However still relevant, as I've just had to content with the same issue. One possible solution rather than trying to use padding/margin, is to use line-height and text-indent instead. — Doug, Nov 17 '16 at 11:36

score 85 · Accepted Answer · edited May 19 '15 at 23:05

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

+1 for this answer, we have been using the "writeHTMLCell" function available in TCPDF, and the CSS margin attributes appear to be completely ignored, however when the HTML Cell is appended, there are parameters that can be passed that specify either absolute or relative coordinates. — SSH This, Jan 02 '13 at 17:20
FYI, this answer is outdated. I don't know exactly what is supported and what's not, but I know on `` tags you can set padding. It doesn't work on `
` for some reason, so you're going to have to do a lot of wrapping with tables. — Gavin, May 14 '17 at 18:20

score 13 · Answer 2 · answered Jan 03 '11 at 05:21

13

TCPDF 5.9.010 (2010-10-27) - Support for CSS properties 'border-spacing' and 'padding' for tables were added.

answered Jan 03 '11 at 05:21

KotaKomputer

151
1
3

score 12 · Answer 3 · edited Feb 10 '15 at 01:24

12

Supported tags are: a, b, blockquote, br, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, li, ol, p, pre, small, span, strong, sub, sup, table, tcpdf, td, th, thead, tr, tt, u, ul

All the HTML attributes must be enclosed in double-quotes

edited Feb 10 '15 at 01:24

DarthRez

325
2
7

answered Nov 20 '13 at 11:27

Rajkumar

257
3
13

score 9 · Answer 4 · edited Jan 26 '13 at 19:44

9

I recently ran into the same problem having the TCPDF work with my CSS. Take a look at the code below. It worked for me after I changed the standard CSS to a format PHP would understand

Code Sample Below

$table = '<table width="100%" cellspacing="0" cellpadding="55%">
          <tr valign="bottom">
                <td class="header1" rowspan="2" align="center" valign="middle"
                      width="6%">Category</td>
                <td class="header1" rowspan="2" align="center" valign="middle"
                      width="26%">Project Description</td>
          </tr></table>';

edited Jan 26 '13 at 19:44

takeshin

49,108
32
120
164

answered Apr 13 '11 at 21:56

dschnizzy

91
1
1

2

Or you could have used single quotes instead of escaping the double quotes. – FastTrack May 11 '12 at 22:55
8

Funny you should mention that. I have been using an older version of TCPDF on a project (5.9.104 (2011-08-01)). This maybe only relevant to this version and older, but HTML Attribute quotes **must** be double-quotes when written to a TCPDF Cell that supports HTML. Otherwise the attribute is simply ignored. – SSH This Jun 27 '13 at 22:37

score 7 · Answer 5 · answered Sep 02 '15 at 17:49

7

TCPDF 6.2.11 (2015-08-02)

Some things won't work when included within <style> tags, however they will if added in a style="" attribute in the HTML tag. E.g. table padding – this doesn't work:

table {
    padding: 5px;
}

This does:

<table style="padding: 5px;">

answered Sep 02 '15 at 17:49

William Turrell

3,227
7
39
57

This should be the answer – Jane Doe Mar 20 '19 at 06:17

score 5 · Answer 6 · answered Oct 08 '13 at 02:12

5

At the moment I write this, TCPDF only supports padding for tables.

Link to their forum page with that information

answered Oct 08 '13 at 02:12

Jonathas Pacífico

668
9
18

score 4 · Answer 7 · answered Aug 06 '10 at 11:55

4

Since version 5.7 TCPDF includes support for CSS borders. Margins, padding and float are not yet supported. Check the TCPDF website at http://www.tcpdf.org and consult the official forum for further information.

answered Aug 06 '10 at 11:55

user412934

364
4
5

Joe · Answer 8 · 2010-10-13T01:57:17.233

I recently ran into the same problem, and found a workaround though it'll only be useful if you can change the html code to suit.

I used tables to achieve my padded layout, so to create the equivalent of a div with internal padding I made a table with 3 columns/3 rows and put the content in the centre row/column. The first and last columns/rows are used for the padding.

eg.

<table>
<tr>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>content goes here</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
</tr>
</table>

Hope that helps.

Joe

for top\bottom padding, I added – Atara Feb 10 '16 at 12:02 — Atara, Feb 10 '16 at 12:02

score 2 · Answer 9 · answered Mar 16 '16 at 08:43

2

Just a small tip for setting custom padding without extra table elements. Just use this way, it works (TCPDF 6.2.11)

<table border="0" style="padding-left: 10px; padding-bottom: 15px;">
<tr>
<td style="border: 1px solid grey;"> One two three </td>
<td style="border: 1px solid grey;"> Four five six </td>
</tr>
</table>

answered Mar 16 '16 at 08:43

Alexander Fedorov

31
1

1

Keep in mind that if you use padding CSS, you cannot also include `cellpadding="0" cellspacing="0"` in your `` tag, or those will override the CSS.
– Gavin May 14 '17 at 17:56

score 2 · Answer 10 · edited Jan 29 '20 at 11:35

I found this:

// Remove tag bottom and top margins

$tagvs = array( 'p' => array( 
                              0 => array('h' => 0, 'n' => 0), 
                              1 => array('h' => 0, 'n' => 0)
                             ) 
              );
$pdf->setHtmlVSpace($tagvs);

in here: https://tcpdf.org/examples/example_061/

Use it to remove 'p' tags properties (bottom and top), then position the 'p' text inside a cell.

TCPDF not render all CSS properties

10 Answers10

Linked