revert from flexbox for pdf centering, use js for PDF setup

edit
Hakim El Hattab 2014-04-23 19:47:30 +02:00
parent 54ca9edeed
commit 646203f038
3 changed files with 86 additions and 49 deletions

View File

@ -17,8 +17,6 @@
body { body {
font-size: 18pt; font-size: 18pt;
width: 297mm;
height: 229mm;
margin: 0 auto !important; margin: 0 auto !important;
border: 0; border: 0;
padding: 0; padding: 0;
@ -105,8 +103,6 @@ ul, ol, div, p {
overflow: visible; overflow: visible;
display: block; display: block;
text-align: center;
-webkit-perspective: none; -webkit-perspective: none;
-moz-perspective: none; -moz-perspective: none;
-ms-perspective: none; -ms-perspective: none;
@ -118,21 +114,15 @@ ul, ol, div, p {
perspective-origin: 50% 50%; perspective-origin: 50% 50%;
} }
.reveal .slides section { .reveal .slides section {
page-break-after: always !important; page-break-after: always !important;
visibility: visible !important; visibility: visible !important;
position: relative !important; position: relative !important;
width: 100% !important;
height: 229mm !important;
min-height: 229mm !important;
display: block !important; display: block !important;
overflow: hidden !important; position: relative !important;
left: 0 !important;
top: 0 !important;
margin: 0 !important; margin: 0 !important;
padding: 2cm 2cm 0 2cm !important; padding: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
opacity: 1 !important; opacity: 1 !important;
@ -154,30 +144,6 @@ ul, ol, div, p {
height: auto !important; height: auto !important;
min-height: auto !important; min-height: auto !important;
} }
.reveal .absolute-element {
margin-left: 2.2cm;
margin-top: 1.8cm;
}
.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 section .slide-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 0;
}
.reveal section>* {
position: relative;
z-index: 1;
}
.reveal img { .reveal img {
box-shadow: none; box-shadow: none;
} }
@ -189,11 +155,17 @@ ul, ol, div, p {
font-size: 16pt !important; font-size: 16pt !important;
} }
.reveal.center .slides section:not(.stack) { /* Slide backgrounds are placed inside of their slide when exporting to PDF */
display: flex !important; .reveal section .slide-background {
flex-direction: column; position: absolute;
align-items: center; top: 0;
justify-content: center; left: 0;
padding-top: 2em !important; width: 100%;
padding-bottom: 2em !important; z-index: 0;
} }
/* All elements should be above the slide-background */
.reveal section>* {
position: relative;
z-index: 1;
}

View File

@ -1328,6 +1328,8 @@ body {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0;
left: 0;
-webkit-perspective: 600px; -webkit-perspective: 600px;
-moz-perspective: 600px; -moz-perspective: 600px;

View File

@ -333,6 +333,11 @@ var Reveal = (function(){
// Update all backgrounds // Update all backgrounds
updateBackground( true ); 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 // Notify listeners that the presentation is ready but use a 1ms
// timeout to ensure it's not fired synchronously after #initialize() // timeout to ensure it's not fired synchronously after #initialize()
setTimeout( function() { 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. * Creates an HTML element and returns a reference to it.
* If the element already exists the existing instance will * If the element already exists the existing instance will
@ -428,9 +493,7 @@ var Reveal = (function(){
*/ */
function createBackgrounds() { function createBackgrounds() {
if( isPrintingPDF() ) { var printMode = isPrintingPDF();
document.body.classList.add( 'print-pdf' );
}
// Clear prior backgrounds // Clear prior backgrounds
dom.background.innerHTML = ''; dom.background.innerHTML = '';
@ -441,7 +504,7 @@ var Reveal = (function(){
var backgroundStack; var backgroundStack;
if( isPrintingPDF() ) { if( printMode ) {
backgroundStack = createBackground( slideh, slideh ); backgroundStack = createBackground( slideh, slideh );
} }
else { else {
@ -451,7 +514,7 @@ var Reveal = (function(){
// Iterate over all vertical slides // Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
if( isPrintingPDF() ) { if( printMode ) {
createBackground( slidev, slidev ); createBackground( slidev, slidev );
} }
else { else {
@ -887,7 +950,7 @@ var Reveal = (function(){
if( typeof child.offsetTop === 'number' && child.style ) { if( typeof child.offsetTop === 'number' && child.style ) {
// Count # of abs children // Count # of abs children
if( child.style.position === 'absolute' ) { if( window.getComputedStyle( child ).position === 'absolute' ) {
absoluteChildren += 1; absoluteChildren += 1;
} }