missing images when using casperjs to generate pdf from slidify (HTML5) slides

2
votes

Overview

I am trying to generate a pdf doc from R markdown document (using ramnathv's slidify library, and the io2012 framework). This process is described briefly here.

The one-liner he provides works perfectly, except that I don't see images in my pdf doc.

However, in the example given above which links to jtleek's repository (available here), it appears that images are included in generated pdfs, successfully.

I am not sure if the problem lies with my javascript, or with the HTML code generated by slidify/R.

Replicating the Problem

The problem can be replicated as follows : 

casperjs makepdf.js http://jburos.github.io/test-slidify-to-pdf/index.html index.pdf 1000

[ NOTE: In order for the example to work, you have to have installed casperjs & phantomjs. ]

Where the contents of makepdf.js are: 

var casper = require('casper').create({viewportSize:{width:1500,height:1000}});
var args = casper.cli.args;
var imgfile = (args[1] || Math.random().toString(36).slice(2))
casper.start(args[0], function() {
  this.wait(args[2], function(){
    this.captureSelector(imgfile, "slides");
  });
});

casper.run();

Alternatively, you can replicate the problem by cloning my git repository, 

git clone [email protected]:jburos/test-slidify-to-pdf.git
cd test-slidify-to-pdf
casperjs makepdf.js  index.pdf 1000

Again, the problem is that the index.pdf doc does not include any images, which are rendered by index.html.

Background

I would note that the full process has several steps:

  1. Use R/slidify/knitR to convert
    • .Rmd file -> .md file
    • .md file -> .html file
  2. Use casperjs to convert
    • .html file -> .pdf file

Alternate methods of generating a pdf from Rmd I've considered include:

  1. using pandoc to generate beamer pdf: pandoc index.md -t beamer -o index_beamer.pdf
    • yields ! LaTeX Error: File ``ifluatex.sty' not found.
  2. using Chrome browser to print index.html to pdf
    • yields left-truncated image file, as described in the above post
  3. using pandoc to generate pdf from md file:
    • yields pdf (not slideshow style) also not containing images

Many thanks for your assistance.

1
javascriptrpdf-generationcasperjsslidify

1 Answers

2
votes

Thank you for the detailed question. At first, I thought the issue was a reference problem, so I ran

casperjs makepdf.js index.html index.pdf 3000 --verbose=true --log-level=info

This gave no useful information, so I replaced one of the image srces with a base64 encoded image. This still did not show, so I knew it must be the Javascript or CSS. Indeed, removing everything except for the img tag produced the correct result. A binary search on the tags in the header (e.g., remove half, and see if images show) narrowed the problem down to libraries/frameworks/io2012/css/default.css. Another binary search (removing half the file and regenerating the PDF each time) narrowed it down to these two lines:

 margin-left: -450px;
 margin-top: -350px;

in the CSS for slides > slide (line 246-247 of this file). I was able to fix the problem by adding

<style type="text/css">
 slides > slide {
   margin-left:0;
   margin-top:0;
 }
</style>

Finally, I submitted a pull request to your Github repo to fix the issue.

Since you are auto-generating this, you probably want to add an intermediate processing step that injects this CSS into the .html file, or--if your default.css is expected to be static and does not get regenerated--just remove the two margin styles from the delinquent CSS file directly.

screenshot of solution