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