HTML/CSS to PDF plugins

[tingeber]

Look into existing plugins, snippets, widgets that transform a website into printable material - PDFs. Besides basic CSS print stylesheets, we're hoping there are solutions out there that would make the integration between print and web versions seamless, so changes only need to be done once and the plugin renders PDFs from HTML/CSS

[mushon]

I am not sure we are talking of a specific technology, as this is already possible using a print media css. Rather I think this would probably be more of a starter html/css template that we might be able to pipe the markdown files into. But I am sure there are interesting solutions to combine out there, for example, reveal.js has an export to PDF option.

[mayarichman]

Is it important for it to maintain the same look and feel as the site? There are many markdown to pdf options, but, from what I've read, the output won't look like the sleek site design, which I think is fine.

[mushon]

We would like to create a CSS file especially for that print template. Ideally we would have a good starting point that already prints from .md based on a basic css file. I can then take it from there and apply the styles for print based on the ones for the site. Does that make sense?

[mushon]

From looking around it seems like everything is pointing in the direction of wkhtmltopdf and its multiple offsprings like PDFKit and WeasyPrint. As for the design, it should be pretty straight forward to float things into a print css layout. Here are some tips from A List Apart

[mushon]

and Bootstrap provides a few specific print classes for hiding or revealing elements based on whether it's printed or on screen.

[mayarichman]

Running wkhtmltopdf on the Risk Mapping page gives us [this pdf]. I think it looks really good.(https://s3.amazonaws.com/f.cl.ly/items/3C401M2k442Z2t3G2s3N/Risk-Mapping.pdf). .

@mushon were you thinking that we should produce all pdf's for the content once it is ready and link it to the Download PDF button? If they update the text, this would make the linked PDF irrelevant. In that case, they would need to print the page instead.

[mushon]

oops… missed this one. this is indeed encouraging. I will work on the print css and hope for good. Not sure how to preview the design for A4 size as I'm working on it other than trying to print every time…

[mushon]

Stack Overflow says you can't really know for sure how a page will print: http://stackoverflow.com/a/953420/357977

[tingeber]

The print preview is #toomanyvariables, but wkhtmltopdf removes that variable from the equation. Flip side, you'd need to run it preiodically to see results in real time. Although I guess once you map it to "print PDF button" it's a question of one click?

[mayarichman]

@tingeber I don't think it can be mapped to a button. It needs to be installed on a computer and then ran from the terminal. They are "are open source (LGPL) command line tools " according to this.

[mayarichman]

@tingeber @mushon I am testing out the client side javascript library jsPDF and with some markdown wrangling was able to get this output. There were odd bugs in the text before, related to comma's, dashes and parentheses. I substituted the punctuation with ascii symbols and it corrected itself.

I am still looking into font and other style changes, but the content is there!

[mushon]

That’s great progress. Thanks! Just a note: the current output didn’t use our custom font. But I guess you’re on it.

[mayarichman]

@mushon Apparently custom fonts are not available yet. See MrRio/jsPDF#115.

[mayarichman]

I've pushed the changes to the button to the site.

Some things to note:

• I have still not been able to use our custom fonts, but this may be less important than just have updated content
• All commas, dashes, quotations, parentheses need to be encoded with the right HTML code
• The downloaded file always has the same title. It would be better if it changed with the current download page

[mushon]

As I discussed with Tin, I think the auto-generation of PDFs should be a nice-to-have at this point and should not be a deal breaker. If we can form a single long page template that includes all the cards and have a big fat PRINT button at the top we could almost as easily send to PDF or directly to a printer. So if the HTML2PDF solutions become too complicated to maintain and patch around, I suggest we find ways around them. @mayarichman & @tingeber your thoughts.

[mushon]

I've been doing some work on HTML to PDF the CSS way with some success and some failure. I did manage to get the covers of the cards to print but it seems rotating the text via css for the inlets is not really working so well. Here's the PDF I managed to print from Firefox: https://github.com/the-engine-room/PACT-kit/blob/gh-pages/mockups/Risk%20Mapping.pdf?raw=true

So it seems we will need to print the PDFs for the covers and the inlets separately, which might still make sense, because assuming you don't have a two side printer you want to do the batch of covers and then the batch of inlets. Note: different printers would pile the printed papers differently, so that's another thing we need to account for.

Generally, I'm concerned about the limits of CSS when it comes to designing for print. We might need to get more creative with this like breaking it to two files, or simply taking care of generating the PDFs ourselves rather than expect it to be done by anyone without our intervention.

[mushon]

ok, made some progress with the rotated page. You can now see the page prints to PDF well (on Firefox). I still get an extra empty third page, but I'm not going to worry about it right now.

Moving on.