Merge branch 'dev_repackagePrintStyleSheets' of https://github.com/quilicicf/reveal.js into dev

This commit is contained in:
Hakim El Hattab 2020-03-12 19:20:15 +01:00
commit 92e3a3680c
13 changed files with 669 additions and 687 deletions

2
.gitignore vendored
View File

@ -9,5 +9,3 @@ log/*.log
tmp/** tmp/**
node_modules/ node_modules/
.sass-cache .sass-cache
css/reveal.min.css
js/reveal.min.js

View File

@ -1,203 +0,0 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
@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: 20pt;
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,
.fork-reveal,
.share-reveal,
.state-background,
.reveal .progress,
.reveal .backgrounds,
.reveal .slide-number {
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: 20pt!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: 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
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: 0;
text-align: left !important;
}
.reveal pre,
.reveal table {
margin-left: 0;
margin-right: 0;
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal blockquote {
margin: 20px 0;
}
.reveal .slides {
position: static !important;
width: auto !important;
height: auto !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
zoom: 1 !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides section {
visibility: visible !important;
position: static !important;
width: auto !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: 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;
transform-style: flat !important;
-webkit-transform: none !important;
-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 .slides section.stack {
padding: 0 !important;
}
.reveal section:last-of-type {
page-break-after: avoid !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 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;
}
}

202
css/print/paper.scss Normal file
View File

@ -0,0 +1,202 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
@media print {
html:not(.print-pdf) {
/* 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 */
background: #fff;
width: auto;
height: auto;
overflow: visible;
body {
background: #fff;
font-size: 20pt;
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,
.fork-reveal,
.share-reveal,
.state-background,
.reveal .progress,
.reveal .backgrounds,
.reveal .slide-number {
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: 20pt!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: 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
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: 0;
text-align: left !important;
}
.reveal pre,
.reveal table {
margin-left: 0;
margin-right: 0;
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal blockquote {
margin: 20px 0;
}
.reveal .slides {
position: static !important;
width: auto !important;
height: auto !important;
left: 0 !important;
top: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
zoom: 1 !important;
overflow: visible !important;
display: block !important;
text-align: left !important;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides section {
visibility: visible !important;
position: static !important;
width: auto !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: 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;
transform-style: flat !important;
-webkit-transform: none !important;
-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 .slides section.stack {
padding: 0 !important;
}
.reveal section:last-of-type {
page-break-after: avoid !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 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;
}
}
}

View File

@ -1,165 +0,0 @@
/**
* This stylesheet is used to print reveal.js
* presentations to PDF.
*
* https://github.com/hakimel/reveal.js#pdf-export
*/
* {
-webkit-print-color-adjust: exact;
}
body {
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
overflow: visible;
}
html {
width: 100%;
height: 100%;
overflow: visible;
}
/* Remove any elements not needed in print. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important;
}
.reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important;
}
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
}
.reveal {
width: auto !important;
height: auto !important;
overflow: hidden !important;
}
.reveal .slides {
position: static;
width: 100% !important;
height: auto !important;
zoom: 1 !important;
pointer-events: initial;
left: auto;
top: auto;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
display: block;
perspective: none;
perspective-origin: 50% 50%;
}
.reveal .slides .pdf-page {
position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always;
}
.reveal .slides section {
visibility: visible !important;
display: block !important;
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
min-height: 1px;
opacity: 1 !important;
transform-style: flat !important;
transform: none !important;
}
.reveal section.stack {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important;
}
.reveal img {
box-shadow: none;
}
.reveal .roll {
overflow: visible;
line-height: 1em;
}
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important;
}
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf {
display: block;
width: 100%;
height: auto;
max-height: none;
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;
border: 0;
}
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block;
position: absolute;
font-size: 14px;
}

172
css/print/pdf.scss Normal file
View File

@ -0,0 +1,172 @@
/**
* This stylesheet is used to print reveal.js
* presentations to PDF.
*
* https://github.com/hakimel/reveal.js#pdf-export
*/
html.print-pdf {
* {
-webkit-print-color-adjust: exact;
}
& {
width: 100%;
height: 100%;
overflow: visible;
}
body {
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
overflow: visible;
}
/* Remove any elements not needed in print. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important;
}
.reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important;
}
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
}
.reveal {
width: auto !important;
height: auto !important;
overflow: hidden !important;
}
.reveal .slides {
position: static;
width: 100% !important;
height: auto !important;
zoom: 1 !important;
pointer-events: initial;
left: auto;
top: auto;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
display: block;
perspective: none;
perspective-origin: 50% 50%;
}
.reveal .slides .pdf-page {
position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always;
}
.reveal .slides section {
visibility: visible !important;
display: block !important;
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
min-height: 1px;
opacity: 1 !important;
transform-style: flat !important;
transform: none !important;
}
.reveal section.stack {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important;
}
.reveal img {
box-shadow: none;
}
.reveal .roll {
overflow: visible;
line-height: 1em;
}
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important;
}
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf {
display: block;
width: 100%;
height: auto;
max-height: none;
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;
border: 0;
}
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block;
position: absolute;
font-size: 14px;
}
/* This accessibility tool is not useful in PDF and breaks it visually */
.aria-status {
display: none;
}
}

View File

@ -18,17 +18,12 @@
<link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme"> <link rel="stylesheet" href="dist/theme/black.css" id="theme">
<!-- Print on paper or PDF -->
<link rel="stylesheet" href="dist/print/paper.css">
<link rel="stylesheet" href="dist/print/pdf.css">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'dist/print/pdf.css' : 'dist/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head> </head>
<body> <body>

106
dist/print/paper.css vendored
View File

@ -5,16 +5,36 @@
Feel free (nay, compelled) to edit, append, and Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */ manipulate this file as you see fit. */
@media print { @media print {
html:not(.print-pdf) {
/* SECTION 1: Set default width, margin, float, and /* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending background. This prevents elements from extending
beyond the edge of the printed page, and prevents beyond the edge of the printed page, and prevents
unnecessary background images from printing */ unnecessary background images from printing */
html {
background: #fff; background: #fff;
width: auto; width: auto;
height: auto; height: auto;
overflow: visible; } overflow: visible;
body { /* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
/* SECTION 4: Set heading font face, sizes, and color.
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
/* Need to reduce the size of the fonts for printing */
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
/*
.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 */ }
html:not(.print-pdf) body {
background: #fff; background: #fff;
font-size: 20pt; font-size: 20pt;
width: auto; width: auto;
@ -24,27 +44,20 @@
padding: 0; padding: 0;
overflow: visible; overflow: visible;
float: none !important; } float: none !important; }
/* SECTION 2: Remove any elements not needed in print. html:not(.print-pdf) .nestedarrow,
This would include navigation, ads, sidebars, etc. */ html:not(.print-pdf) .controls,
.nestedarrow, html:not(.print-pdf) .fork-reveal,
.controls, html:not(.print-pdf) .share-reveal,
.fork-reveal, html:not(.print-pdf) .state-background,
.share-reveal, html:not(.print-pdf) .reveal .progress,
.state-background, html:not(.print-pdf) .reveal .backgrounds,
.reveal .progress, html:not(.print-pdf) .reveal .slide-number {
.reveal .backgrounds,
.reveal .slide-number {
display: none !important; } display: none !important; }
/* SECTION 3: Set body font face, size, and color. html:not(.print-pdf) body, html:not(.print-pdf) p, html:not(.print-pdf) td, html:not(.print-pdf) li, html:not(.print-pdf) div {
Consider using a serif font for readability. */
body, p, td, li, div {
font-size: 20pt !important; font-size: 20pt !important;
font-family: Georgia, "Times New Roman", Times, serif !important; font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000; } color: #000; }
/* SECTION 4: Set heading font face, sizes, and color. html:not(.print-pdf) h1, html:not(.print-pdf) h2, html:not(.print-pdf) h3, html:not(.print-pdf) h4, html:not(.print-pdf) h5, html:not(.print-pdf) h6 {
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1, h2, h3, h4, h5, h6 {
color: #000 !important; color: #000 !important;
height: auto; height: auto;
line-height: normal; line-height: normal;
@ -52,39 +65,26 @@
text-shadow: 0 0 0 #000 !important; text-shadow: 0 0 0 #000 !important;
text-align: left; text-align: left;
letter-spacing: normal; } letter-spacing: normal; }
/* Need to reduce the size of the fonts for printing */ html:not(.print-pdf) h1 {
h1 {
font-size: 28pt !important; } font-size: 28pt !important; }
h2 { html:not(.print-pdf) h2 {
font-size: 24pt !important; } font-size: 24pt !important; }
h3 { html:not(.print-pdf) h3 {
font-size: 22pt !important; } font-size: 22pt !important; }
h4 { html:not(.print-pdf) h4 {
font-size: 22pt !important; font-size: 22pt !important;
font-variant: small-caps; } font-variant: small-caps; }
h5 { html:not(.print-pdf) h5 {
font-size: 21pt !important; } font-size: 21pt !important; }
h6 { html:not(.print-pdf) h6 {
font-size: 20pt !important; font-size: 20pt !important;
font-style: italic; } font-style: italic; }
/* SECTION 5: Make hyperlinks more usable. html:not(.print-pdf) a:link,
Ensure links are underlined, and consider appending html:not(.print-pdf) a:visited {
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000 !important; color: #000 !important;
font-weight: bold; font-weight: bold;
text-decoration: underline; } text-decoration: underline; }
/* html:not(.print-pdf) ul, html:not(.print-pdf) ol, html:not(.print-pdf) div, html:not(.print-pdf) p {
.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; visibility: visible;
position: static; position: static;
width: auto; width: auto;
@ -93,16 +93,16 @@
overflow: visible; overflow: visible;
margin: 0; margin: 0;
text-align: left !important; } text-align: left !important; }
.reveal pre, html:not(.print-pdf) .reveal pre,
.reveal table { html:not(.print-pdf) .reveal table {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.reveal pre code { html:not(.print-pdf) .reveal pre code {
padding: 20px; padding: 20px;
border: 1px solid #ddd; } border: 1px solid #ddd; }
.reveal blockquote { html:not(.print-pdf) .reveal blockquote {
margin: 20px 0; } margin: 20px 0; }
.reveal .slides { html:not(.print-pdf) .reveal .slides {
position: static !important; position: static !important;
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
@ -123,7 +123,7 @@
-moz-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; } perspective-origin: 50% 50%; }
.reveal .slides section { html:not(.print-pdf) .reveal .slides section {
visibility: visible !important; visibility: visible !important;
position: static !important; position: static !important;
width: auto !important; width: auto !important;
@ -150,22 +150,22 @@
-moz-transition: none !important; -moz-transition: none !important;
-ms-transition: none !important; -ms-transition: none !important;
transition: none !important; } transition: none !important; }
.reveal .slides section.stack { html:not(.print-pdf) .reveal .slides section.stack {
padding: 0 !important; } padding: 0 !important; }
.reveal section:last-of-type { html:not(.print-pdf) .reveal section:last-of-type {
page-break-after: avoid !important; } page-break-after: avoid !important; }
.reveal section .fragment { html:not(.print-pdf) .reveal section .fragment {
opacity: 1 !important; opacity: 1 !important;
visibility: visible !important; visibility: visible !important;
-webkit-transform: none !important; -webkit-transform: none !important;
-moz-transform: none !important; -moz-transform: none !important;
-ms-transform: none !important; -ms-transform: none !important;
transform: none !important; } transform: none !important; }
.reveal section img { html:not(.print-pdf) .reveal section img {
display: block; display: block;
margin: 15px 0px; margin: 15px 0px;
background: white; background: white;
border: 1px solid #666; border: 1px solid #666;
box-shadow: none; } box-shadow: none; }
.reveal section small { html:not(.print-pdf) .reveal section small {
font-size: 0.8em; } } font-size: 0.8em; } }

91
dist/print/pdf.css vendored
View File

@ -4,40 +4,40 @@
* *
* https://github.com/hakimel/reveal.js#pdf-export * https://github.com/hakimel/reveal.js#pdf-export
*/ */
* { html.print-pdf {
/* Remove any elements not needed in print. */
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
/* Display slide speaker notes when 'showNotes' is enabled */
/* Layout option which makes notes appear on a separate page */
/* Display slide numbers when 'slideNumber' is enabled */
/* This accessibility tool is not useful in PDF and breaks it visually */ }
html.print-pdf * {
-webkit-print-color-adjust: exact; } -webkit-print-color-adjust: exact; }
html.print-pdf {
body { width: 100%;
height: 100%;
overflow: visible; }
html.print-pdf body {
margin: 0 auto !important; margin: 0 auto !important;
border: 0; border: 0;
padding: 0; padding: 0;
float: none !important; float: none !important;
overflow: visible; } overflow: visible; }
html.print-pdf .nestedarrow,
html { html.print-pdf .reveal .controls,
width: 100%; html.print-pdf .reveal .progress,
height: 100%; html.print-pdf .reveal .playback,
overflow: visible; } html.print-pdf .reveal.overview,
html.print-pdf .fork-reveal,
/* Remove any elements not needed in print. */ html.print-pdf .share-reveal,
.nestedarrow, html.print-pdf .state-background {
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important; } display: none !important; }
html.print-pdf h1, html.print-pdf h2, html.print-pdf h3, html.print-pdf h4, html.print-pdf h5, html.print-pdf h6 {
h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important; } text-shadow: 0 0 0 #000 !important; }
html.print-pdf .reveal pre code {
.reveal pre code {
overflow: hidden !important; overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important; } font-family: Courier, 'Courier New', monospace !important; }
html.print-pdf ul, html.print-pdf ol, html.print-pdf div, html.print-pdf p {
ul, ol, div, p {
visibility: visible; visibility: visible;
position: static; position: static;
width: auto; width: auto;
@ -45,17 +45,16 @@ ul, ol, div, p {
display: block; display: block;
overflow: visible; overflow: visible;
margin: auto; } margin: auto; }
html.print-pdf .reveal {
.reveal {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
overflow: hidden !important; } overflow: hidden !important; }
html.print-pdf .reveal .slides {
.reveal .slides {
position: static; position: static;
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
zoom: 1 !important; zoom: 1 !important;
pointer-events: initial;
left: auto; left: auto;
top: auto; top: auto;
margin: 0 !important; margin: 0 !important;
@ -64,14 +63,12 @@ ul, ol, div, p {
display: block; display: block;
perspective: none; perspective: none;
perspective-origin: 50% 50%; } perspective-origin: 50% 50%; }
html.print-pdf .reveal .slides .pdf-page {
.reveal .slides .pdf-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
page-break-after: always; } page-break-after: always; }
html.print-pdf .reveal .slides section {
.reveal .slides section {
visibility: visible !important; visibility: visible !important;
display: block !important; display: block !important;
position: absolute !important; position: absolute !important;
@ -82,24 +79,19 @@ ul, ol, div, p {
opacity: 1 !important; opacity: 1 !important;
transform-style: flat !important; transform-style: flat !important;
transform: none !important; } transform: none !important; }
html.print-pdf .reveal section.stack {
.reveal section.stack {
position: relative !important; position: relative !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
page-break-after: avoid !important; page-break-after: avoid !important;
height: auto !important; height: auto !important;
min-height: auto !important; } min-height: auto !important; }
html.print-pdf .reveal img {
.reveal img {
box-shadow: none; } box-shadow: none; }
html.print-pdf .reveal .roll {
.reveal .roll {
overflow: visible; overflow: visible;
line-height: 1em; } line-height: 1em; }
html.print-pdf .reveal .slide-background {
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal .slide-background {
display: block !important; display: block !important;
position: absolute; position: absolute;
top: 0; top: 0;
@ -107,13 +99,10 @@ ul, ol, div, p {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: auto !important; } z-index: auto !important; }
html.print-pdf .reveal.show-notes {
/* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none; max-width: none;
max-height: none; } max-height: none; }
html.print-pdf .reveal .speaker-notes-pdf {
.reveal .speaker-notes-pdf {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
@ -123,18 +112,16 @@ ul, ol, div, p {
bottom: auto; bottom: auto;
left: auto; left: auto;
z-index: 100; } z-index: 100; }
html.print-pdf .reveal .speaker-notes-pdf[data-layout="separate-page"] {
/* Layout option which makes notes appear on a separate page */
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative; position: relative;
color: inherit; color: inherit;
background-color: transparent; background-color: transparent;
padding: 20px; padding: 20px;
page-break-after: always; page-break-after: always;
border: 0; } border: 0; }
html.print-pdf .reveal .slide-number-pdf {
/* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf {
display: block; display: block;
position: absolute; position: absolute;
font-size: 14px; } font-size: 14px; }
html.print-pdf .aria-status {
display: none; }

2
dist/reveal.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* reveal.js 4.0.0-dev (Tue Mar 10 2020) * reveal.js 4.0.0-dev (Thu Mar 12 2020)
* https://revealjs.com * https://revealjs.com
* MIT licensed * MIT licensed
* *

4
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -10,17 +10,12 @@
<link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css"> <link rel="stylesheet" href="dist/theme/black.css">
<!-- Print on paper or PDF -->
<link rel="stylesheet" href="dist/print/paper.css">
<link rel="stylesheet" href="dist/print/pdf.css">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'dist/print/pdf.css' : 'dist/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head> </head>
<body> <body>
<div class="reveal"> <div class="reveal">

View File

@ -371,7 +371,7 @@ export default function( revealElement, options ) {
// Limit the size of certain elements to the dimensions of the slide // Limit the size of certain elements to the dimensions of the slide
createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' ); createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
document.body.classList.add( 'print-pdf' ); document.documentElement.classList.add( 'print-pdf' );
document.body.style.width = pageWidth + 'px'; document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px'; document.body.style.height = pageHeight + 'px';

View File

@ -7,7 +7,8 @@
<title>reveal.js - Test PDF exports</title> <title>reveal.js - Test PDF exports</title>
<link rel="stylesheet" href="../dist/reveal.css"> <link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../css/print/pdf.css"> <link rel="stylesheet" href="../dist/print/paper.css">
<link rel="stylesheet" href="../dist/print/pdf.css">
<link rel="stylesheet" href="qunit-2.5.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
<script src="qunit-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>
</head> </head>