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