Reveal.js: PDF export is broken : slides overlap

Created on 3 Jun 2015 · 19Comments · Source: hakimel/reveal.js

_C.f._ http://lab.hakim.se/reveal-js/?print-pdf
Visible in Chrome 43 & Firefox 38.
Sorry to not give more details, but I think the result after the link jump is self-explanatory.
I have no idea what is causing this, maybe css/print/pdf.css is broken ?

Source

Lucas-C

👍1

Most helpful comment

From the look of of the screenshots in this thread, the css/print/pdf.css isn't loading. Can you try manually including it in your HTML file and printing again?

That stylesheet is normally loaded using a small script in the head of the default index.html file: https://github.com/hakimel/reveal.js/blob/master/index.html#L16-L22. However that may stop working if the pdf.css or index.html files are moved to a different relative path or the script is removed from the index.html file.

hakimel on 7 Jun 2016

👍2

All 19 comments

Same issue here !

hadim on 5 Jun 2015

achauve on 10 Jun 2015

Cannot reproduce this? In Chrome 43 the slides do not overlap in print preview? Do you really use print preview to see the final layout of the slides for printing? The pure HTML presentation of the print layout does not show the real output.

ebertmi on 10 Jun 2015

I have this issue when I use data-background with an empty slide (just to show a fullscreen image). Then the background image is shown under the next slide when printing.

saimn on 10 Jun 2015

Ok so here is what it looks like under chrome 43 for me:

reveal-js_chrome43_initial_tmp_appearance

The screen above only appears during a second, and then I get the following (still broken) final screen :

reveal-js_chrome43_final_appearance

Lucas-C on 11 Jun 2015

But this is not the print preview! You need to adjust the page format and the borders for the final result.

ebertmi on 11 Jun 2015

@waywaaard is correct. The overlapping content doesn't matter for the final PDF output – it will only look like that before you open the print dialog.

hakimel on 11 Jun 2015

With

<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
....

the background overlaps with the next slide content:
2015-06-11-103436_1680x1050_scrot
This can be avoided by adding some fake content in the empty section (<div> </div>), but it can be surprising when discovering reveal.js

saimn on 11 Jun 2015

@saimn That looks like a bug, though unrelated to this issue. Would you mind opening a new issue for it?

hakimel on 11 Jun 2015

My mistake about the original report, sorry.
And thanks for helping me !

Lucas-C on 11 Jun 2015

Afternoon all :)

I'll try and keep it as short as possible as this might be already answered above as it's very similar symptoms (more severe in my case; see below screen shot). I've tried the above and it hasn't provided the desired solution; print preview still displays overlapping elements. I'm using a dummy presentation as a concept to get the fix before I apply to ours.

How it should look:

how_it_should_look

How it does look when I apply the '?print-pdf' extension onto the presentation URL:

how_it_does_look

And in print preview:

how_it_does_look_pp

I'm using Chrome (v43) and I'm pretty sure I'm using the latest reveal source files, so is there anything you guys can think of that might be causing the above? Any assistance would be greatly appreciated :)

Regards

Tom

tomwestwood on 17 Jun 2015

👍1

AbduKT on 3 Dec 2015

I had the same problem and could not solve it. Eventually I switched to decktape, which works like a charm.

Godrebh on 18 Mar 2016

👍1

Thanks @Godrebh . Interresting feedback about decktape !

llaville on 18 Mar 2016

Same Problem here. +1
Chromium Version 49.0.2623.108 Built on Ubuntu 14.04, running on LinuxMint 17.2 (64-bit)

sk1ll10 on 7 Jun 2016

From the look of of the screenshots in this thread, the css/print/pdf.css isn't loading. Can you try manually including it in your HTML file and printing again?

hakimel on 7 Jun 2016

👍2

Solved! Thx

edit: note for others -> if you include this your slides will always be in print mode! Comment out to be able to present again.

sk1ll10 on 7 Jun 2016

Hi,

It seems that I have a similar problem. I have added the pdf.css file and I've tried to print my presentation by adding the print-pdf parameter, and it's working for the slides with divs whose width is of 100%, but if I have several divs with other width it's not working.

An example with a width of 100%: