Export to PDF #50

Closed
kynan opened this Issue Jul 18, 2013 · 61 comments

Comments

Projects
None yet
@kynan

kynan commented Jul 18, 2013

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

This comment has been minimized.

Show comment
Hide comment
@gnab

gnab Jul 26, 2013

Owner

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.

Owner

gnab commented Jul 26, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Version2beta

Version2beta Aug 13, 2013

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

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

@kynan

This comment has been minimized.

Show comment
Hide comment
@kynan

kynan Aug 14, 2013

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

kynan commented Aug 14, 2013

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

@craftgear

This comment has been minimized.

Show comment
Hide comment
@craftgear

craftgear Aug 21, 2013

+1

And is there any workaround for the time being?

+1

And is there any workaround for the time being?

@gnab

This comment has been minimized.

Show comment
Hide comment
@gnab

gnab Sep 24, 2013

Owner

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.

Owner

gnab commented Sep 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@gnab

gnab Oct 3, 2013

Owner

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

Owner

gnab commented Oct 3, 2013

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

@gnab gnab closed this Oct 3, 2013

michaeljoseph added a commit to michaeljoseph/remarkable that referenced this issue Oct 6, 2014

michaeljoseph added a commit to michaeljoseph/remarkable that referenced this issue Oct 6, 2014

@MonsterSupreme

This comment has been minimized.

Show comment
Hide comment
@MonsterSupreme

MonsterSupreme Oct 7, 2014

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.

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

This comment has been minimized.

Show comment
Hide comment
@gnab

gnab Oct 7, 2014

Owner

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 :)

Owner

gnab commented Oct 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@CatTail

CatTail Nov 6, 2014

Greate job! 👍

CatTail commented Nov 6, 2014

Greate job! 👍

@danielstankiewicz

This comment has been minimized.

Show comment
Hide comment
@danielstankiewicz

danielstankiewicz Nov 19, 2014

Contributor

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.

Contributor

danielstankiewicz commented Nov 19, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kynan

kynan Nov 19, 2014

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

kynan commented Nov 19, 2014

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

@laudenberg

This comment has been minimized.

Show comment
Hide comment
@laudenberg

laudenberg Dec 17, 2014

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

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

@kdabir

This comment has been minimized.

Show comment
Hide comment
@kdabir

kdabir Jan 11, 2015

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

kdabir commented Jan 11, 2015

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

@freemancw

This comment has been minimized.

Show comment
Hide comment
@freemancw

freemancw Jan 16, 2015

+1 for the 1024x768 tip!

+1 for the 1024x768 tip!

@pitr-ch

This comment has been minimized.

Show comment
Hide comment
@pitr-ch

pitr-ch Jan 17, 2015

thanks for the tip!

pitr-ch commented Jan 17, 2015

thanks for the tip!

@Loreia

This comment has been minimized.

Show comment
Hide comment
@Loreia

Loreia Feb 5, 2015

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

Loreia commented Feb 5, 2015

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

@leonardinius

This comment has been minimized.

Show comment
Hide comment
@leonardinius

leonardinius Feb 7, 2015

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?

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

This comment has been minimized.

Show comment
Hide comment
@SR-G

SR-G Feb 27, 2015

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

SR-G commented Feb 27, 2015

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

This comment has been minimized.

Show comment
Hide comment
@leonardinius

leonardinius Feb 27, 2015

@jeci-sarl

This comment has been minimized.

Show comment
Hide comment
@jeci-sarl

jeci-sarl Mar 3, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@leonardinius

leonardinius Mar 3, 2015

@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 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

This comment has been minimized.

Show comment
Hide comment
@jeci-sarl

jeci-sarl Mar 4, 2015

@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

@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

@junderhill junderhill referenced this issue Mar 6, 2015

Closed

Export to PDF #212

@lexsys27

This comment has been minimized.

Show comment
Hide comment
@lexsys27

lexsys27 Apr 9, 2015

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?

lexsys27 commented Apr 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@leonardinius

leonardinius Apr 9, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@lexsys27

lexsys27 Apr 9, 2015

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

lexsys27 commented Apr 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@eungjun-yi

eungjun-yi Apr 16, 2015

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

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

@eljefe6a

This comment has been minimized.

Show comment
Hide comment
@eljefe6a

eljefe6a Apr 18, 2015

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

@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

This comment has been minimized.

Show comment
Hide comment
@LimEJET

LimEJET May 12, 2015

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

LimEJET commented May 12, 2015

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

@rabidaudio

This comment has been minimized.

Show comment
Hide comment
@rabidaudio

rabidaudio May 20, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@M157q

M157q Jun 15, 2015

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.

M157q commented Jun 15, 2015

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

This comment has been minimized.

Show comment
Hide comment
@varac

varac Jul 9, 2015

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

varac commented Jul 9, 2015

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

@hjelmj

This comment has been minimized.

Show comment
Hide comment
@hjelmj

hjelmj Jul 31, 2015

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?

hjelmj commented Jul 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@e9t

e9t Aug 24, 2015

Using Safari on a Mac worked for me as well.

pdf

e9t commented Aug 24, 2015

Using Safari on a Mac worked for me as well.

pdf

@e9t

This comment has been minimized.

Show comment
Hide comment
@e9t

e9t Aug 29, 2015

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

e9t commented Aug 29, 2015

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

@hjelmj

This comment has been minimized.

Show comment
Hide comment
@hjelmj

hjelmj Sep 7, 2015

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.

hjelmj commented Sep 7, 2015

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 comment has been minimized.

Show comment
Hide comment
@jberkus

jberkus Sep 9, 2015

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 commented Sep 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jberkus

jberkus Sep 9, 2015

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.

jberkus commented Sep 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@shorttompkins

shorttompkins Oct 5, 2015

👍 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 !

👍 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

This comment has been minimized.

Show comment
Hide comment
@fczuardi

fczuardi Nov 30, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@baseliners

baseliners Jan 28, 2016

+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!

+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

This comment has been minimized.

Show comment
Hide comment
@kynan

kynan Jan 29, 2016

@fczuardi Please create a separate issue for that!

kynan commented Jan 29, 2016

@fczuardi Please create a separate issue for that!

@cbrown1

This comment has been minimized.

Show comment
Hide comment
@cbrown1

cbrown1 Feb 1, 2016

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 commented Feb 1, 2016

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 nchammas referenced this issue in gistdeck/gistdeck.github.com Feb 19, 2016

Closed

Export GistDeck to PDF #3

@nchammas

This comment has been minimized.

Show comment
Hide comment
@nchammas

nchammas Feb 19, 2016

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

@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

This comment has been minimized.

Show comment
Hide comment
@qris

qris May 31, 2016

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.

qris commented May 31, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mpusz

mpusz Jun 6, 2016

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.

mpusz commented Jun 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@szpak

szpak Jun 6, 2016

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

szpak commented Jun 6, 2016

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

@gerihu

This comment has been minimized.

Show comment
Hide comment
@gerihu

gerihu Jun 12, 2016

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!

gerihu commented Jun 12, 2016

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!

@pierrchen

This comment has been minimized.

Show comment
Hide comment
@pierrchen

pierrchen Jul 22, 2016

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

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

rberaldo added a commit to opensanca/projeto-gnu-fsf that referenced this issue Aug 13, 2016

@gshmu

This comment has been minimized.

Show comment
Hide comment
@gshmu

gshmu Nov 8, 2016

can not print code. wkhtmltopdf 0.12.2.4
2016-11-08t18 18 46_001
2016-11-08t18 17 45_001

gshmu commented Nov 8, 2016

can not print code. wkhtmltopdf 0.12.2.4
2016-11-08t18 18 46_001
2016-11-08t18 17 45_001

@pat-s

This comment has been minimized.

Show comment
Hide comment
@pat-s

pat-s Jan 4, 2017

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

pat-s commented Jan 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmiladi

mmiladi Jan 26, 2017

@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?

mmiladi commented Jan 26, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@isameer

isameer Feb 17, 2017

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.

isameer commented Feb 17, 2017

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.

badbye referenced this issue in badbye/xaringan Feb 19, 2017

@d6y d6y referenced this issue in underscoreio/remarkjs-template Feb 23, 2017

Open

Fix CSS for Chrome PDF Print #3

@sinedied

This comment has been minimized.

Show comment
Hide comment
@sinedied

sinedied Apr 9, 2017

Contributor

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.

Contributor

sinedied commented Apr 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@laudenberg

laudenberg Jul 5, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@eljefe6a

eljefe6a Jul 6, 2017

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

eljefe6a commented Jul 6, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@MonsterSupreme

MonsterSupreme Jul 19, 2017

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:

intellij idea 2017-07-19 10-22-46

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

intellij idea 2017-07-19 10-14-18

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:

intellij idea 2017-07-19 10-22-46

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

intellij idea 2017-07-19 10-14-18

@cpina

This comment has been minimized.

Show comment
Hide comment
@cpina

cpina Jul 27, 2017

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

cpina commented Jul 27, 2017

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

@cboettig cboettig referenced this issue in yihui/xaringan Aug 7, 2017

Closed

Printing to pdf #65

@ekstroem

This comment has been minimized.

Show comment
Hide comment
@ekstroem

ekstroem Aug 8, 2017

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?

ekstroem commented Aug 8, 2017

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

This comment has been minimized.

Show comment
Hide comment
@yihui

yihui Aug 9, 2017

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);
})();

yihui commented Aug 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eljefe6a

eljefe6a Aug 9, 2017

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.

eljefe6a commented Aug 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kevinsimper

kevinsimper Sep 6, 2017

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;
  }
}

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;
  }
}

@sinedied sinedied referenced this issue in astefanutti/decktape Sep 6, 2017

Closed

Backslide / Remark.js PDF rendering issue #109

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment