Remark: 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! :+1:

[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.

[jeci-sarl]

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.

[jeci-sarl]

@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

[eungjun-yi]

wkhtmltopdf does not work for me too for the same reason as @lexsys27.

[eljefe6a]

@jeci-sarl I spent the past two hours going through print options. Printing my slides caused a crash on Chromium and Google Chrome 37. I went through the wkhtmltopdf route. Like @lexsys27 and @npcode, I only get a blank, grey box. I was trying it on Linux and the tried it on Mac OSX too. Neither worked. I even tried going from 0.12.2.1 to 0.12.1 and that didn't help either. Also, it isn't the version of QT. The wkhtmltopdf docs say QT is statically linked.

I finally manually moved the window around to get the Chrome 41 to print it. It printed the files without crashing.

@gnab I'm wondering if the better workaround is to spawn a new window with JavaScript that is of a size known to print correctly.

[LimEJET]

Nobody's mentioned this, but printing doesn't work at all in Firefox, not even with the resolution thing in the dev tools.

[rabidaudio]

A hacky way I did this was to use PhantomJS's rasterize script. PDF outputs wouldn't work right, so I downloaded each as a png and used ghostscript/imagemagick to compile them:

#!/bin/bash
mkdir pdf-out
for i in {1..19}; do
  phantomjs rasterize.js http://localhost:5455/#${i} pdf-out/${i}.png "1600px*1200px"
done

convert pdf-out/{1..19}.png output.pdf
rm -r pdf-out

You'll need to download rasterize.js and change the 19s to however many slides you have.

Also note that it didn't grab the fonts for me. This is probably related to the 3-year-old PhantomJS bug that only got fixed this week

[M157q]

I've tried all the tips above except the PhantomJS one, none of those worked for me.
Anyway, I exported both my slides and those on the official website to PDF by using Safari 8.0.6 (10600.6.3) on my OS X 10.10.3.
Although the output PDF file is align left (not center), it's kinda acceptable for me.
For those people who are searching for a workaround like me, here are my steps:

1. Open the slides in your Safari browser.
2. Press Command + P or click File > Print from the tool bar.
3. Select the options. (For me, I changed the Orientation to horizontal and remove the last slides for Pages because it's blank)
   
   
   
   • 
   
   
4. Look for the “PDF” button in the lower left corner, click on that pull-down menu, and select “Save as PDF”
5. Check the PDF file.

Hope this workaround helps.

[varac]

i documentation how to export a remark slideshow in the README would be great. Still searching for the best instuctions..

[hjelmj]

Just tested printing to pdf using Google Chrome's "print to pdf" and it was working fine yesterday, but I updated to the latest version of Chrome last night (now on 44.0.2403.125 (64-bit) on Ubuntu) and it stopped working. Now I get more than one slide per page (yesterday I had one slide per page and it fitted the page perfectly). Tested both on the official remarkjs presentation and on one of my own...Anyone else had this problem?

[e9t]

Using Safari on a Mac worked for me as well.

[e9t]

When you have an unwanted margin with your PDF, this tool works conveniently: http://askubuntu.com/a/243252/138835

[hjelmj]

Thanks e9t, I'll try it out. Noticed that it works fine again now in Chrome (45.0.2454.85 (64-bit), Ubuntu). But could come in handy this tool.

[jberkus]

This is still broken in Chrome 45 on Ubuntu when I try it. It's formatting for portrait even if you use landscape, which means 1.5 slides per page.

[jberkus]

Updated: on my machine, it's kinda working if you set device resolution to 800x600. However, it slightly runs over the right margin, so display isn't great.

[shorttompkins]

:+1: Print dialog with Safari. Worked much better than Chrome (Chrome kept shrinking my slides whereas Safari kept them full screen per "page" in the PDF). Thanks @M157q !

[fczuardi]

Is there any way to include presenter's notes in the pdf? I am looking for a way that speakerdeck.com understands it. Thanks!

[baseliners]

+1 for question on presenter notes while printing/saving to PDF.

Also, is there a way to save as PDF without the slide transitions? (i.e. 1 slide instead of 4 for a slide with 4 incremental transitions). Thanks!

[kynan]

@fczuardi Please create a separate issue for that!

[cbrown1]

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.

[nchammas]

@cbrown1 - That Chrome extension did the trick for me. Thanks for sharing that tip!

The magic resolution that eliminated all margin overflow or underflow was 908 x 606, though I imagine everyone will find a different thing works for them.

[qris]

Oddly, printing in Chrome with current remark.min.js has an asymmetric margin around the slide (doesn't look great), but if I open Developer Tools and then print, I get no margin (perfect)! Don't know why.

[mpusz]

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.

[szpak]

Btw, I recently switched to Decktape (mentioned in #313) and works pretty well also with 16:9. The only encountered issue is https://github.com/astefanutti/decktape/issues/3.

[gerihu]

mpusz's fix with a modified CSS worked perfectly for me in Chromium 50. I set 1024px 768px for 4:3 ratio. Thank you so much!

[binchenX]

I can confirm mpusz's way works amazingly well ! Thanks!

[gshmu]

can not print code. wkhtmltopdf 0.12.2.4

[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