support for PDF export in chrome (closes #92)

diff --git a/README.md b/README.md
index b03fbb01b3ca39675051726d843e84d0761a269a..484b27b8508ff0da4d9cdd1e52f1691c359b2b17 100644 (file)
--- a/README.md
+++ b/README.md
@@ -206,6 +206,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi
 - Fixed bug where hovering 3D links in Chrome caused them to disappear
 - Disable 3D links in IE and more accurate CSS feature detection
 - CSS is more relative in sizing to allow for low resolutions. Thanks [StereotypicalApps](https://github.com/StereotypicalApps)
+- PDF export
 
 #### 1.4
 - Main ```#reveal container``` is now selected via a class instead of ID

diff --git a/css/main.css b/css/main.css
index 621857be144d67a810c01aed3923e7a35181a3f0..9a33421779f4c82f2c6e2bc43b197e1ec2c83c16 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -216,6 +216,7 @@ body {
 
 .reveal code {
        font-family: monospace;
+       overflow-x: auto;
 }
 
 .reveal table th, 
@@ -474,6 +475,7 @@ body {
        top: 50%;
        margin-top: -320px;
        padding: 20px 0px;
+       overflow: visible;
        
        text-align: center;
 

diff --git a/css/print-pdf.css b/css/print-pdf.css
new file mode 100644 (file)
index 0000000..c784253
--- /dev/null
+++ b/css/print-pdf.css
@@ -0,0 +1,147 @@
+/* Default Print Stylesheet Template
+   by Rob Glazebrook of CSSnewbie.com
+   Last Updated: June 4, 2008
+
+   Feel free (nay, compelled) to edit, append, and 
+   manipulate this file as you see fit. */
+
+
+/* SECTION 1: Set default width, margin, float, and
+   background. This prevents elements from extending 
+   beyond the edge of the printed page, and prevents
+   unnecessary background images from printing */
+* {
+       -webkit-print-color-adjust: exact; 
+}
+
+body {
+       font-size: 20pt;
+       width: auto;
+       height: auto;
+       border: 0;
+       margin: 0 5%;
+       padding: 0;
+       float: none !important;
+       overflow: visible;
+}
+
+html {
+       width: auto;
+       height: auto;
+       overflow: visible;
+}
+
+/* SECTION 2: Remove any elements not needed in print. 
+   This would include navigation, ads, sidebars, etc. */
+.nestedarrow, 
+.controls a, 
+.reveal .progress, 
+.reveal.overview,
+.fork-reveal,
+.share-reveal,
+.state-background {
+       display:none;
+}
+
+/* SECTION 3: Set body font face, size, and color.
+   Consider using a serif font for readability. */
+body, p, td, li, div, a {
+       font-size: 20pt;
+}
+
+/* SECTION 4: Set heading font face, sizes, and color.
+   Diffrentiate your headings from your body text.
+   Perhaps use a large sans-serif for distinction. */
+h1,h2,h3,h4,h5,h6 {
+       text-shadow: 0 0 0 #000 !important;
+}
+
+/* SECTION 5: Make hyperlinks more usable.
+   Ensure links are underlined, and consider appending
+   the URL to the end of the link for usability. */
+a:link, 
+a:visited {
+       font-weight: bold;
+       text-decoration: underline;
+}
+
+
+/* SECTION 6: more reveal.js specific additions by @skypanther */
+ul, ol, div, p {
+       visibility: visible;
+       position: static;
+       width: auto;
+       height: auto;
+       display: block;
+       overflow: visible;
+       margin: auto;
+}
+.reveal .slides {
+       position: static;
+       width: 100%;
+       height: auto;
+
+       left: auto;
+       top: auto;
+       margin-left: auto;
+       margin-top: auto;
+       padding: auto;
+
+       overflow: visible;
+       display: block;
+
+       text-align: center;
+       -webkit-perspective: none;
+          -moz-perspective: none;
+           -ms-perspective: none;
+               perspective: none;
+
+       -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+          -moz-perspective-origin: 50% 50%;
+           -ms-perspective-origin: 50% 50%;
+               perspective-origin: 50% 50%;
+}
+.reveal .slides>section, .reveal .slides>section>section, 
+.reveal .slides>section.past, .reveal .slides>section.future,
+.reveal.linear .slides>section, .reveal.linear .slides>section>section,
+.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
+       
+       visibility: visible;
+       position: static;
+       width: 100%;
+       height: auto;
+       display: block;
+       overflow: visible;
+
+       left: 0%;
+       top: 0%;
+       margin-left: 0px;
+       margin-top: 15%;
+       padding: 20px 0px;
+
+       opacity: 1;
+
+       -webkit-transform-style: flat;
+          -moz-transform-style: flat;
+           -ms-transform-style: flat;
+               transform-style: flat;
+
+       -webkit-transform: none;
+          -moz-transform: none;
+           -ms-transform: none;
+               transform: none;
+}
+.reveal section {
+       page-break-after: always !important; 
+       display: block !important;
+}
+.reveal section.stack {
+       margin-top: 0% !important;
+       page-break-after: avoid !important; 
+}
+.reveal section .fragment {
+       opacity: 1 !important;
+}
+.reveal img {
+       box-shadow: none;
+}
\ No newline at end of file

diff --git a/css/print.css b/css/print.css
index 519120ed42e1285a22af7c04f77995e74aa628ab..0ac55975599f9dcd95b6c9b73fbd3e1178e0c13a 100644 (file)
--- a/css/print.css
+++ b/css/print.css
@@ -11,7 +11,7 @@
    beyond the edge of the printed page, and prevents
    unnecessary background images from printing */
 body {
-       background: #fff url(none);
+       background: #fff;
        font-size: 13pt;
        width: auto;
        height: auto;
@@ -32,8 +32,11 @@ html {
    This would include navigation, ads, sidebars, etc. */
 .nestedarrow, 
 .controls a, 
-.reveal .progress span, 
-.reveal.overview {
+.reveal .progress, 
+.reveal.overview,
+.fork-reveal,
+.share-reveal,
+.state-background {
        display:none;
 }
 

diff --git a/index.html b/index.html
index 2845842cda871f9a8a600ae34b425d25f8da5143..c4cf2941d820c1fd0fb2c7f449a2854456f2138d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -16,10 +16,13 @@
                
                <link rel="stylesheet" href="css/reset.css">
                <link rel="stylesheet" href="css/main.css">
-               <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
-
                <link rel="stylesheet" href="lib/css/zenburn.css">
 
+               <script>
+                       // If the query includes print-pdf we'll use the fancy print CSS
+                       document.write( '<link rel="stylesheet" href="css/' + (window.location.search.match( /print-pdf/gi ) ? 'print-pdf.css' : 'print.css') + '" type="text/css" media="print">' );
+               </script>
+
                <!--[if lt IE 9]>
                <script src="lib/js/html5shiv.js"></script>
                <![endif]-->
@@ -36,11 +39,7 @@
                        <div class="slides">
                                <section>
                                        <h1>Reveal.js</h1>
-                                       <h3 class="inverted">CSS 3D Presentations</h3>
-                                       <script>
-                                               // Delicously hacky. Look away.
-                                               if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
-                                       </script>
+                                       <h3 class="inverted">HTML Presentations Made Easy</h3>
                                </section>
                                
                                <section>
@@ -223,7 +222,7 @@ function linkify( selector ) {
                                <section>
                                        <h2>Intergalactic Interconnections</h2>
                                        <p>
-                                               You can link between slides internally,<br/>
+                                               You can link between slides internally,
                                                <a href="#/2/3">like this</a>.
                                        </p>
                                </section>
@@ -333,7 +332,7 @@ function linkify( selector ) {
                        // Load the scripts and, when completed, initialize reveal.js
                        head.js.apply( null, scripts );
                        
-               </script>
+               </script>x
 
        </body>
 </html>

diff --git a/js/reveal.js b/js/reveal.js
index 432f80db8a9b1782a39479eb26bec1c28d6dcfcb..593fad413297a728a3f0fab5e7fbf6d5901f4854 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1,5 +1,5 @@
 /*!
- * reveal.js 1.5 r13
+ * reveal.js 1.5 r14
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *