diff options
| -rw-r--r-- | css/print/pdf.css | 54 | ||||
| -rw-r--r-- | css/reveal.css | 2 | ||||
| -rw-r--r-- | js/reveal.js | 75 |
3 files changed, 84 insertions, 47 deletions
diff --git a/css/print/pdf.css b/css/print/pdf.css index bf90b3d..559b05d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -17,8 +17,6 @@ body { font-size: 18pt; - width: 297mm; - height: 229mm; margin: 0 auto !important; border: 0; padding: 0; @@ -105,8 +103,6 @@ ul, ol, div, p { overflow: visible; display: block; - text-align: center; - -webkit-perspective: none; -moz-perspective: none; -ms-perspective: none; @@ -118,21 +114,15 @@ ul, ol, div, p { perspective-origin: 50% 50%; } .reveal .slides section { - page-break-after: always !important; visibility: visible !important; position: relative !important; - width: 100% !important; - height: 229mm !important; - min-height: 229mm !important; display: block !important; - overflow: hidden !important; + position: relative !important; - left: 0 !important; - top: 0 !important; margin: 0 !important; - padding: 2cm 2cm 0 2cm !important; + padding: 0 !important; box-sizing: border-box !important; opacity: 1 !important; @@ -154,19 +144,18 @@ ul, ol, div, p { height: auto !important; min-height: auto !important; } -.reveal .absolute-element { - margin-left: 2.2cm; - margin-top: 1.8cm; +.reveal img { + box-shadow: none; } -.reveal section .fragment { - opacity: 1 !important; - visibility: visible !important; - - -webkit-transform: none !important; - -moz-transform: none !important; - -ms-transform: none !important; - transform: none !important; +.reveal .roll { + overflow: visible; + line-height: 1em; +} +.reveal small a { + font-size: 16pt !important; } + +/* Slide backgrounds are placed inside of their slide when exporting to PDF */ .reveal section .slide-background { position: absolute; top: 0; @@ -174,26 +163,9 @@ ul, ol, div, p { width: 100%; z-index: 0; } +/* All elements should be above the slide-background */ .reveal section>* { position: relative; z-index: 1; } -.reveal img { - box-shadow: none; -} -.reveal .roll { - overflow: visible; - line-height: 1em; -} -.reveal small a { - font-size: 16pt !important; -} -.reveal.center .slides section:not(.stack) { - display: flex !important; - flex-direction: column; - align-items: center; - justify-content: center; - padding-top: 2em !important; - padding-bottom: 2em !important; -} diff --git a/css/reveal.css b/css/reveal.css index 806d064..7c3f5a1 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1328,6 +1328,8 @@ body { position: absolute; width: 100%; height: 100%; + top: 0; + left: 0; -webkit-perspective: 600px; -moz-perspective: 600px; diff --git a/js/reveal.js b/js/reveal.js index 7a032d0..982b951 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -333,6 +333,11 @@ var Reveal = (function(){ // Update all backgrounds updateBackground( true ); + // Special setup and config is required when printing to PDF + if( isPrintingPDF() ) { + setupPDF(); + } + // Notify listeners that the presentation is ready but use a 1ms // timeout to ensure it's not fired synchronously after #initialize() setTimeout( function() { @@ -402,6 +407,66 @@ var Reveal = (function(){ } /** + * Configures the presentation for printing to a static + * PDF. + */ + function setupPDF() { + + // Dimensions of the content + var pageWidth = 1122, + pageHeight = 867; + + var slideWidth = 960, + slideHeight = 700; + + document.body.classList.add( 'print-pdf' ); + document.body.style.width = pageWidth + 'px'; + document.body.style.height = pageHeight + 'px'; + + // Slide and slide background layout + toArray( document.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { + + // Vertical stacks are not centred since their section + // children will be + if( slide.classList.contains( 'stack' ) ) { + slide.style.top = 0; + } + else { + var left = ( pageWidth - slideWidth ) / 2; + var top = ( pageHeight - slideHeight ) / 2; + + if( config.center || slide.classList.contains( 'center' ) ) { + top = Math.max( ( pageHeight - getAbsoluteHeight( slide ) ) / 2, 0 ); + } + + slide.style.left = left + 'px'; + slide.style.top = top + 'px'; + slide.style.width = slideWidth + 'px'; + slide.style.height = slideHeight + 'px'; + + if( slide.scrollHeight > slideHeight ) { + slide.style.overflow = 'hidden'; + } + + var background = slide.querySelector( '.slide-background' ); + if( background ) { + background.style.width = pageWidth + 'px'; + background.style.height = pageHeight + 'px'; + background.style.top = -top + 'px'; + background.style.left = -left + 'px'; + } + } + + } ); + + // Show all fragments + toArray( document.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) { + fragment.classList.add( 'visible' ); + } ); + + } + + /** * Creates an HTML element and returns a reference to it. * If the element already exists the existing instance will * be returned. @@ -428,9 +493,7 @@ var Reveal = (function(){ */ function createBackgrounds() { - if( isPrintingPDF() ) { - document.body.classList.add( 'print-pdf' ); - } + var printMode = isPrintingPDF(); // Clear prior backgrounds dom.background.innerHTML = ''; @@ -441,7 +504,7 @@ var Reveal = (function(){ var backgroundStack; - if( isPrintingPDF() ) { + if( printMode ) { backgroundStack = createBackground( slideh, slideh ); } else { @@ -451,7 +514,7 @@ var Reveal = (function(){ // Iterate over all vertical slides toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { - if( isPrintingPDF() ) { + if( printMode ) { createBackground( slidev, slidev ); } else { @@ -887,7 +950,7 @@ var Reveal = (function(){ if( typeof child.offsetTop === 'number' && child.style ) { // Count # of abs children - if( child.style.position === 'absolute' ) { + if( window.getComputedStyle( child ).position === 'absolute' ) { absoluteChildren += 1; } |