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 From d4133f0160f757af90649710769789631d4a93a0 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 24 Jan 2017 14:48:36 +0100 Subject: fix empty pages in pdf exports (closes #1804) --- css/print/pdf.css | 3 ++- js/reveal.js | 9 +++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 4bfcddc..8c82f73 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -90,7 +90,7 @@ ul, ol, div, p { } .reveal .slides section { - page-break-after: always !important; + page-break-after: auto !important; visibility: visible !important; display: block !important; @@ -139,6 +139,7 @@ ul, ol, div, p { left: 0; width: 100%; height: 100%; + z-index: auto !important; } /* Display slide speaker notes when 'showNotes' is enabled */ diff --git a/js/reveal.js b/js/reveal.js index 6a31424..66ed4d0 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -598,7 +598,7 @@ // Dimensions of the PDF pages var pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ), - pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) ); + pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) ); // Dimensions of slides within the pages var slideWidth = slideSize.width, @@ -652,7 +652,12 @@ // so that no page ever flows onto another var page = document.createElement( 'div' ); page.className = 'pdf-page'; - page.style.height = ( pageHeight * numberOfPages ) + 'px'; + + // Reduce total height by 1px so that the page ends before + // the page, otherwise the page's 'page-break-after' will + // land on the wrong page + page.style.height = ( ( pageHeight * numberOfPages ) - 1 ) + 'px'; + slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); -- cgit v1.2.3 From 934c2e9730d56dfea4e2c8e008840161c9099098 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 24 Jan 2017 15:27:27 +0100 Subject: additional fix for empty pages in pdf exports #1804 --- css/print/pdf.css | 2 +- js/reveal.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 8c82f73..d3bf951 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -132,7 +132,7 @@ ul, ol, div, p { } /* Slide backgrounds are placed inside of their slide when exporting to PDF */ -.reveal section .slide-background { +.reveal .slide-background { display: block !important; position: absolute; top: 0; diff --git a/js/reveal.js b/js/reveal.js index 66ed4d0..cf174bd 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -656,7 +656,7 @@ // Reduce total height by 1px so that the page ends before // the page, otherwise the page's 'page-break-after' will // land on the wrong page - page.style.height = ( ( pageHeight * numberOfPages ) - 1 ) + 'px'; + page.style.height = ( ( pageHeight - 1 ) * numberOfPages ) + 'px'; slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); -- cgit v1.2.3 From 84202fa072970d7170f5e2812a224e0da6f2ab13 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 25 Jan 2017 10:43:26 +0100 Subject: adjust pdf margins instead of heights to fix #1804 --- css/print/pdf.css | 2 +- js/reveal.js | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index d3bf951..8c3234c 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -90,7 +90,7 @@ ul, ol, div, p { } .reveal .slides section { - page-break-after: auto !important; + page-break-after: always !important; visibility: visible !important; display: block !important; diff --git a/js/reveal.js b/js/reveal.js index cf174bd..ad79b4b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -605,7 +605,7 @@ slideHeight = slideSize.height; // Let the browser know what page size we want to print - injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' ); + injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0 0 -1px 0;}' ); // Limit the size of certain elements to the dimensions of the slide injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' ); @@ -652,12 +652,7 @@ // so that no page ever flows onto another var page = document.createElement( 'div' ); page.className = 'pdf-page'; - - // Reduce total height by 1px so that the page ends before - // the page, otherwise the page's 'page-break-after' will - // land on the wrong page - page.style.height = ( ( pageHeight - 1 ) * numberOfPages ) + 'px'; - + page.style.height = ( pageHeight * numberOfPages ) + 'px'; slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); -- cgit v1.2.3 From 2584a6d97090f8987f49ec3aa5abcbdf8b0d1b8e Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 4 Apr 2017 13:37:01 +0200 Subject: new cli and in-browser pdf printing compatible fix for #1804 --- css/print/pdf.css | 7 ++++--- js/reveal.js | 12 ++++++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) (limited to 'css/print/pdf.css') diff --git a/css/print/pdf.css b/css/print/pdf.css index 8c3234c..20c646a 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -87,14 +87,14 @@ ul, ol, div, p { position: relative; overflow: hidden; z-index: 1; + + page-break-after: always; } .reveal .slides section { - page-break-after: always !important; - visibility: visible !important; display: block !important; - position: relative !important; + position: absolute !important; margin: 0 !important; padding: 0 !important; @@ -115,6 +115,7 @@ ul, ol, div, p { } .reveal section.stack { + position: relative !important; margin: 0 !important; padding: 0 !important; page-break-after: avoid !important; diff --git a/js/reveal.js b/js/reveal.js index e093cb8..dd015bc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -617,7 +617,7 @@ slideHeight = slideSize.height; // Let the browser know what page size we want to print - injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0 0 -1px 0;}' ); + injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' ); // Limit the size of certain elements to the dimensions of the slide injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' ); @@ -664,7 +664,15 @@ // so that no page ever flows onto another var page = document.createElement( 'div' ); page.className = 'pdf-page'; - page.style.height = ( pageHeight * numberOfPages ) + 'px'; + + // Set the total height of the PDF page container. + // + // This is offset by -1 to ensure that the page ends and + // breaks within the document/paper height. Ending exactly + // on the document height breaks in-browser printing, but + // works in CLI printing (phantomjs, wkpdf etc]). + page.style.height = ( ( pageHeight - 1 ) * numberOfPages ) + 'px'; + slide.parentNode.insertBefore( page, slide ); page.appendChild( slide ); -- cgit v1.2.3