nbconvert reveal to pdf conversion ignores styling, prints only a single page.

[scopatz]

This is mostly for @damianavila since he asked me to report that I am having problems converting ipython-based reveal,js slideshows into PDFs.

I am using the latest IPython (62c0f6d) and I have a sample project that you can check out to play around with here: https://github.com/scopatz/mc2013

To reproduce:

$ git clone https://github.com/scopatz/mc2013.git 
$ cd mc2013/pres
$ make  # to run nbconvert
$ python -m SimpleHTTPServer

Then in a browser (I am on Chrome 28) go to http://localhost:8000/scopatz_mc13.reveal.html?print-pdf

Lastly follow the instructions here to print to pdf https://github.com/hakimel/reveal.js/#pdf-export When I do this, I get a pdf that looks like http://scopatz.s3.amazonaws.com/localhost_8000_scopatz_mc13.reveal.pdf

This is clearly wrong, since it only has a single page, no background color, and the fonts aren't what they are in the browser. All of these problems seem related to the CSS in some way. Note that they still exist even when I use a default reveal theme, rather than my custom one. I hope this helps.

[damianavila]

Hi, Anthony

OK, first of all, I found a little bug... a missing slash in the CDN for the print-pdf stylesheet. I opened a PR to fix it: #3635

But this is not the main problem, just a typo when I added the possibility to change the url to find the reveal.js library... The main two problem are two:

1. @media print in style.min.css overwrite with black all the text. I opened an issue some month ago Problems with the less based style.min.css #3012 but we had to wait for bootstrap v3 to fix it (@Carreau, are we already using v3 in master??). I have modified this in the makefile of your repository until we implement the proper solution: https://github.com/scopatz/mc2013/pull/1/files#L0R8
2. Now, if you add a custom.css file in your slideshow directory, the reveal.html file is able to read it... so you can customize the css. I use this approach and I added to your repository a custom.css containing css to override the overflow property in the slideshow: https://github.com/scopatz/mc2013/pull/1/files#L1R1

With this fixes, you now can print your slideshow using FIrefox, I had some problem with Chromium...
The resulting pdf is here: http://www.slideviper.oquanta.info/scopatz_mc13.reveal.pdf

Probably is not the better solution, but it works ;-)
To improve the quality of the pdf, I have to fix and customize the print.css stylesheet or make our own stylesheet and serve it through a CDN... I will see ;-)
I will probably write a blog post explaning this steps to make a pdf from the reveal slideshow.

Cheers and thanks for reporting...

Damián.

[scopatz]

Awesome, thanks for taking a look at this Damián!

1. @media print in style.min.css overwrite with black all the text. I opened an issue some month ago Problems with the less based style.min.css #3012 but we had to wait for bootstrap v3 to fix it (@Carreau, are we already using v3 in master??). I have modified this in the makefile of your repository until we implement the proper solution: https://github.com/scopatz/mc2013/pull/1/files#L0R8

Wow! Thanks a ton.

Unfortunately, I am not really able to regenerate the pdf that you see. Even with firefox, I was still only able to get the first slide: http://scopatz.s3.amazonaws.com/mozilla_localhost_8000_scopatz_mc13.reveal.pdf

However, by playing around with the print options ("Print Background Color" and "Print Background Images") I was able to get the back ground color visible. (Also, what system are you on? I am on Ubuntu and half the time its native print manager pops up. I hope this isn't platform-dependent too...)

Thanks for trying. A blog post would be super helpful. Any other advice?

[damianavila]

Anthony, did you merge my PR #3635 before making the attempt?
If you not merge it, then the /print/pdf.css stylesheet will not load and probably you will get the pdf you have pointed out (I see the navigation arrows in your pdf, which means that, probably, the stylesheet is not loading correctly).
If you don't what to merge it just add a slash after print in this line:

document.write( '<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.4.0/css/print/' +

The complete line has to look like this one: https://github.com/scopatz/mc2013/blob/master/pres/scopatz_mc13.reveal.html#L21
You can make it by hand or with the makefile until the PR is merged...
BTW, I am in Ubuntu 12.04...

Please, before making any other attempt in the conversion, test the reveal.html slideshow I PRed to your repository and try to print it, just to know if there any other problem besides the conversion itself.

[scopatz]

Hi @damianavila, You are right, I totally missed #3635 and when I add in the extra slash after the print, everything seems to work like you showed. Thanks!

I agree that the firefox printing looks better than the chrome one (which doesn't seem to split the pages correctly).

[damianavila]

@scopatz the missing slash was merged, so with the current master you only need to use the makefile and the custom.css I PR-ed to you yesterday to make it work.
Thanks for open the issue!

Cheers.
Damián.

[scopatz]

Thanks again for getting this in!