xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hakim El Hattab
2013-06-09 16:12:50 +02:00
parent ff35847fc6
commit 4d164dc5b6
6 changed files with 77 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
css/print/pdf.css
View File

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

23
css/reveal.css
View File

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

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
index.html
View File

@@ -201,19 +201,13 @@
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a> </a>
</section> </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> <h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre> <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>
<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> <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> <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>
</section> </section>

36
js/reveal.js
View File

@@ -254,6 +254,10 @@ var Reveal = (function(){
*/ */
function createBackgrounds() { function createBackgrounds() {
if( isPrintingPDF() ) {
document.body.classList.add( 'print-pdf' );
}
// Clear prior backgrounds // Clear prior backgrounds
dom.background.innerHTML = ''; dom.background.innerHTML = '';
dom.background.classList.add( 'no-transition' ); dom.background.classList.add( 'no-transition' );
@@ -271,6 +275,7 @@ var Reveal = (function(){
}; };
var element = document.createElement( 'div' ); var element = document.createElement( 'div' );
element.className = 'slide-background';
if( data.background ) { if( data.background ) {
// Auto-wrap image urls in url(...) // Auto-wrap image urls in url(...)
@@ -297,12 +302,24 @@ var Reveal = (function(){
// Iterate over all horizontal slides // Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { 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 // Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { 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, * Causes the address bar to hide on mobile devices,
* more vertical space ftw. * more vertical space ftw.
@@ -713,7 +739,7 @@ var Reveal = (function(){
*/ */
function layout() { function layout() {
if( dom.wrapper ) { if( dom.wrapper && !isPrintingPDF() ) {
// Available space to scale within // Available space to scale within
var availableWidth = dom.wrapper.offsetWidth, var availableWidth = dom.wrapper.offsetWidth,
@@ -1491,11 +1517,11 @@ var Reveal = (function(){
// states of their slides (past/present/future) // states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) { 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 ) { 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' );
} ); } );

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long