TCPDF: what CSS does it support?

TCPDF and CSS

This is something I’ve been wanting to do for a while now: test for some basic CSS to create a comprehensive list of what TCPDF, my preferred method for generating PDFs on the web, does and doesn’t take into account. It took prepping for my talk at WPTech to finally get me to sit down and do it!

The installed plugin is using TCPDF v6.0.043. According to the TCPDF changelog some CSS support has been added since:

6.0.056 (2014-01-25)
– CSS text-transform property is now supported (requires the multibyte string library for php)

6.0.050 (2013-12-01)
– The CSS property line-height now supports non percentage values.

Let’s play!

Will it turn this line into allcaps? (no, since v6.0.056, see above)

How about bolding text using font-weight? (no, stick to strong or bold)

Italics using font-style? (yes)

Underline using text-decoration? (yes)

Strikethrough using text-decoration? (yes)

Background and text color? (yes)

Letterspacing? (yes)

Light-height for
baseline (no style applied).

Line height
as percentage?
(yes, set @ 200%)

Line height
in pixels?
(set @ 20px, yes but pixel conversion tricky – see 6.0.050 above)

Font-size? (yes)

What about link styles? Can it remove underline? (yes) Effect hover state? (no) Change color? (yes)

This text is in a div with 40px padding, a 1px border and 40px left margin. Border (yes), padding (no), margin (no).

 

Aligning images

This image is aligned to the right of this text using the standard WP align class.

Image aligns, but text doesn’t wrap.

This image is aligned to the right of this text using inline float: right.

NOPE: the image does not float. Which is weird because the above class does the same thing. Needs pursuing.

 

This image is aligned to the right of this text using image align=right.

NOPE: the image does not align.

Playing with image sizes

Width: 100%. The image size does not change.

Width: 800px. The image size does not change.

Width: 100% but defined in image, not as CSS. Percentages are not taken into account.

Conclusion

Most common styles are supported, making conversion from HTML to PDF relatively easy. The big pain points are with margins and padding, and with converting pixels to the unit of measurement used by the document and taking into account image scaling (which defaults to 1.25).

To address margins and padding, I’ve mostly used tables, where cellpadding and cellspacing are supported. TCPDF also has functions Cell() and MultiCell(), which allow for text alignment (horizontal and vertical), padding (multicell only), borders and background colors for blocks of text.

Have some styles you’d like me to test and add to this list? Post them in the comments below!

Jenny Beaumont

Jenny Beaumont is a multicultural, multidisciplinary maker and writer of things. She works as a Sr. Project Manager at Human Made, speaks at conferences in France and abroad, contributes to a number of blogs, and is a former organizer of WordCamp Paris and WordCamp Europe.

Follow me on Twitter | Subscribe to my newsletter

5 thoughts on “TCPDF: what CSS does it support?

  1. Wondering if you had any luck with image alignments with wrapping text. I’m scouring the net as I type…

    Thanks!

    • Hi Eddie,
      Wrapping text in CSS involves playing with floating blocks, unfortunately, float isn’t supported.
      I suggest using old fashion tables like the days before we know what css was.

  2. Hi Jenny, thank you very much for this great article.
    Do you have list of supported CSS attributes that TCPDF supported?
    I’m using TCPDF 6.2

    • Hey Terry,
      Sorry for the late reply. I’m afraid I don’t have such a list – I haven’t worked with TCPDF in quite a while now. Good luck!

Comments are closed.