Export to PDF

[kynan]

Is there a "nice" way to export a Remark presentation as a PDF? By nice I mean 1) rendered like the screen output as closely as possible and 2) in vector format i.e. slides not rendered as raster images and concatenated.

It seems reveal.js has a PDF export via a print stylesheet, which unfortunately doesn't work on Linux.

[gnab]

Currently there aren't, but it's definitely on the list of features that would be nice to have, via printing, like reveal.js does.

[Version2beta]

Does this mean reveal.js doesn't work to print to PDF on Mac OSX? I too am receiving only the first page.

[kynan]

@Version2beta I think you should discuss that in the revelant reveal.js issues.

[craftgear]

+1

And is there any workaround for the time being?

[gnab]

The current version of remark now supports exporting the current, single slide to PDF via Chrome's print functionality. It's kind of useless as of right now, but export of all slides is on it's way.

[gnab]

The last release 0.5.6 of remark now supports exporting to PDF via Chrome's print preview and Save to PDF option.

https://github.com/gnab/remark/releases/tag/v0.5.6

[MonsterSupreme]

If I set the ratio to 4:3, and start to write and tune the slide content:
remark.create({ratio: "4:3"})
everything is OK, and exporting to PDF via Chrome is also correct.
However, if I set the ratio to 16:9, and start to write and tune the slide content:
remark.create({ratio: "4:3"})
everything still looks good, but exporting to PDF via Chrome will be a mess, especially when there are images inside.

[gnab]

Printing has primarily been tested for a display ratio of 4:3. If this is of importance to you, please create a new issue regarding 16:9 support :)

[CatTail]

Greate job! 👍

[danielstankiewicz]

Regression: export to PDF doesn't work in Chrome 39.0. Despite of using ratio of 4:3 slides do not fit to PDF page. Try on remarkjs.com site.

[kynan]

Regression confirmed on Chromium 38.0.2125.111 Built on Ubuntu 14.04, running on LinuxMint 17 (290379) (64-bit)

[laudenberg]

@danielstankiewicz @kynan I "fixed" this by setting device resolution to 1024x768 in Chrome DevTools.

[kdabir]

@laudenberg thanks for 1024x768 tip. without it the layout was coming out with wide left margin.

[freemancw]

+1 for the 1024x768 tip!

[pitr-ch]

thanks for the tip!

[Loreia]

On my wide screen, I had to set 1024x576.
Thanks for the tip!!

[leonardinius]

Just to confirm:

• It works well on Latest chrome Version 40.0.2214.111 m - win7 - 64
• Doesn't work on well on latest chromium (same box)
• Doesn't work well in Yandex! Browser (on top of chrome)

---

BTW, shouldn;t the PDF export instruction be incorporated in Wiki?

[SR-G]

Had to switch to 1024x594 now on my Chome 40.0.2214.115 m (Win7), but still works indeed (as i have some dark pages from time to time, i still had a black tiny border on the next page with 1024x576).

[leonardinius]

Another problem discovered recently: it doesn't support text shadows / blurs etc.

[jeremie-lesage]

wkhtmltopdf works very well (http://wkhtmltopdf.org/)

sudo aptitude install wkhtmltopdf

wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf

or without margin

wkhtmltopdf --page-width 111 --page-height 148 -B 0 -L 0 -R 0 -T 0 -O "Landscape"  gnab.github.io/remark remark.pdf

[leonardinius]

@jeci-sarl It works, but for me it generates pdf with just one page insatead of 40, e.g. https://dl.dropboxusercontent.com/u/379506/out2.pdf

The command I used to generate it

wkhtmltoopd --page-width 111 --page-height 148 -B 0 -L 0 -R 0 -T 0 -O "Landscape" http://leonardinius.galeoconsulting.com/sweet-slides.rs/ out2.pdf

Edit

• It does the same for gnab.github.io/remark in my case (single page)
• If I instead of ubuntu default one, install the latest version from http://wkhtmltopdf.org/downloads.html page, it doesn't work completely.

It might it has something to do with my local setup.

[jeremie-lesage]

@leonardinius maybe it's due to version of wkhtmltopdf or QT, I'm on Debian 8 (QT 4.8.6).

$ wkhtmltopdf --version
wkhtmltopdf 0.12.1

[lexsys27]

I try to export pdf slides using chrome. I set device resolution to 1024x594 but now I have three slides on single pdf page. What settings should I adjust so slides will fit the page?

[leonardinius]

I don't recall the end result/solution (in the end it all worked fine
for me, except for text shadows), but I do distinctively remember I was
trying this in both Chrome/Chromium. Only one of those worked well for
me. Don't recall which one.

Hopefully it helps.

[lexsys27]

wkhtmltopdf doesn't work for me too: remark.pdf contain only grey box

$ wkhtmltopdf --version
wkhtmltopdf 0.12.2.1 (with patched qt)
$ wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf

[pat-s]

The easiest and most reliable way I have found to create pdfs is to install and use the
Window Resizer Extension

Then open the presentation in Chrome, use the extension to resize the window to 1024x768, and then print to pdf. This is the only way that worked reliably for me.

@cbrown1 worked best for me

[mmiladi]

@gnab Thanks for the nice framework! It happens quite often for me to send the final presentation around. How about creating a wiki section about PDF export and mentioning the window size trick there?

[isameer]

I found that trying to print worked correctly if I first hit 'C' to clone the presentation into a separate window and print from there. Otherwise, it would only print the first slide.

[sinedied]

Why not merge @mpusz fix into main source?

@page is standard and used by many other presentation libs, and would fix the issue for good.

[laudenberg]

chrome --headless --disable-gpu --print-to-pdf=/tmp/example.pdf 'http://example.com' also looks promising. I am currently not aware of any command line options to get rid of the margins, although it should be possible via Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

[eljefe6a]

@laudenberg I started a discussion on Decktape about this. I think you're going to need a NodeJS script to do the actual save of the printToPDF because it returns a base64 encoded string. I won't be a complicated script because Remark already does the hard work of rendering out each slide as a page during print.

[MonsterSupreme]

For me, I currently use the following settings:

<!DOCTYPE html>
<html>
<head>
    <title>IntelliJ IDEA</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../remark.css">
</head>
<body>
    <textarea id="source">
    
    <!-- My ow content -->

    </textarea>
    <script type="text/javascript" src="../remark-latest-min.js"></script>
    <script type="text/javascript">
        var slideshow = remark.create({
            ratio: '4:3'
        });
    </script>
</body>
</html>

And then in Chrome (this only works in Chrome), from the Developer Tools menu, toggle the Device Toolbar (the second icon from the left) to use its Responsive Web Design simulation capability:

Define an 800x600 device, print from it, and then you will get an almost perfect PDF output.

[cpina]

I have a presentation with some dark background so I wanted to cut it correctly to the pixel.

The solution was:

1. pdfcrop --verbose presentation.pdf : then checking the standard output I saw the bounding box of a dark slide which I used as a reference (in my case "79 211 535 554")
2. Then pdfcrop --bbox "79 211 535 554" non-cropped-presentation.pdf presentation.pdf

[ekstroem]

Trying to make a general fix for @mpusz solution above. Which javascript variable contains the actual (final) dimensions of the presentation. referenceWidth in scalar.js is the reference - is there a variable that contains the actual value after the ratio is changed? Or is it easily extractable?

[yihui]

Following @mpusz's suggestion above, I prepared a short JS function to set the page size dynamically, so that you don't need to worry about the aspect ratio:

(function() {
  var d = document, s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  if (!r) return;
  s.type = "text/css";
  s.innerHTML = "@page { size: " + r.style.width + " " + r.style.height +"; }";
  d.head.appendChild(s);
})();

[eljefe6a]

Chrome just started supporting headless mode. I created a Node.js script that uses the headless interface and writes out the PDF. I've tested it with Chrome 60 and it works well.

[kevinsimper]

If you want a squared presentation, you should change the page to this:

@page {
  size: 1024px 768px;
  margin: 0;
}

@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

[siso]

astefanutti/decktape worked like a charm for me:

$ docker run --rm -t -v `pwd`:/slides -v `pwd`:/home/user astefanutti/decktape /home/user/slides.html slides.pdf

Kudos to @astefanutti 🙇

[MilovanTomasevic]

When I add an effect to css

.remark-slide-container {
    transition: opacity 1s linear, right 1s ease-in-out;
    opacity: 0;
    right: 1000px;
}
.remark-visible {
    transition: opacity 1s linear, right 1s ease-in-out;
    opacity: 1;
    right: 0px;
}
.remark-fading {
    z-index: 9;
}
.remark-visible ~ .remark-slide-container {
    right: -1000px;
}

Then only the current page shows me on the print, all the others are empty - white.

I actually need to print the initial setup (because these effects make me a problem in print), does anyone know how to solve this problem?

slides

Well yes, and to mention, the docker generates slides without error :)

Tnx

[yihui]

@MilovanTomasevic I think you need to reset opacity for print media (i.e. define CSS separately for @media screen). See more about CSS media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[sinedied]

Yes, also removing the CSS animation for print media query works better 😉

[josephernest]

@lexsys27 I have the same problem (wkhtmltopdf 0.12.5 (with patched qt)):

wkhtmltopdf --page-width 111 --page-height 148  -O "Landscape"  gnab.github.io/remark remark.pdf

gives a single page grey box.

As of today (2020), what is the solution to make wkhtmltopdf work with remark? (I don't want to use decktape: installation failed for other reasons on my system)

[jhelvy]

FYI, I've been working on a package that builds xaringan slides to multiple output types: html, pdf, pptx, gif, and a couple options for a png of the first slide:
https://github.com/jhelvy/xaringanBuilder

[maxbechtold]

astefanutti/decktape worked like a charm for me:

$ docker run --rm -t -v `pwd`:/slides -v `pwd`:/home/user astefanutti/decktape /home/user/slides.html slides.pdf

Kudos to @astefanutti 🙇

It did work smoothly for me, too, but take into account the CORS problems and rather go through a locally hosted presentation (astefanutti/decktape#207)

[enricolacchin]

It seems that the problems with exporting to PDF can be easily fixed by small modifications in CSS. Add following:

@page {
  size: 1210px 681px;
  margin: 0;
}

@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

For 4:3 provide size: 908px 681px;. It still has some scaling issues to be fixed though.

Hope that helps.

It works perfectly!
It could be a little bit tricky to add the css in a file not yours but with "chrome inspection" everything can be done

[alexhernandezgarcia]

@enricolacchin that worked like a charm, thanks!