Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Print version? #28

Closed
kizu opened this issue Jul 12, 2011 · 11 comments
Closed

Print version? #28

kizu opened this issue Jul 12, 2011 · 11 comments
Labels
feature

Comments

@kizu
Copy link
Member

kizu commented Jul 12, 2011

It'd be super cool if you'd manage to make a print stylesheet that would make print version look almost like the actual presentation.

With that you could easily convert Shower presentation to pdf just by printing it to pdf on mac.
@pepelsbey
Copy link
Member

Good idea: https://github.com/remy/present/blob/master/present.js#L214

    window.onbeforeprint = function () {
      flatStateBeforePrint = flat;
      updateReability();
    };

    window.onafterprint = function () {
      flat = flatStateBeforePrint;
      updateReability();
    };

@maraujop
Copy link

Any updates on this? how can I generate a pdf from my slides at the moment?

Cheers

@pepelsbey
Copy link
Member

You can use http://www.princexml.com/ with extra CSS styling to generate exact copies of your slides. But I'm still working on it. And the key problem now is the support of CSS transforms in upcoming Prince 8.1.

@maraujop
Copy link

I've used PrinceXML before, but in this case I would first have to move my slides to XHTML, right?

The generated pdf right now has text and images out of the frames and looks awful...

@pepelsbey
Copy link
Member

PrinceXML works perfect with HTML, for example: here's the additional print.css inside theme folder that removes shadows and transforms from the .list view:

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

/* List
---------------------------------------- */
.list {
    float:none;
    padding:0;
    background:#FFF;
    }

/* Caption */
.list .caption {
    display:none;
    }

/* Slide */
.list .slide {
    float:none;
    margin:0;
    padding:0;
    }
    .list .slide > DIV {
        width:1024px;
        height:640px;
        background:none;
        }
    .list .slide > DIV,
    .list .slide > DIV:hover {
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
        }
    .list .slide SECTION {
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
        }
        .list .slide:after {
            position:absolute;
            bottom:85px;
            left:120px;
            color:#BBB;
            line-height:1;
            text-shadow:none;
            }

…placed in the <head> or document:

<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">

And with prince -s themes/ribbon/styles/style.css --media print print.htm command I can output nice PDF.

@maraujop
Copy link

Thanks a lot Vadim, that really helped!

Ok, when using print.css things start working. One thing more needs to be added to the htm file:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

This is because current princeXML implementation doesn't parse HTML5 correctly.

To the previous CSS I've had to add this:

.slide.shout H2 {
    top: 30%;
}

Also image within section that are too big, don't show up in the pdf, so I had to resize them. Besides this, results are great and I think this should be added to the README and the project, as some people are not using shower because they cannot generate pdfs for sharing on slideshare or speakerdeck.

Cheers,
Miguel

@pepelsbey
Copy link
Member

Yes it will be added to the readme and project itself after some development / testing, I think it would be the next Shower update.

@pepelsbey
Copy link
Member

Miguel I fould another tool that works better: http://code.google.com/p/wkhtmltopdf/

It works almost fine with this parameters and print.css:

wkhtmltopdf -q --page-width 272mm --page-height 170mm -T 0 -R 0 -L 0 -B 0 print.htm print.pdf

But print.css should be enablem manually, it doesn't support media="print"

@maraujop
Copy link

What do you mean with enabled manually?

I have downloaded the latest binary and tried your command. The results I get are worse than the ones with princeXML, some of the slides get cut in between pages. The results are pretty much the same ones that I get when I do print as a file (pdf) in Linux.

Am I doing something wrong?

@pepelsbey
Copy link
Member

New experiment with printing Shower via wkhtmltopdf has ended with following print.sh script:

#!/bin/bash

file=$1
name=${file%.*}

echo 'Printing…'

wkhtmltopdf -T 0 -R 0 -B 0 -L 0 --page-width 272 --page-height 170 --print-media-type --quiet ${file} ${name}.pdf

echo 'Finished.'

…and new print.css for the Ribbon theme in master-new branch.

@pepelsbey
Copy link
Member

Fixes for the detault theme, see print.css, scripts/print.sh and upcoming printing documentation in the Wiki.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pepelsbey @kizu @maraujop