How to export slides to other formats, e.g. pdf? about html5slides

[GoogleCodeExporter]

My guess: Add a CSS for media: print, and you should be able to export to a PDF 
"printer" (whichever one depending on your platform.

Original comment by [email protected] on 25 Sep 2011 at 5:05

[GoogleCodeExporter]

I have the same need. This slide is cool, But I want the IE guy also can read 
my presentation. So I think the feature to convert to pdf is very useful. 

I have tested the print feature in Chrome, Firefox, Opera. Neither one can 
display correctly. 

Thanks.

Original comment by [email protected] on 18 Nov 2011 at 9:08

[GoogleCodeExporter]

Need too.

Original comment by [email protected] on 29 Nov 2011 at 3:51

[GoogleCodeExporter]

You can try that, you must include jquery :

function print() {
    $("body").css("background", "none");
    $("article").removeClass("far-past");
    $("article").removeClass("past");
    $("article").removeClass("current");
    $("article").removeClass("next");
    $("article").removeClass("far-next");
    $("*.to-build").removeClass("to-build");
    $("article").css("display", "block");
    $("article").css("top", "0");
    $("article").css("left", "0");
    $("article").css("margin", "0 0 9em 0");
    $("article").css("position", "relative");
}

Original comment by [email protected] on 3 Dec 2011 at 9:43

[GoogleCodeExporter]

Using the print function worked for me. Thanks!

Original comment by [email protected] on 1 Mar 2012 at 2:28

[GoogleCodeExporter]

Hmm, this only displays the first slide on the print preview.

Original comment by [email protected] on 22 Sep 2012 at 3:36

[GoogleCodeExporter]

I've managed to create a print.css file with the following content:

@media print {
    /* style sheet for print goes here */
    .slide-area {
        top: 0 !important;
        left: 0% !important;
    }

    #prev-slide-area {
      margin-left:0 !important;
    }
    #next-slide-area {
      margin-left:0 !important;
    }

    article > .current{ transform: none; }
    article > .far-past{ transform: none }
    article > .past{ transform: none }
    article > .current{ transform: none }
    article > .next{ transform: none }
    article > .far-next{ transform: none }

    *.to-build > .to-build{ transform: none }

    article 
    {
        display: block !important;
        top: 5% !important;
        left: 10% !important;
        margin: 0 0 9em 0 !important;
        position: relative !important;
        transform: none !important;
    }

}

on Firefox 33 works perfectly!

Original comment by [email protected] on 26 Nov 2014 at 9:49

[GoogleCodeExporter]

and for fill images, in printing mode, just do:

article.fill h3
    {
        position: absolute;
        z-index: 100 !important;
    }

    article.fill img
    {
        position: absolute;
        z-index: 0 !important;
    }

Original comment by [email protected] on 26 Nov 2014 at 10:13