summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md2
-rw-r--r--css/print/pdf.css15
-rw-r--r--js/reveal.js95
-rw-r--r--plugin/zoom-js/zoom.js12
4 files changed, 47 insertions, 77 deletions
diff --git a/README.md b/README.md
index c10a465..579cfe8 100644
--- a/README.md
+++ b/README.md
@@ -783,6 +783,8 @@ Reveal.initialize({
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presention from a webserver.
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
+Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
+
1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf#/. This triggers the default index HTML to load the PDF print stylesheet ([css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css)). You can test this with [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
2. Open the in-browser print dialog (CTRL/CMD+P).
3. Change the **Destination** setting to **Save as PDF**.
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 9ed90d6..406f125 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -82,11 +82,16 @@ 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;
visibility: visible !important;
- position: relative !important;
display: block !important;
position: relative !important;
@@ -132,13 +137,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 10c609e..47b4f01 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -153,6 +153,10 @@
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
+ // The maximum number of pages a single slide can expand onto when printing
+ // to PDF, unlimited by default
+ pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
+
// Number of slides away from the current that are visible
viewDistance: 3,
@@ -589,27 +593,32 @@
var left = ( pageWidth - slideWidth ) / 2,
top = ( pageHeight - slideHeight ) / 2;
- var contentHeight = getAbsoluteHeight( slide );
+ var contentHeight = slide.scrollHeight;
var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
+ // Adhere to configured pages per slide limit
+ numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
+
// Center slides vertically
if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
}
+ // 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 = 'pdf-page';
+ page.style.height = ( pageHeight * numberOfPages ) + 'px';
+ slide.parentNode.insertBefore( page, slide );
+ page.appendChild( slide );
+
// Position the slide inside of the page
slide.style.left = left + 'px';
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
@@ -637,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 );
}
}
@@ -717,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' );
@@ -830,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
@@ -1291,41 +1290,6 @@
}
/**
- * Retrieves the height of the given element by looking
- * at the position and height of its immediate children.
- */
- function getAbsoluteHeight( element ) {
-
- var height = 0;
-
- if( element ) {
- var absoluteChildren = 0;
-
- toArray( element.childNodes ).forEach( function( child ) {
-
- if( typeof child.offsetTop === 'number' && child.style ) {
- // Count # of abs children
- if( window.getComputedStyle( child ).position === 'absolute' ) {
- absoluteChildren += 1;
- }
-
- height = Math.max( height, child.offsetTop + child.offsetHeight );
- }
-
- } );
-
- // If there are no absolute children, use offsetHeight
- if( absoluteChildren === 0 ) {
- height = element.offsetHeight;
- }
-
- }
-
- return height;
-
- }
-
- /**
* Returns the remaining height within the parent of the
* target element.
*
@@ -1589,10 +1553,8 @@
var size = getComputedSlideSize();
- var slidePadding = 20; // TODO Dig this out of DOM
-
// Layout the contents of the slides
- layoutSlideContents( config.width, config.height, slidePadding );
+ layoutSlideContents( config.width, config.height );
dom.slides.style.width = size.width + 'px';
dom.slides.style.height = size.height + 'px';
@@ -1654,7 +1616,7 @@
slide.style.top = 0;
}
else {
- slide.style.top = Math.max( ( ( size.height - getAbsoluteHeight( slide ) ) / 2 ) - slidePadding, 0 ) + 'px';
+ slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
}
}
else {
@@ -1674,7 +1636,7 @@
* Applies layout logic to the contents of all slides in
* the presentation.
*/
- function layoutSlideContents( width, height, padding ) {
+ function layoutSlideContents( width, height ) {
// Handle sizing of elements with the 'stretch' class
toArray( dom.slides.querySelectorAll( 'section > .stretch' ) ).forEach( function( element ) {
@@ -3427,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;
diff --git a/plugin/zoom-js/zoom.js b/plugin/zoom-js/zoom.js
index 95093e0..8738083 100644
--- a/plugin/zoom-js/zoom.js
+++ b/plugin/zoom-js/zoom.js
@@ -11,7 +11,17 @@
if( event[ modifier ] && isEnabled ) {
event.preventDefault();
- var bounds = event.target.getBoundingClientRect();
+ var bounds;
+ var originalDisplay = event.target.style.display;
+
+ // Get the bounding rect of the contents, not the containing box
+ if( window.getComputedStyle( event.target ).display === 'block' ) {
+ event.target.style.display = 'inline-block';
+ bounds = event.target.getBoundingClientRect();
+ event.target.style.display = originalDisplay;
+ } else {
+ bounds = event.target.getBoundingClientRect();
+ }
zoom.to({
x: ( bounds.left * revealScale ) - zoomPadding,