Does Phantomjs support CSS3 Columns for HTML to PDF conversion?

Problem

I'm trying to convert a html page to PDF. The conversion works fine with PhantomJS, however, phantomjs does not seem to support CSS3 columns.

The command I'm running (html->pdf)

phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.pdf

The resulting PDF does not honour the CSS columns style, displaying a vertical list of items instead.

However, running the following command to convert html->image does honour the CSS3 Columns style:

phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.png

Can someone please confirm that this is expected behaviour?

BTW, I've tried using wkhtmltopdf but this does/will not be supporting CSS Columns.

Many Thanks

Problem courtesy of: singh1469

Solution

I believe that the webkit version on which PhantomJs relies probably is not implementing CSS3 columns, although the major webkit browsers (Safari and Chrome) both do. This link

https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards

and this link

http://trac.webkit.org/wiki/QtWebKitFeatures22

will shed as much as light as there is on this topic, AFAIK.

Solution courtesy of: stolli

Discussion

I've come to the same conclusion as @Stolli. But as a work around, I did do the following:

Use CSS3 columns and convert the html to an image using wkhtmltoimage which ships with the wkhtmltopdf library. This will maintain the CSS3 column structure.

Then embed the generated image in a html string like: <html><img src='path/to/my/file'/></html> and convert to PDF using wkhtmltopdf.

Obviously, there are allot of dependencies here, so it is not ideal for a production environment.

Discussion courtesy of: singh1469

This recipe can be found in it's original form on Stack Over Flow.