ahmadawais / html5slides

Automatically exported from code.google.com/p/html5slides
1 stars 2 forks source link

How to export slides to other formats, e.g. pdf? #14

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
I was wondering if the slides produced can be exported to pdf or imported to 
Google Docs.

Thanks,

Cuneyt

Original issue reported on code.google.com by ctaski...@gmail.com on 19 Sep 2011 at 9:30

GoogleCodeExporter commented 8 years ago
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.ze...@gmail.com on 25 Sep 2011 at 5:05

GoogleCodeExporter commented 8 years ago
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 nbubi...@gmail.com on 18 Nov 2011 at 9:08

GoogleCodeExporter commented 8 years ago
Need too.

Original comment by wys...@gmail.com on 29 Nov 2011 at 3:51

GoogleCodeExporter commented 8 years ago
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 wys...@gmail.com on 3 Dec 2011 at 9:43

GoogleCodeExporter commented 8 years ago
Using the print function worked for me. Thanks!

Original comment by gooty...@gmail.com on 1 Mar 2012 at 2:28

GoogleCodeExporter commented 8 years ago
Hmm, this only displays the first slide on the print preview.

Original comment by i...@alexraasch.de on 22 Sep 2012 at 3:36

GoogleCodeExporter commented 8 years ago
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 adduci.m...@gmail.com on 26 Nov 2014 at 9:49

GoogleCodeExporter commented 8 years ago
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 adduci.m...@gmail.com on 26 Nov 2014 at 10:13