From 646203f038fcddbc15c35e891d3bbd7aa1d8be1f Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 23 Apr 2014 19:47:30 +0200
Subject: [PATCH] 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(-)
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;
}
--
GitLab