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 From ad9e93eae5850b7cd8513b4040e0b1b144a2f275 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 9 Dec 2014 15:06:25 +0100 Subject: dont force links to be underlined in pdf --- css/print/pdf.css | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 37454b6..2eb4cf2 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -56,22 +56,13 @@ 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: normal; - text-decoration: underline; -} - .reveal pre code { overflow: hidden !important; font-family: Courier, 'Courier New', monospace !important; } -/* SECTION 6: more reveal.js specific additions by @skypanther */ +/* SECTION 5: more reveal.js specific additions by @skypanther */ ul, ol, div, p { visibility: visible; position: static; @@ -156,7 +147,7 @@ ul, ol, div, p { top: 0; left: 0; width: 100%; - z-index: 0; + z-index: -1; } /* All elements should be above the slide-background */ .reveal section>* { -- cgit v1.2.3 From b0b2ce1fe310ae9009c710509d1afc2bb2f39e50 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 10 Sep 2015 08:50:55 +0200 Subject: print notes to pdf when is enabled #304 --- css/print/pdf.css | 8 ++++++++ css/reveal.css | 4 +++- css/reveal.scss | 2 ++ js/reveal.js | 12 ++++++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 2eb4cf2..04b4d65 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -61,6 +61,14 @@ h1,h2,h3,h4,h5,h6 { font-family: Courier, 'Courier New', monospace !important; } +.reveal .speaker-notes { + display: block; + width: 100%; + max-height: none; + left: auto; + top: auto; +} + /* SECTION 5: more reveal.js specific additions by @skypanther */ ul, ol, div, p { diff --git a/css/reveal.css b/css/reveal.css index 1aaa9b6..2b0486e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1178,7 +1178,9 @@ body { background-color: rgba(0, 0, 0, 0.5); overflow: auto; -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; } .reveal .speaker-notes.visible:not(:empty) { display: block; } diff --git a/css/reveal.scss b/css/reveal.scss index 9bd570e..f9e2fac 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1314,6 +1314,8 @@ body { background-color: rgba(0,0,0,0.5); overflow: auto; box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; } .reveal .speaker-notes.visible:not(:empty) { diff --git a/js/reveal.js b/js/reveal.js index 2b8fec7..e517b33 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -573,6 +573,18 @@ background.style.top = -top + 'px'; background.style.left = -left + 'px'; } + + // If we're configured to `showNotes`, inject them into each slide + if( config.showNotes ) { + var notes = getSlideNotes( slide ); + if( notes ) { + var notesElement = document.createElement( 'div' ); + notesElement.classList.add( 'speaker-notes' ); + notesElement.innerHTML = notes; + notesElement.style.bottom = 40 - ( ( pageHeight - contentHeight ) / 2 ) + 'px'; + slide.appendChild( notesElement ); + } + } } } ); -- cgit v1.2.3 From 5d39e8b8ce261c8753034de97e327feb502736c8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 10 Sep 2015 09:16:58 +0200 Subject: reorder css --- css/print/pdf.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 04b4d65..834018b 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -61,14 +61,6 @@ h1,h2,h3,h4,h5,h6 { font-family: Courier, 'Courier New', monospace !important; } -.reveal .speaker-notes { - display: block; - width: 100%; - max-height: none; - left: auto; - top: auto; -} - /* SECTION 5: more reveal.js specific additions by @skypanther */ ul, ol, div, p { @@ -157,9 +149,19 @@ ul, ol, div, p { width: 100%; z-index: -1; } + /* All elements should be above the slide-background */ .reveal section>* { position: relative; z-index: 1; } +/* Display slide speaker notes when 'showNotes' is enabled */ +.reveal .speaker-notes { + display: block; + width: 100%; + max-height: none; + left: auto; + top: auto; +} + -- cgit v1.2.3 From 1c6990d20fecf199810848e1a43f10205b4078a8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 10 Sep 2015 09:30:57 +0200 Subject: fix pdf print when showNotes is disabled --- css/print/pdf.css | 2 +- js/reveal.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 834018b..f509d5b 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -157,7 +157,7 @@ ul, ol, div, p { } /* Display slide speaker notes when 'showNotes' is enabled */ -.reveal .speaker-notes { +.reveal .speaker-notes-pdf { display: block; width: 100%; max-height: none; diff --git a/js/reveal.js b/js/reveal.js index e517b33..ae682ac 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -580,8 +580,9 @@ if( notes ) { var notesElement = document.createElement( 'div' ); notesElement.classList.add( 'speaker-notes' ); + notesElement.classList.add( 'speaker-notes-pdf' ); notesElement.innerHTML = notes; - notesElement.style.bottom = 40 - ( ( pageHeight - contentHeight ) / 2 ) + 'px'; + notesElement.style.bottom = ( 40 - top ) + 'px'; slide.appendChild( notesElement ); } } -- cgit v1.2.3 From ca4098145ee57c3f865703c43c4b8b9d64a76b2d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 10 Sep 2015 10:35:25 +0200 Subject: bump up z-index of notes in pdf --- 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 f509d5b..f78344c 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -163,5 +163,6 @@ ul, ol, div, p { max-height: none; left: auto; top: auto; + z-index: 100; } -- cgit v1.2.3 From 0e779edb20e2c14f66a7bce4451321ef22fa8898 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Oct 2015 11:59:26 +0100 Subject: slide numbers work in pdf exports, update slide number style --- css/print/pdf.css | 11 ++++++++- css/reveal.css | 9 +++++--- css/reveal.scss | 7 ++++-- css/theme/beige.css | 6 ----- css/theme/black.css | 6 ----- css/theme/blood.css | 6 ----- css/theme/league.css | 6 ----- css/theme/moon.css | 6 ----- css/theme/night.css | 6 ----- css/theme/serif.css | 6 ----- css/theme/simple.css | 6 ----- css/theme/sky.css | 6 ----- css/theme/solarized.css | 6 ----- css/theme/template/theme.scss | 7 ------ css/theme/white.css | 6 ----- js/reveal.js | 53 +++++++++++++++++++++++++++++++++++++------ 16 files changed, 67 insertions(+), 86 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index f78344c..868142e 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -34,7 +34,6 @@ html { .nestedarrow, .reveal .controls, .reveal .progress, -.reveal .slide-number, .reveal .playback, .reveal.overview, .fork-reveal, @@ -166,3 +165,13 @@ ul, ol, div, p { z-index: 100; } +/* Display slide numbers when 'slideNumber' is enabled */ +.reveal .slide-number { + display: none; +} +.reveal .slide-number-pdf { + display: block; + position: absolute; + font-size: 14px; +} + diff --git a/css/reveal.css b/css/reveal.css index fc30247..3dda05e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -273,11 +273,14 @@ html:-moz-full-screen-ancestor { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; + right: 8px; + bottom: 8px; opacity: 0.5; z-index: 31; - font-size: 12px; } + font-size: 12px; + color: #fff; + background-color: rgba(0, 0, 0, 0.6); + padding: 5px; } .reveal .slide-number-delimiter { margin: 0 4px; } diff --git a/css/reveal.scss b/css/reveal.scss index f60ca78..63b1a90 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -329,11 +329,14 @@ html:-moz-full-screen-ancestor { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; + right: 8px; + bottom: 8px; opacity: 0.5; z-index: 31; font-size: 12px; + color: #fff; + background-color: rgba( 0, 0, 0, 0.6 ); + padding: 5px; } .reveal .slide-number-delimiter { diff --git a/css/theme/beige.css b/css/theme/beige.css index e7722ce..be18733 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #8b743d; } diff --git a/css/theme/black.css b/css/theme/black.css index 10ec7e1..54d44c3 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #42affa; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 84d7d9e..e035ab6 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -288,12 +288,6 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #a23; } - .reveal p { font-weight: 300; text-shadow: 1px 1px #222; } diff --git a/css/theme/league.css b/css/theme/league.css index 1f6a8a1..fa9f53c 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -290,9 +290,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #13DAEC; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 1c81cf9..b119576 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/night.css b/css/theme/night.css index 748a94f..3d0e3c5 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -282,9 +282,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #e7ad52; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 2817e0f..736c0b5 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #51483D; } diff --git a/css/theme/simple.css b/css/theme/simple.css index c65e8ce..20d919d 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #00008B; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 37ce521..e762a50 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -291,9 +291,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #3b759e; } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index be2fa22..bf2f651 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 91eeca7..9bb416a 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -342,11 +342,4 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: $linkColor; -} - diff --git a/css/theme/white.css b/css/theme/white.css index ffa687e..a05cd85 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #2a76dd; } diff --git a/js/reveal.js b/js/reveal.js index 883a591..f7811fe 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -542,6 +542,19 @@ document.body.style.width = pageWidth + 'px'; document.body.style.height = pageHeight + 'px'; + // Add each slide's index as attributes on itself, we need these + // indices to generate slide numbers below + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { + hslide.setAttribute( 'data-index-h', h ); + + if( hslide.classList.contains( 'stack' ) ) { + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { + vslide.setAttribute( 'data-index-h', h ); + vslide.setAttribute( 'data-index-v', v ); + } ); + } + } ); + // Slide and slide background layout toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { @@ -575,7 +588,7 @@ background.style.left = -left + 'px'; } - // If we're configured to `showNotes`, inject them into each slide + // Inject notes if `showNotes` is enabled if( config.showNotes ) { var notes = getSlideNotes( slide ); if( notes ) { @@ -587,6 +600,18 @@ slide.appendChild( notesElement ); } } + + // Inject slide numbers if `slideNumbers` are enabled + if( config.slideNumber ) { + var slideNumberH = parseInt( slide.getAttribute( 'data-index-h' ), 10 ) + 1, + slideNumberV = parseInt( slide.getAttribute( 'data-index-v' ), 10 ) + 1; + + var numberElement = document.createElement( 'div' ); + numberElement.classList.add( 'slide-number' ); + numberElement.classList.add( 'slide-number-pdf' ); + numberElement.innerHTML = formatSlideNumber( slideNumberH, '/', slideNumberV ); + background.appendChild( numberElement ); + } } } ); @@ -2534,20 +2559,34 @@ value.push( getSlidePastCount() + 1 ); } else if( format === 'c/t' ) { - value.push( getSlidePastCount() + 1 ); - value.push( '/' ); - value.push( getTotalSlides() ); + value.push( getSlidePastCount() + 1, '/', getTotalSlides() ); } else { value.push( indexh + 1 ); if( isVerticalSlide() ) { - value.push( '/' ); - value.push( indexv + 1 ); + value.push( '/', indexv + 1 ); } } - dom.slideNumber.innerHTML = value.join( '' ); + dom.slideNumber.innerHTML = formatSlideNumber( value[0], value[1], value[2] ); + } + + } + + /** + * Applies HTML formatting to a slide number before it's + * written to the DOM. + */ + function formatSlideNumber( a, delimiter, b ) { + + if( typeof b === 'number' && !isNaN( b ) ) { + return ''+ a +'' + + ''+ delimiter +'' + + ''+ b +''; + } + else { + return ''+ a +''; } } -- cgit v1.2.3 From d66cba6efac72b4fade04cd78c17e405ad614c2d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Oct 2015 13:24:47 +0100 Subject: remove out of sync comments from pdf css --- css/print/pdf.css | 38 ++++++++++++-------------------------- 1 file changed, 12 insertions(+), 26 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 868142e..5922067 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -1,15 +1,9 @@ -/* 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 */ +/** + * This stylesheet is used to print reveal.js + * presentations to PDF. + * + * https://github.com/hakimel/reveal.js#pdf-export + */ * { -webkit-print-color-adjust: exact; @@ -29,8 +23,7 @@ html { overflow: visible; } -/* SECTION 2: Remove any elements not needed in print. - This would include navigation, ads, sidebars, etc. */ +/* Remove any elements not needed in print. */ .nestedarrow, .reveal .controls, .reveal .progress, @@ -42,16 +35,7 @@ html { display: none !important; } -/* SECTION 3: Set body font face, size, and color. - Consider using a serif font for readability. */ -body, p, td, li, div { - -} - -/* SECTION 4: Set heading font face, sizes, and color. - Differentiate your headings from your body text. - Perhaps use a large sans-serif for distinction. */ -h1,h2,h3,h4,h5,h6 { +h1, h2, h3, h4, h5, h6 { text-shadow: 0 0 0 #000 !important; } @@ -60,8 +44,6 @@ h1,h2,h3,h4,h5,h6 { font-family: Courier, 'Courier New', monospace !important; } - -/* SECTION 5: more reveal.js specific additions by @skypanther */ ul, ol, div, p { visibility: visible; position: static; @@ -99,6 +81,7 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } + .reveal .slides section { page-break-after: always !important; @@ -124,6 +107,7 @@ ul, ol, div, p { -ms-transform: none !important; transform: none !important; } + .reveal section.stack { margin: 0 !important; padding: 0 !important; @@ -131,9 +115,11 @@ ul, ol, div, p { height: auto !important; min-height: auto !important; } + .reveal img { box-shadow: none; } + .reveal .roll { overflow: visible; line-height: 1em; -- cgit v1.2.3 From edfa131c9c7e4337766623a1413f2e6c46f343e0 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Oct 2015 16:44:47 +0100 Subject: tweak how speaker notes look in pdf exports --- css/print/pdf.css | 3 --- css/reveal.css | 2 +- css/reveal.scss | 2 +- js/reveal.js | 7 +++++-- 4 files changed, 7 insertions(+), 7 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 5922067..9ed90d6 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -152,9 +152,6 @@ ul, ol, div, p { } /* Display slide numbers when 'slideNumber' is enabled */ -.reveal .slide-number { - display: none; -} .reveal .slide-number-pdf { display: block; position: absolute; diff --git a/css/reveal.css b/css/reveal.css index e489712..0cca324 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -284,7 +284,7 @@ html:-moz-full-screen-ancestor { padding: 5px; } .reveal .slide-number-delimiter { - margin: 0 4px; } + margin: 0 3px; } /********************************************* * SLIDES diff --git a/css/reveal.scss b/css/reveal.scss index 0557980..45f416f 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -341,7 +341,7 @@ html:-moz-full-screen-ancestor { } .reveal .slide-number-delimiter { - margin: 0 4px; + margin: 0 3px; } /********************************************* diff --git a/js/reveal.js b/js/reveal.js index 2d49d2e..d2b2970 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -592,11 +592,14 @@ if( config.showNotes ) { var notes = getSlideNotes( slide ); if( notes ) { + var notesSpacing = 8; var notesElement = document.createElement( 'div' ); notesElement.classList.add( 'speaker-notes' ); notesElement.classList.add( 'speaker-notes-pdf' ); notesElement.innerHTML = notes; - notesElement.style.bottom = ( 40 - top ) + 'px'; + notesElement.style.left = ( notesSpacing - left ) + 'px'; + notesElement.style.bottom = ( notesSpacing - top ) + 'px'; + notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px'; slide.appendChild( notesElement ); } } @@ -881,7 +884,7 @@ dom.controls.style.display = config.controls ? 'block' : 'none'; dom.progress.style.display = config.progress ? 'block' : 'none'; - dom.slideNumber.style.display = config.slideNumber ? 'block' : 'none'; + dom.slideNumber.style.display = config.slideNumber && !isPrintingPDF() ? 'block' : 'none'; if( config.rtl ) { dom.wrapper.classList.add( 'rtl' ); -- cgit v1.2.3 From 587d16ceef9e8f11230d6f183b483388075d3609 Mon Sep 17 00:00:00 2001 From: Dhyego Fernando Date: Thu, 10 Mar 2016 13:50:35 -0400 Subject: fix(PDF Export): Mark as important `width`, `height` and add `zoom` properties to fix CSS rules which were overrided by inline styles --- css/print/pdf.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..e4a1b7d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -60,8 +60,9 @@ ul, ol, div, p { } .reveal .slides { position: static; - width: 100%; - height: auto; + width: 100% !important; + height: auto !important; + zoom: 1 !important; left: auto; top: auto; @@ -157,4 +158,3 @@ ul, ol, div, p { position: absolute; font-size: 14px; } - -- cgit v1.2.3 From 9b11915c3a409aa456c64e9d386ac15598a4fa6b Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 28 Apr 2016 17:07:26 +0200 Subject: fix pdf bg layering, simplify code --- css/print/pdf.css | 14 +++++++------- js/reveal.js | 38 +++++++++----------------------------- 2 files changed, 16 insertions(+), 36 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..9ae0dfe 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -82,6 +82,12 @@ ul, ol, div, p { perspective-origin: 50% 50%; } +.reveal .slides .pdf-page { + position: relative; + overflow: hidden; + z-index: 1; +} + .reveal .slides section { page-break-after: always !important; @@ -132,13 +138,7 @@ ul, ol, div, p { top: 0; left: 0; width: 100%; - z-index: -1; -} - -/* All elements should be above the slide-background */ -.reveal section>* { - position: relative; - z-index: 1; + height: 100%; } /* Display slide speaker notes when 'showNotes' is enabled */ diff --git a/js/reveal.js b/js/reveal.js index 628c0b9..47b4f01 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -607,8 +607,7 @@ // Wrap the slide in a page element and hide its overflow // so that no page ever flows onto another var page = document.createElement( 'div' ); - page.className = 'page'; - page.style.overflow = 'hidden'; + page.className = 'pdf-page'; page.style.height = ( pageHeight * numberOfPages ) + 'px'; slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); @@ -618,14 +617,8 @@ slide.style.top = top + 'px'; slide.style.width = slideWidth + 'px'; - // TODO Backgrounds need to be multiplied when the slide - // stretches over multiple pages - var background = slide.querySelector( '.slide-background' ); - if( background ) { - background.style.width = pageWidth + 'px'; - background.style.height = ( pageHeight * numberOfPages ) + 'px'; - background.style.top = -top + 'px'; - background.style.left = -left + 'px'; + if( slide.slideBackgroundElement ) { + page.insertBefore( slide.slideBackgroundElement, slide ); } // Inject notes if `showNotes` is enabled @@ -653,7 +646,7 @@ numberElement.classList.add( 'slide-number' ); numberElement.classList.add( 'slide-number-pdf' ); numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV ); - background.appendChild( numberElement ); + page.appendChild( numberElement ); } } @@ -733,24 +726,12 @@ // Iterate over all horizontal slides toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { - var backgroundStack; - - if( printMode ) { - backgroundStack = createBackground( slideh, slideh ); - } - else { - backgroundStack = createBackground( slideh, dom.background ); - } + var backgroundStack = createBackground( slideh, dom.background ); // Iterate over all vertical slides toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { - if( printMode ) { - createBackground( slidev, slidev ); - } - else { - createBackground( slidev, backgroundStack ); - } + createBackground( slidev, backgroundStack ); backgroundStack.classList.add( 'stack' ); @@ -846,6 +827,8 @@ slide.classList.remove( 'has-dark-background' ); slide.classList.remove( 'has-light-background' ); + slide.slideBackgroundElement = element; + // If this slide has a background color, add a class that // signals if it is light or dark. If the slide has no background // color, no class will be set @@ -3406,10 +3389,7 @@ if( isPrintingPDF() ) { var slide = getSlide( x, y ); if( slide ) { - var background = slide.querySelector( '.slide-background' ); - if( background && background.parentNode === slide ) { - return background; - } + return slide.slideBackgroundElement; } return undefined; -- cgit v1.2.3 From 187114f47224b4628350a6046c6f758bce83f6c1 Mon Sep 17 00:00:00 2001 From: Tiago Garcia Date: Sat, 21 May 2016 11:36:49 -0700 Subject: Removing duplicated "position" property at pdf.css Found that by running css-lint on the code--- css/print/pdf.css | 1 - 1 file changed, 1 deletion(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 9ed90d6..3dc577d 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -86,7 +86,6 @@ ul, ol, div, p { page-break-after: always !important; visibility: visible !important; - position: relative !important; display: block !important; position: relative !important; -- cgit v1.2.3 From 3111d3b1ae12af2580cb45a18da208146701a6fd Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 26 May 2016 09:57:19 +0200 Subject: support for 'separate-page' layout for notes in PDF exports #1518 --- README.md | 2 +- css/print/pdf.css | 13 ++++++++++++- js/reveal.js | 21 +++++++++++++++++---- 3 files changed, 30 insertions(+), 6 deletions(-) (limited to 'css/print/pdf.css') diff --git a/README.md b/README.md index 56dad41..b275846 100644 --- a/README.md +++ b/README.md @@ -890,7 +890,7 @@ This will only display in the notes window. Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations. -When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). +When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`. ## Server Side Speaker Notes diff --git a/css/print/pdf.css b/css/print/pdf.css index 406f125..fb56129 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -145,11 +145,22 @@ ul, ol, div, p { display: block; width: 100%; max-height: none; - left: auto; top: auto; + right: auto; + bottom: auto; + left: auto; z-index: 100; } +/* Layout option which makes notes appear on a separate page */ +.reveal .speaker-notes-pdf[data-layout="separate-page"] { + position: relative; + color: inherit; + background-color: transparent; + padding: 20px; + page-break-after: always; +} + /* Display slide numbers when 'slideNumber' is enabled */ .reveal .slide-number-pdf { display: block; diff --git a/js/reveal.js b/js/reveal.js index 656ed10..f43e0aa 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -624,18 +624,31 @@ // Inject notes if `showNotes` is enabled if( config.showNotes ) { + + // Are there notes for this slide? var notes = getSlideNotes( slide ); if( notes ) { + var notesSpacing = 8; + var notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline'; var notesElement = document.createElement( 'div' ); notesElement.classList.add( 'speaker-notes' ); notesElement.classList.add( 'speaker-notes-pdf' ); + notesElement.setAttribute( 'data-layout', notesLayout ); notesElement.innerHTML = notes; - notesElement.style.left = ( notesSpacing - left ) + 'px'; - notesElement.style.bottom = ( notesSpacing - top ) + 'px'; - notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px'; - slide.appendChild( notesElement ); + + if( notesLayout === 'separate-page' ) { + page.parentNode.insertBefore( notesElement, page.nextSibling ); + } + else { + notesElement.style.left = ( notesSpacing - left ) + 'px'; + notesElement.style.bottom = ( notesSpacing - top ) + 'px'; + notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px'; + slide.appendChild( notesElement ); + } + } + } // Inject slide numbers if `slideNumbers` are enabled -- cgit v1.2.3