From f0f48bd9b06ffdd22f264ca5f644666347944ceb Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 3 Apr 2014 10:51:27 +0200 Subject: use flexbox for vertically centered printing #862 --- css/print/pdf.css | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 41f70c6..bf90b3d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -188,3 +188,12 @@ ul, ol, div, p { .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; +} -- cgit v1.2.3 From 646203f038fcddbc15c35e891d3bbd7aa1d8be1f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 23 Apr 2014 19:47:30 +0200 Subject: revert from flexbox for pdf centering, use js for PDF setup --- css/print/pdf.css | 54 ++++++++++----------------------------- css/reveal.css | 2 ++ js/reveal.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 84 insertions(+), 47 deletions(-) (limited to 'css/print/pdf.css') 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() { @@ -401,6 +406,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 @@ -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; } -- cgit v1.2.3 From ddfb0aa86fdfc8e92d0b81fbe36dc79c4585dd86 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 26 Apr 2014 21:41:54 +0200 Subject: abide by configured width/height when printing to pdf --- css/print/pdf.css | 5 ----- js/reveal.js | 27 +++++++++++++++++++++------ 2 files changed, 21 insertions(+), 11 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 559b05d..bc09a70 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -30,11 +30,6 @@ html { overflow: visible; } -@page { - size: letter landscape; - margin: 0; -} - /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, diff --git a/js/reveal.js b/js/reveal.js index a203418..5dc6856 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -413,21 +413,19 @@ var Reveal = (function(){ */ function setupPDF() { - // The aspect ratio of pages when saving to PDF in Chrome, - // we need to abide by this ratio when determining the pixel - // size of our pages - var pageAspectRatio = 1.295; - var slideSize = getComputedSlideSize( window.innerWidth, window.innerHeight ); // Dimensions of the PDF pages var pageWidth = Math.round( slideSize.width * ( 1 + config.margin ) ), - pageHeight = Math.round( pageWidth / pageAspectRatio ); + pageHeight = Math.round( slideSize.height * ( 1 + config.margin ) ); // Dimensions of slides within the pages var slideWidth = slideSize.width, slideHeight = slideSize.height; + // Let the browser know what page size we want to print + injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' ); + document.body.classList.add( 'print-pdf' ); document.body.style.width = pageWidth + 'px'; document.body.style.height = pageHeight + 'px'; @@ -944,6 +942,23 @@ var Reveal = (function(){ } + /** + * Injects the given CSS styles into the DOM. + */ + function injectStyleSheet( value ) { + + var tag = document.createElement( 'style' ); + tag.type = 'text/css'; + if( tag.styleSheet ) { + tag.styleSheet.cssText = value; + } + else { + tag.appendChild( document.createTextNode( value ) ); + } + document.getElementsByTagName( 'head' )[0].appendChild( tag ); + + } + /** * Retrieves the height of the given element by looking * at the position and height of its immediate children. -- cgit v1.2.3 From 860580d4d0d10646b59a9b3663c0c1cc504bc1c2 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 27 Apr 2014 17:31:50 +0200 Subject: getSlideBackground now works in pdf mode, add pdf tests --- css/print/pdf.css | 1 + js/reveal.js | 11 ++++++-- test/test-pdf.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ test/test-pdf.js | 15 ++++++++++ 4 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 test/test-pdf.html create mode 100644 test/test-pdf.js (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index bc09a70..e43d05c 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -152,6 +152,7 @@ ul, ol, div, p { /* Slide backgrounds are placed inside of their slide when exporting to PDF */ .reveal section .slide-background { + display: block !important; position: absolute; top: 0; left: 0; diff --git a/js/reveal.js b/js/reveal.js index a4dba10..d1f2fb0 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2693,11 +2693,18 @@ var Reveal = (function(){ /** * Returns the background element for the given slide. * All slides, even the ones with no background properties - * defined, have a background element so this never returns - * null. + * defined, have a background element so as long as the + * index is valid an element will be returned. */ function getSlideBackground( x, y ) { + // When printing to PDF the slide backgrounds are nested + // inside of the slides + if( isPrintingPDF() ) { + var slide = getSlide( x, y ); + return slide ? slide.querySelector( '.slide-background' ) : undefined; + } + var horizontalBackground = document.querySelectorAll( '.backgrounds>.slide-background' )[ x ]; var verticalBackgrounds = horizontalBackground && horizontalBackground.querySelectorAll( '.slide-background' ); diff --git a/test/test-pdf.html b/test/test-pdf.html new file mode 100644 index 0000000..751ed26 --- /dev/null +++ b/test/test-pdf.html @@ -0,0 +1,83 @@ + + + + + + + reveal.js - Test PDF exports + + + + + + + + +
+
+ + + + + + + + + + + diff --git a/test/test-pdf.js b/test/test-pdf.js new file mode 100644 index 0000000..8ec34fd --- /dev/null +++ b/test/test-pdf.js @@ -0,0 +1,15 @@ + +Reveal.addEventListener( 'ready', function() { + + // Only one test for now, we're mainly ensuring that there + // are no execution errors when running PDF mode + + test( 'Reveal.isReady', function() { + strictEqual( Reveal.isReady(), true, 'returns true' ); + }); + + +} ); + +Reveal.initialize({ pdf: true }); + -- cgit v1.2.3 From 2ac0a55ccf0e8f881ff48f3500865bff37ec6fa3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 29 Apr 2014 13:30:56 +0200 Subject: ensure pdf pages are never zero-height --- css/print/pdf.css | 1 + js/reveal.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index e43d05c..7bcc6cb 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -119,6 +119,7 @@ ul, ol, div, p { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; + min-height: 1px; opacity: 1 !important; diff --git a/js/reveal.js b/js/reveal.js index 4e8f9f2..6e6c12b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -468,7 +468,7 @@ top = ( pageHeight - slideHeight ) / 2; var contentHeight = getAbsoluteHeight( slide ); - var numberOfPages = Math.ceil( contentHeight / pageHeight ); + var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 ); // Center slides vertically if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) { -- cgit v1.2.3 From da1f221b4f1ad11edf4099d651cb56e7fae79db0 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 4 May 2014 08:24:26 +0200 Subject: reduce max-height of images in pdfs --- css/print/pdf.css | 1 + 1 file changed, 1 insertion(+) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 7bcc6cb..ca42f4f 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -142,6 +142,7 @@ ul, ol, div, p { } .reveal img { box-shadow: none; + max-height: 80%; } .reveal .roll { overflow: visible; -- cgit v1.2.3 From 54e256764ce98204caad708b654f6250fb781664 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 4 May 2014 08:29:45 +0200 Subject: limit size of media elements when printing to pdf --- css/print/pdf.css | 1 - js/reveal.js | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index ca42f4f..7bcc6cb 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -142,7 +142,6 @@ ul, ol, div, p { } .reveal img { box-shadow: none; - max-height: 80%; } .reveal .roll { overflow: visible; diff --git a/js/reveal.js b/js/reveal.js index 49b2e7c..ad332a3 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -461,6 +461,9 @@ // Let the browser know what page size we want to print injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' ); + // Limit the size of certain elements to the dimensions of the slide + injectStyleSheet( '.reveal img, .reveal video, .reveal iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' ); + document.body.classList.add( 'print-pdf' ); document.body.style.width = pageWidth + 'px'; document.body.style.height = pageHeight + 'px'; -- cgit v1.2.3 From 06ca536ae1b0f65b58411aab947d70951862c2a1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 May 2014 10:10:59 +0200 Subject: no need to override font sizes after updates to pdf printing --- css/print/pdf.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 7bcc6cb..47ca207 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -16,7 +16,6 @@ } body { - font-size: 18pt; margin: 0 auto !important; border: 0; padding: 0; @@ -45,7 +44,7 @@ html { /* SECTION 3: Set body font face, size, and color. Consider using a serif font for readability. */ body, p, td, li, div { - font-size: 18pt; + } /* SECTION 4: Set heading font face, sizes, and color. @@ -147,9 +146,6 @@ ul, ol, div, p { 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 { -- cgit v1.2.3 From e7f46155852cc35c338db0a9b5716ea1e5249717 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 20 May 2014 12:09:49 +0200 Subject: hide slide numbers while printing to pdf #885 --- css/print/pdf.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 47ca207..8ac87c5 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -32,8 +32,10 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls, +.reveal .controls, .reveal .progress, +.reveal .slide-number, +.reveal .playback, .reveal.overview, .fork-reveal, .share-reveal, -- cgit v1.2.3 From ff788bb31b5c9af84c407502501575eeac012dcd Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 23 May 2014 14:06:52 +0200 Subject: additional monospace options for phantomjs --- css/print/pdf.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 8ac87c5..37454b6 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -67,7 +67,7 @@ a:visited { .reveal pre code { overflow: hidden !important; - font-family: monospace !important; + font-family: Courier, 'Courier New', monospace !important; } -- cgit v1.2.3