revamp pdf printing to support per-slide backgrounds (closes #453)

css/print/pdf.css

@@ -17,8 +17,9 @@
 
 body {
 	font-size: 18pt;
-	width: auto;
-	height: auto;
+	width: 297mm;
+	height: 229mm;
+	margin: 0 auto !important;
 	border: 0;
 	padding: 0;
 	float: none !important;
@@ -88,10 +89,8 @@ ul, ol, div, p {
 
 	left: auto;
 	top: auto;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: auto;
-	padding: auto;
+	margin: 0 !important;
+	padding: 0 !important;
 
 	overflow: visible;
 	display: block;
@@ -113,18 +112,18 @@ ul, ol, div, p {
 	page-break-after: always !important;
 
 	visibility: visible !important;
-	position: static !important;
+	position: relative !important;
 	width: 100% !important;
-	height: auto !important;
-	min-height: initial !important;
+	height: 229mm !important;
+	min-height: 229mm !important;
 	display: block !important;
-	overflow: visible !important;
+	overflow: hidden !important;
 
 	left: 0 !important;
 	top: 0 !important;
-	margin-left: 0px !important;
-	margin-top: 50px !important;
-	padding: 20px 0px !important;
+	margin: 0 !important;
+	padding: 2cm 1cm 0 1cm !important;
+	box-sizing: border-box !important;
 
 	opacity: 1 !important;
 
@@ -139,9 +138,11 @@ ul, ol, div, p {
 	        transform: none !important;
 }
 .reveal section.stack {
-	margin: 0px !important;
-	padding: 0px !important;
+	margin: 0 !important;
+	padding: 0 !important;
 	page-break-after: avoid !important;
+	height: auto !important;
+	min-height: auto !important;
 }
 .reveal section .fragment {
 	opacity: 1 !important;
@@ -152,6 +153,17 @@ ul, ol, div, p {
 	    -ms-transform: none !important;
 	        transform: none !important;
 }
+.reveal section .slide-background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 0;
+}
+.reveal section>* {
+	position: relative;
+	z-index: 1;
+}
 .reveal img {
 	box-shadow: none;
 }

css/reveal.css

@@ -1309,7 +1309,7 @@ body {
 	width: 100%;
 	height: 100%;
 }
-	.reveal>.background div {
+	.reveal .slide-background {
 		position: absolute;
 		width: 100%;
 		height: 100%;
@@ -1327,13 +1327,18 @@ body {
 		     -o-transition: all 650ms ease;
 		        transition: all 650ms ease;
 	}
-	.reveal>.background div.present {
+	.reveal .slide-background.present {
 		opacity: 1;
 		visibility: visible;
 	}
 
+	.print-pdf .reveal .slide-background {
+		opacity: 1 !important;
+		visibility: visible !important;
+	}
+
 /* Linear sliding transition style */
-.reveal[data-background-transition=linear]>.background div {
+.reveal[data-background-transition=linear]>.background .slide-background {
 	opacity: 1;
 
 	-webkit-backface-visibility: hidden;
@@ -1341,14 +1346,14 @@ body {
 	    -ms-backface-visibility: hidden;
 	        backface-visibility: hidden;
 }
-	.reveal[data-background-transition=linear]>.background div.past {
+	.reveal[data-background-transition=linear]>.background .slide-background.past {
 		-webkit-transform: translate(-100%, 0);
 		   -moz-transform: translate(-100%, 0);
 		    -ms-transform: translate(-100%, 0);
 		     -o-transform: translate(-100%, 0);
 		        transform: translate(-100%, 0);
 	}
-	.reveal[data-background-transition=linear]>.background div.future {
+	.reveal[data-background-transition=linear]>.background .slide-background.future {
 		-webkit-transform: translate(100%, 0);
 		   -moz-transform: translate(100%, 0);
 		    -ms-transform: translate(100%, 0);
@@ -1356,14 +1361,14 @@ body {
 		        transform: translate(100%, 0);
 	}
 
-	.reveal[data-background-transition=linear]>.background div>div.past {
+	.reveal[data-background-transition=linear]>.background .slide-background>.slide-background.past {
 		-webkit-transform: translate(0, -100%);
 		   -moz-transform: translate(0, -100%);
 		    -ms-transform: translate(0, -100%);
 		     -o-transform: translate(0, -100%);
 		        transform: translate(0, -100%);
 	}
-	.reveal[data-background-transition=linear]>.background div>div.future {
+	.reveal[data-background-transition=linear]>.background .slide-background>.slide-background.future {
 		-webkit-transform: translate(0, 100%);
 		   -moz-transform: translate(0, 100%);
 		    -ms-transform: translate(0, 100%);
@@ -1373,13 +1378,13 @@ body {
 
 
 /* Global transition speed settings */
-.reveal[data-transition-speed="fast"]>.background div {
+.reveal[data-transition-speed="fast"]>.background .slide-background {
 	-webkit-transition-duration: 300ms;
 	   -moz-transition-duration: 300ms;
 	    -ms-transition-duration: 300ms;
 	        transition-duration: 300ms;
 }
-.reveal[data-transition-speed="slow"]>.background div {
+.reveal[data-transition-speed="slow"]>.background .slide-background {
 	-webkit-transition-duration: 900ms;
 	   -moz-transition-duration: 900ms;
 	    -ms-transition-duration: 900ms;

index.html

@@ -201,19 +201,13 @@
 							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
 						<h2>Image Backgrounds</h2>
 						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
-						<a href="#" class="image navigate-down">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-						</a>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px">
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
 						<h2>Repeated Image Backgrounds</h2>
 						<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
-						<a href="#" class="image navigate-next">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
-						</a>
 					</section>
 				</section>
 

js/reveal.js

@@ -254,6 +254,10 @@ var Reveal = (function(){
 	 */
 	function createBackgrounds() {
 
+		if( isPrintingPDF() ) {
+			document.body.classList.add( 'print-pdf' );
+		}
+
 		// Clear prior backgrounds
 		dom.background.innerHTML = '';
 		dom.background.classList.add( 'no-transition' );
@@ -271,6 +275,7 @@ var Reveal = (function(){
 			};
 
 			var element = document.createElement( 'div' );
+			element.className = 'slide-background';
 
 			if( data.background ) {
 				// Auto-wrap image urls in url(...)
@@ -297,12 +302,24 @@ var Reveal = (function(){
 		// Iterate over all horizontal slides
 		toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
 
-			var backgroundStack = _createBackground( slideh, dom.background );
+			var backgroundStack;
+
+			if( isPrintingPDF() ) {
+				backgroundStack = _createBackground( slideh, slideh );
+			}
+			else {
+				backgroundStack = _createBackground( slideh, dom.background );
+			}
 
 			// Iterate over all vertical slides
 			toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
 
-				_createBackground( slidev, backgroundStack );
+				if( isPrintingPDF() ) {
+					_createBackground( slidev, slidev );
+				}
+				else {
+					_createBackground( slidev, backgroundStack );
+				}
 
 			} );
 
@@ -597,6 +614,15 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Checks if this instance is being used to print a PDF.
+	 */
+	function isPrintingPDF() {
+
+		return ( /print-pdf/gi ).test( window.location.search );
+
+	}
+
 	/**
 	 * Causes the address bar to hide on mobile devices,
 	 * more vertical space ftw.
@@ -713,7 +739,7 @@ var Reveal = (function(){
 	 */
 	function layout() {
 
-		if( dom.wrapper ) {
+		if( dom.wrapper && !isPrintingPDF() ) {
 
 			// Available space to scale within
 			var availableWidth = dom.wrapper.offsetWidth,
@@ -1491,11 +1517,11 @@ var Reveal = (function(){
 		// states of their slides (past/present/future)
 		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
 
-			backgroundh.className = ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
+			backgroundh.className = 'slide-background ' + ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
 
 			toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
 
-				backgroundv.className = ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
+				backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
 
 			} );