From f0f48bd9b06ffdd22f264ca5f644666347944ceb Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 3 Apr 2014 10:51:27 +0200
Subject: use flexbox for vertically centered printing #862
---
css/print/pdf.css | 9 +++++++++
1 file changed, 9 insertions(+)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 41f70c6..bf90b3d 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -188,3 +188,12 @@ ul, ol, div, p {
.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;
+}
--
cgit v1.2.3
From 646203f038fcddbc15c35e891d3bbd7aa1d8be1f Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 23 Apr 2014 19:47:30 +0200
Subject: 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(-)
(limited to 'css/print')
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;
}
--
cgit v1.2.3
From ae962d729be2b6e1b8db0c5e207c55887ff9f8dc Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sat, 26 Apr 2014 19:16:10 +0200
Subject: fix non-pdf printing (closes #881)
---
css/print/paper.css | 349 +++++++++++++++++++++++++++-------------------------
index.html | 14 +--
js/reveal.js | 4 +-
3 files changed, 190 insertions(+), 177 deletions(-)
(limited to 'css/print')
diff --git a/css/print/paper.css b/css/print/paper.css
index 893184d..5ca3fd3 100644
--- a/css/print/paper.css
+++ b/css/print/paper.css
@@ -6,171 +6,186 @@
manipulate this file as you see fit. */
-/* SECTION 1: Set default width, margin, float, and
- background. This prevents elements from extending
- beyond the edge of the printed page, and prevents
- unnecessary background images from printing */
-body {
- background: #fff;
- font-size: 13pt;
- width: auto;
- height: auto;
- border: 0;
- margin: 0 5%;
- padding: 0;
- float: none !important;
- overflow: visible;
-}
-html {
- background: #fff;
- width: auto;
- height: auto;
- overflow: visible;
-}
-
-/* SECTION 2: Remove any elements not needed in print.
- This would include navigation, ads, sidebars, etc. */
-.nestedarrow,
-.controls,
-.reveal .progress,
-.reveal.overview,
-.fork-reveal,
-.share-reveal,
-.state-background {
- display: none !important;
-}
-
-/* SECTION 3: Set body font face, size, and color.
- Consider using a serif font for readability. */
-body, p, td, li, div, a {
- font-size: 16pt!important;
- font-family: Georgia, "Times New Roman", Times, serif !important;
- color: #000;
-}
-
-/* SECTION 4: Set heading font face, sizes, and color.
- Differentiate your headings from your body text.
- Perhaps use a large sans-serif for distinction. */
-h1,h2,h3,h4,h5,h6 {
- color: #000!important;
- height: auto;
- line-height: normal;
- font-family: Georgia, "Times New Roman", Times, serif !important;
- text-shadow: 0 0 0 #000 !important;
- text-align: left;
- letter-spacing: normal;
-}
-/* Need to reduce the size of the fonts for printing */
-h1 { font-size: 26pt !important; }
-h2 { font-size: 22pt !important; }
-h3 { font-size: 20pt !important; }
-h4 { font-size: 20pt !important; font-variant: small-caps; }
-h5 { font-size: 19pt !important; }
-h6 { font-size: 18pt !important; font-style: italic; }
-
-/* SECTION 5: Make hyperlinks more usable.
- Ensure links are underlined, and consider appending
- the URL to the end of the link for usability. */
-a:link,
-a:visited {
- color: #000 !important;
- font-weight: bold;
- text-decoration: underline;
-}
-/*
-.reveal a:link:after,
-.reveal a:visited:after {
- content: " (" attr(href) ") ";
- color: #222 !important;
- font-size: 90%;
-}
-*/
-
-
-/* SECTION 6: more reveal.js specific additions by @skypanther */
-ul, ol, div, p {
- visibility: visible;
- position: static;
- width: auto;
- height: auto;
- display: block;
- overflow: visible;
- margin: auto;
- text-align: left !important;
-}
-.reveal .slides {
- position: static;
- width: auto;
- height: auto;
-
- left: auto;
- top: auto;
- margin-left: auto;
- margin-top: auto;
- padding: auto;
-
- overflow: visible;
- display: block;
-
- text-align: center;
- -webkit-perspective: none;
- -moz-perspective: none;
- -ms-perspective: none;
- perspective: none;
-
- -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
- -moz-perspective-origin: 50% 50%;
- -ms-perspective-origin: 50% 50%;
- perspective-origin: 50% 50%;
-}
-.reveal .slides>section,
-.reveal .slides>section>section {
-
- visibility: visible !important;
- position: static !important;
- width: 90% !important;
- height: auto !important;
- display: block !important;
- overflow: visible !important;
-
- left: 0% !important;
- top: 0% !important;
- margin-left: 0px !important;
- margin-top: 0px !important;
- padding: 20px 0px !important;
-
- opacity: 1 !important;
-
- -webkit-transform-style: flat !important;
- -moz-transform-style: flat !important;
- -ms-transform-style: flat !important;
- transform-style: flat !important;
-
- -webkit-transform: none !important;
- -moz-transform: none !important;
- -ms-transform: none !important;
- transform: none !important;
-}
-.reveal section {
- page-break-after: always !important;
- display: block !important;
-}
-.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:last-of-type {
- page-break-after: avoid !important;
-}
-.reveal section img {
- display: block;
- margin: 15px 0px;
- background: rgba(255,255,255,1);
- border: 1px solid #666;
- box-shadow: none;
+@media print {
+
+ /* SECTION 1: Set default width, margin, float, and
+ background. This prevents elements from extending
+ beyond the edge of the printed page, and prevents
+ unnecessary background images from printing */
+ html {
+ background: #fff;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ }
+ body {
+ background: #fff;
+ font-size: 28pt;
+ width: auto;
+ height: auto;
+ border: 0;
+ margin: 0 5%;
+ padding: 0;
+ overflow: visible;
+ float: none !important;
+ }
+
+ /* SECTION 2: Remove any elements not needed in print.
+ This would include navigation, ads, sidebars, etc. */
+ .nestedarrow,
+ .controls,
+ .reveal .progress,
+ .reveal.overview,
+ .fork-reveal,
+ .share-reveal,
+ .state-background {
+ display: none !important;
+ }
+
+ /* SECTION 3: Set body font face, size, and color.
+ Consider using a serif font for readability. */
+ body, p, td, li, div {
+ font-size: 28pt!important;
+ font-family: Georgia, "Times New Roman", Times, serif !important;
+ color: #000;
+ }
+
+ /* SECTION 4: Set heading font face, sizes, and color.
+ Differentiate your headings from your body text.
+ Perhaps use a large sans-serif for distinction. */
+ h1,h2,h3,h4,h5,h6 {
+ color: #000!important;
+ height: auto;
+ line-height: normal;
+ font-family: Georgia, "Times New Roman", Times, serif !important;
+ text-shadow: 0 0 0 #000 !important;
+ text-align: left;
+ letter-spacing: normal;
+ }
+ /* Need to reduce the size of the fonts for printing */
+ h1 { font-size: 36pt !important; }
+ h2 { font-size: 32pt !important; }
+ h3 { font-size: 30pt !important; }
+ h4 { font-size: 30pt !important; font-variant: small-caps; }
+ h5 { font-size: 29pt !important; }
+ h6 { font-size: 28pt !important; font-style: italic; }
+
+ /* SECTION 5: Make hyperlinks more usable.
+ Ensure links are underlined, and consider appending
+ the URL to the end of the link for usability. */
+ a:link,
+ a:visited {
+ color: #000 !important;
+ font-weight: bold;
+ text-decoration: underline;
+ }
+ /*
+ .reveal a:link:after,
+ .reveal a:visited:after {
+ content: " (" attr(href) ") ";
+ color: #222 !important;
+ font-size: 90%;
+ }
+ */
+
+
+ /* SECTION 6: more reveal.js specific additions by @skypanther */
+ ul, ol, div, p {
+ visibility: visible;
+ position: static;
+ width: auto;
+ height: auto;
+ display: block;
+ overflow: visible;
+ margin: auto;
+ text-align: left !important;
+ }
+ .reveal pre,
+ .reveal table {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .reveal pre code {
+ padding: 20px;
+ border: 1px solid #ddd;
+ }
+ .reveal .slides {
+ position: static;
+ width: auto;
+ height: auto;
+
+ left: 0;
+ top: 0;
+ margin-left: 0;
+ margin-top: 0;
+ padding: 0;
+
+ overflow: visible;
+ display: block;
+
+ text-align: center;
+ -webkit-perspective: none;
+ -moz-perspective: none;
+ -ms-perspective: none;
+ perspective: none;
+
+ -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+ }
+ .reveal .slides>section,
+ .reveal .slides>section>section {
+ visibility: visible !important;
+ position: static !important;
+ width: 90% !important;
+ height: auto !important;
+ display: block !important;
+ overflow: visible !important;
+
+ left: 0 !important;
+ top: 0 !important;
+ margin-left: 0 !important;
+ margin-top: 0 !important;
+ padding: 20px 0px !important;
+
+ opacity: 1 !important;
+
+ -webkit-transform-style: flat !important;
+ -moz-transform-style: flat !important;
+ -ms-transform-style: flat !important;
+ transform-style: flat !important;
+
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -ms-transform: none !important;
+ transform: none !important;
+ }
+ .reveal section {
+ page-break-after: always !important;
+ }
+ .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:last-of-type {
+ page-break-after: avoid !important;
+ }
+ .reveal section img {
+ display: block;
+ margin: 15px 0px;
+ background: rgba(255,255,255,1);
+ border: 1px solid #666;
+ box-shadow: none;
+ }
+
+ .reveal section small {
+ font-size: 0.8em;
+ }
+
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7eabd5c..98739b9 100644
--- a/index.html
+++ b/index.html
@@ -20,15 +20,13 @@
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
- <!-- If the query includes 'print-pdf', include the PDF print sheet -->
+ <!-- Include the appropriate print stylesheet -->
<script>
- if( window.location.search.match( /print-pdf/gi ) ) {
- var link = document.createElement( 'link' );
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.href = 'css/print/pdf.css';
- document.getElementsByTagName( 'head' )[0].appendChild( link );
- }
+ var link = document.createElement( 'link' );
+ link.rel = 'stylesheet';
+ link.type = 'text/css';
+ link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
+ document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
diff --git a/js/reveal.js b/js/reveal.js
index a203418..222a5a1 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -2014,7 +2014,7 @@ var Reveal = (function(){
// Show the horizontal slide if it's within the view distance
if( distanceX < viewDistance ) {
- horizontalSlide.style.display = 'block';
+ horizontalSlide.style.display = '';
loadSlide( horizontalSlide );
}
else {
@@ -2031,7 +2031,7 @@ var Reveal = (function(){
distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy );
if( distanceX + distanceY < viewDistance ) {
- verticalSlide.style.display = 'block';
+ verticalSlide.style.display = '';
loadSlide( verticalSlide );
}
else {
--
cgit v1.2.3
From a522312999c93b1a5a8353ab18d573c9c4ac83f2 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sat, 26 Apr 2014 20:49:22 +0200
Subject: improvements to print stylesheet
---
css/print/paper.css | 77 ++++++++++++++++++++++++++++++-----------------------
1 file changed, 44 insertions(+), 33 deletions(-)
(limited to 'css/print')
diff --git a/css/print/paper.css b/css/print/paper.css
index 5ca3fd3..7c7257a 100644
--- a/css/print/paper.css
+++ b/css/print/paper.css
@@ -20,7 +20,7 @@
}
body {
background: #fff;
- font-size: 28pt;
+ font-size: 20pt;
width: auto;
height: auto;
border: 0;
@@ -34,18 +34,18 @@
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls,
- .reveal .progress,
- .reveal.overview,
.fork-reveal,
.share-reveal,
- .state-background {
+ .state-background,
+ .reveal .progress,
+ .reveal .backgrounds {
display: none !important;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
- font-size: 28pt!important;
+ font-size: 20pt!important;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000;
}
@@ -63,12 +63,12 @@
letter-spacing: normal;
}
/* Need to reduce the size of the fonts for printing */
- h1 { font-size: 36pt !important; }
- h2 { font-size: 32pt !important; }
- h3 { font-size: 30pt !important; }
- h4 { font-size: 30pt !important; font-variant: small-caps; }
- h5 { font-size: 29pt !important; }
- h6 { font-size: 28pt !important; font-style: italic; }
+ h1 { font-size: 28pt !important; }
+ h2 { font-size: 24pt !important; }
+ h3 { font-size: 22pt !important; }
+ h4 { font-size: 22pt !important; font-variant: small-caps; }
+ h5 { font-size: 21pt !important; }
+ h6 { font-size: 20pt !important; font-style: italic; }
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
@@ -97,7 +97,7 @@
height: auto;
display: block;
overflow: visible;
- margin: auto;
+ margin: 0;
text-align: left !important;
}
.reveal pre,
@@ -109,36 +109,39 @@
padding: 20px;
border: 1px solid #ddd;
}
+ .reveal blockquote {
+ margin: 20px 0;
+ }
.reveal .slides {
- position: static;
- width: auto;
- height: auto;
+ position: static !important;
+ width: auto !important;
+ height: auto !important;
- left: 0;
- top: 0;
- margin-left: 0;
- margin-top: 0;
- padding: 0;
+ left: 0 !important;
+ top: 0 !important;
+ margin-left: 0 !important;
+ margin-top: 0 !important;
+ padding: 0 !important;
+ zoom: 1 !important;
- overflow: visible;
- display: block;
+ overflow: visible !important;
+ display: block !important;
- text-align: center;
+ text-align: left !important;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
- -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+ -webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
- .reveal .slides>section,
- .reveal .slides>section>section {
+ .reveal .slides section {
visibility: visible !important;
position: static !important;
- width: 90% !important;
+ width: 100% !important;
height: auto !important;
display: block !important;
overflow: visible !important;
@@ -147,10 +150,13 @@
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
- padding: 20px 0px !important;
+ padding: 60px 20px !important;
+ z-index: auto !important;
opacity: 1 !important;
+ page-break-after: always !important;
+
-webkit-transform-style: flat !important;
-moz-transform-style: flat !important;
-ms-transform-style: flat !important;
@@ -160,9 +166,17 @@
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
+
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -ms-transition: none !important;
+ transition: none !important;
}
- .reveal section {
- page-break-after: always !important;
+ .reveal .slides section.stack {
+ padding: 0 !important;
+ }
+ .reveal section:last-of-type {
+ page-break-after: avoid !important;
}
.reveal section .fragment {
opacity: 1 !important;
@@ -173,9 +187,6 @@
-ms-transform: none !important;
transform: none !important;
}
- .reveal section:last-of-type {
- page-break-after: avoid !important;
- }
.reveal section img {
display: block;
margin: 15px 0px;
--
cgit v1.2.3
From ddfb0aa86fdfc8e92d0b81fbe36dc79c4585dd86 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sat, 26 Apr 2014 21:41:54 +0200
Subject: abide by configured width/height when printing to pdf
---
css/print/pdf.css | 5 -----
js/reveal.js | 27 +++++++++++++++++++++------
2 files changed, 21 insertions(+), 11 deletions(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 559b05d..bc09a70 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -30,11 +30,6 @@ html {
overflow: visible;
}
-@page {
- size: letter landscape;
- margin: 0;
-}
-
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
diff --git a/js/reveal.js b/js/reveal.js
index a203418..5dc6856 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -413,21 +413,19 @@ var Reveal = (function(){
*/
function setupPDF() {
- // The aspect ratio of pages when saving to PDF in Chrome,
- // we need to abide by this ratio when determining the pixel
- // size of our pages
- var pageAspectRatio = 1.295;
-
var slideSize = getComputedSlideSize( window.innerWidth, window.innerHeight );
// Dimensions of the PDF pages
var pageWidth = Math.round( slideSize.width * ( 1 + config.margin ) ),
- pageHeight = Math.round( pageWidth / pageAspectRatio );
+ pageHeight = Math.round( slideSize.height * ( 1 + config.margin ) );
// Dimensions of slides within the pages
var slideWidth = slideSize.width,
slideHeight = slideSize.height;
+ // Let the browser know what page size we want to print
+ injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' );
+
document.body.classList.add( 'print-pdf' );
document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px';
@@ -944,6 +942,23 @@ var Reveal = (function(){
}
+ /**
+ * Injects the given CSS styles into the DOM.
+ */
+ function injectStyleSheet( value ) {
+
+ var tag = document.createElement( 'style' );
+ tag.type = 'text/css';
+ if( tag.styleSheet ) {
+ tag.styleSheet.cssText = value;
+ }
+ else {
+ tag.appendChild( document.createTextNode( value ) );
+ }
+ document.getElementsByTagName( 'head' )[0].appendChild( tag );
+
+ }
+
/**
* Retrieves the height of the given element by looking
* at the position and height of its immediate children.
--
cgit v1.2.3
From 860580d4d0d10646b59a9b3663c0c1cc504bc1c2 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 27 Apr 2014 17:31:50 +0200
Subject: getSlideBackground now works in pdf mode, add pdf tests
---
css/print/pdf.css | 1 +
js/reveal.js | 11 ++++++--
test/test-pdf.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
test/test-pdf.js | 15 ++++++++++
4 files changed, 108 insertions(+), 2 deletions(-)
create mode 100644 test/test-pdf.html
create mode 100644 test/test-pdf.js
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index bc09a70..e43d05c 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -152,6 +152,7 @@ ul, ol, div, p {
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal section .slide-background {
+ display: block !important;
position: absolute;
top: 0;
left: 0;
diff --git a/js/reveal.js b/js/reveal.js
index a4dba10..d1f2fb0 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -2693,11 +2693,18 @@ var Reveal = (function(){
/**
* Returns the background element for the given slide.
* All slides, even the ones with no background properties
- * defined, have a background element so this never returns
- * null.
+ * defined, have a background element so as long as the
+ * index is valid an element will be returned.
*/
function getSlideBackground( x, y ) {
+ // When printing to PDF the slide backgrounds are nested
+ // inside of the slides
+ if( isPrintingPDF() ) {
+ var slide = getSlide( x, y );
+ return slide ? slide.querySelector( '.slide-background' ) : undefined;
+ }
+
var horizontalBackground = document.querySelectorAll( '.backgrounds>.slide-background' )[ x ];
var verticalBackgrounds = horizontalBackground && horizontalBackground.querySelectorAll( '.slide-background' );
diff --git a/test/test-pdf.html b/test/test-pdf.html
new file mode 100644
index 0000000..751ed26
--- /dev/null
+++ b/test/test-pdf.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>reveal.js - Test PDF exports</title>
+
+ <link rel="stylesheet" href="../css/reveal.css">
+ <link rel="stylesheet" href="../css/print/pdf.css">
+ <link rel="stylesheet" href="qunit-1.12.0.css">
+ </head>
+
+ <body style="overflow: auto;">
+
+ <div id="qunit"></div>
+ <div id="qunit-fixture"></div>
+
+ <div class="reveal" style="display: none;">
+
+ <div class="slides">
+
+ <section>
+ <h1>1</h1>
+ <img data-src="fake-url.png">
+ </section>
+
+ <section>
+ <section>
+ <h1>2.1</h1>
+ </section>
+ <section>
+ <h1>2.2</h1>
+ </section>
+ <section>
+ <h1>2.3</h1>
+ </section>
+ </section>
+
+ <section id="fragment-slides">
+ <section>
+ <h1>3.1</h1>
+ <ul>
+ <li class="fragment">4.1</li>
+ <li class="fragment">4.2</li>
+ <li class="fragment">4.3</li>
+ </ul>
+ </section>
+
+ <section>
+ <h1>3.2</h1>
+ <ul>
+ <li class="fragment" data-fragment-index="0">4.1</li>
+ <li class="fragment" data-fragment-index="0">4.2</li>
+ </ul>
+ </section>
+
+ <section>
+ <h1>3.3</h1>
+ <ul>
+ <li class="fragment" data-fragment-index="1">3.3.1</li>
+ <li class="fragment" data-fragment-index="4">3.3.2</li>
+ <li class="fragment" data-fragment-index="4">3.3.3</li>
+ </ul>
+ </section>
+ </section>
+
+ <section>
+ <h1>4</h1>
+ </section>
+
+ </div>
+
+ </div>
+
+ <script src="../lib/js/head.min.js"></script>
+ <script src="../js/reveal.js"></script>
+ <script src="qunit-1.12.0.js"></script>
+
+ <script src="test-pdf.js"></script>
+
+ </body>
+</html>
diff --git a/test/test-pdf.js b/test/test-pdf.js
new file mode 100644
index 0000000..8ec34fd
--- /dev/null
+++ b/test/test-pdf.js
@@ -0,0 +1,15 @@
+
+Reveal.addEventListener( 'ready', function() {
+
+ // Only one test for now, we're mainly ensuring that there
+ // are no execution errors when running PDF mode
+
+ test( 'Reveal.isReady', function() {
+ strictEqual( Reveal.isReady(), true, 'returns true' );
+ });
+
+
+} );
+
+Reveal.initialize({ pdf: true });
+
--
cgit v1.2.3
From 2ac0a55ccf0e8f881ff48f3500865bff37ec6fa3 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 29 Apr 2014 13:30:56 +0200
Subject: ensure pdf pages are never zero-height
---
css/print/pdf.css | 1 +
js/reveal.js | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index e43d05c..7bcc6cb 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -119,6 +119,7 @@ ul, ol, div, p {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
+ min-height: 1px;
opacity: 1 !important;
diff --git a/js/reveal.js b/js/reveal.js
index 4e8f9f2..6e6c12b 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -468,7 +468,7 @@
top = ( pageHeight - slideHeight ) / 2;
var contentHeight = getAbsoluteHeight( slide );
- var numberOfPages = Math.ceil( contentHeight / pageHeight );
+ var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
// Center slides vertically
if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
--
cgit v1.2.3
From da1f221b4f1ad11edf4099d651cb56e7fae79db0 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 4 May 2014 08:24:26 +0200
Subject: reduce max-height of images in pdfs
---
css/print/pdf.css | 1 +
1 file changed, 1 insertion(+)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 7bcc6cb..ca42f4f 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -142,6 +142,7 @@ ul, ol, div, p {
}
.reveal img {
box-shadow: none;
+ max-height: 80%;
}
.reveal .roll {
overflow: visible;
--
cgit v1.2.3
From 54e256764ce98204caad708b654f6250fb781664 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 4 May 2014 08:29:45 +0200
Subject: limit size of media elements when printing to pdf
---
css/print/pdf.css | 1 -
js/reveal.js | 3 +++
2 files changed, 3 insertions(+), 1 deletion(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index ca42f4f..7bcc6cb 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -142,7 +142,6 @@ ul, ol, div, p {
}
.reveal img {
box-shadow: none;
- max-height: 80%;
}
.reveal .roll {
overflow: visible;
diff --git a/js/reveal.js b/js/reveal.js
index 49b2e7c..ad332a3 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -461,6 +461,9 @@
// Let the browser know what page size we want to print
injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' );
+ // Limit the size of certain elements to the dimensions of the slide
+ injectStyleSheet( '.reveal img, .reveal video, .reveal iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
+
document.body.classList.add( 'print-pdf' );
document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px';
--
cgit v1.2.3
From 06ca536ae1b0f65b58411aab947d70951862c2a1 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sat, 10 May 2014 10:10:59 +0200
Subject: no need to override font sizes after updates to pdf printing
---
css/print/pdf.css | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 7bcc6cb..47ca207 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -16,7 +16,6 @@
}
body {
- font-size: 18pt;
margin: 0 auto !important;
border: 0;
padding: 0;
@@ -45,7 +44,7 @@ html {
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
- font-size: 18pt;
+
}
/* SECTION 4: Set heading font face, sizes, and color.
@@ -147,9 +146,6 @@ ul, ol, div, p {
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 {
--
cgit v1.2.3
From e7f46155852cc35c338db0a9b5716ea1e5249717 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 20 May 2014 12:09:49 +0200
Subject: hide slide numbers while printing to pdf #885
---
css/print/pdf.css | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 47ca207..8ac87c5 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -32,8 +32,10 @@ html {
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
-.controls,
+.reveal .controls,
.reveal .progress,
+.reveal .slide-number,
+.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
--
cgit v1.2.3
From ff788bb31b5c9af84c407502501575eeac012dcd Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 23 May 2014 14:06:52 +0200
Subject: additional monospace options for phantomjs
---
css/print/pdf.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 8ac87c5..37454b6 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -67,7 +67,7 @@ a:visited {
.reveal pre code {
overflow: hidden !important;
- font-family: monospace !important;
+ font-family: Courier, 'Courier New', monospace !important;
}
--
cgit v1.2.3
From ad9e93eae5850b7cd8513b4040e0b1b144a2f275 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 9 Dec 2014 15:06:25 +0100
Subject: dont force links to be underlined in pdf
---
css/print/pdf.css | 13 ++-----------
1 file changed, 2 insertions(+), 11 deletions(-)
(limited to 'css/print')
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 37454b6..2eb4cf2 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -56,22 +56,13 @@ h1,h2,h3,h4,h5,h6 {
text-shadow: 0 0 0 #000 !important;
}
-/* SECTION 5: Make hyperlinks more usable.
- Ensure links are underlined, and consider appending
- the URL to the end of the link for usability. */
-a:link,
-a:visited {
- font-weight: normal;
- text-decoration: underline;
-}
-
.reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important;
}
-/* SECTION 6: more reveal.js specific additions by @skypanther */
+/* SECTION 5: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
@@ -156,7 +147,7 @@ ul, ol, div, p {
top: 0;
left: 0;
width: 100%;
- z-index: 0;
+ z-index: -1;
}
/* All elements should be above the slide-background */
.reveal section>* {
--
cgit v1.2.3