xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

print styles are now built into reveal.css, revamped print styles #2633

Browse Source
This commit is contained in:
Hakim El Hattab 2020-03-13 19:53:46 +01:00
parent 8709a41979
commit d918d750e0
11 changed files with 39 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1268,20 +1268,6 @@ If you prefer printing all fragments in their visible states on the same slide y
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.
### Print stylesheet
To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD:
```html
<script>
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>
```
### Instructions
1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [revealjs.com?print-pdf](http://revealjs.com?print-pdf).

71
css/print/paper.scss
View File

@ -8,10 +8,6 @@
@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;
@ -29,8 +25,6 @@
float: none !important;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls,
.fork-reveal,
@ -42,54 +36,34 @@
display: none !important;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
body, p, td, li {
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; }
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;
@ -107,7 +81,6 @@
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal blockquote {
margin: 20px 0;
@ -123,19 +96,14 @@
margin-top: 0 !important;
padding: 0 !important;
zoom: 1 !important;
transform: none !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 {
@ -157,19 +125,8 @@
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 {
@ -182,9 +139,6 @@
opacity: 1 !important;
visibility: visible !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.reveal section img {
@ -198,5 +152,22 @@
.reveal section small {
font-size: 0.8em;
}
.reveal .hljs {
max-height: 100%;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
font-size: 15pt;
}
.reveal .hljs .hljs-ln-numbers {
white-space: nowrap;
}
.reveal .hljs td {
font-size: inherit !important;
color: inherit !important;
}
}
}

9
css/reveal.scss
View File

@ -1812,3 +1812,12 @@ $notesWidthPercent: 25%;
.zoomed .reveal .roll span:after {
visibility: hidden;
}
/*********************************************
* PRINT STYLES
*********************************************/
@import 'print/pdf.scss';
@import 'print/paper.scss';

4
demo.html
View File

@ -18,10 +18,6 @@
<link rel="stylesheet" href="dist/reveal.css">
<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 -->
<link rel="stylesheet" href="lib/css/monokai.css">
</head>

171
dist/print/paper.css vendored
View File

@ -1,171 +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 {
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;
/* 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;
font-size: 20pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
overflow: visible;
float: none !important; }
html:not(.print-pdf) .nestedarrow,
html:not(.print-pdf) .controls,
html:not(.print-pdf) .fork-reveal,
html:not(.print-pdf) .share-reveal,
html:not(.print-pdf) .state-background,
html:not(.print-pdf) .reveal .progress,
html:not(.print-pdf) .reveal .backgrounds,
html:not(.print-pdf) .reveal .slide-number {
display: none !important; }
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 {
font-size: 20pt !important;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000; }
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 {
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; }
html:not(.print-pdf) h1 {
font-size: 28pt !important; }
html:not(.print-pdf) h2 {
font-size: 24pt !important; }
html:not(.print-pdf) h3 {
font-size: 22pt !important; }
html:not(.print-pdf) h4 {
font-size: 22pt !important;
font-variant: small-caps; }
html:not(.print-pdf) h5 {
font-size: 21pt !important; }
html:not(.print-pdf) h6 {
font-size: 20pt !important;
font-style: italic; }
html:not(.print-pdf) a:link,
html:not(.print-pdf) a:visited {
color: #000 !important;
font-weight: bold;
text-decoration: underline; }
html:not(.print-pdf) ul, html:not(.print-pdf) ol, html:not(.print-pdf) div, html:not(.print-pdf) p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: 0;
text-align: left !important; }
html:not(.print-pdf) .reveal pre,
html:not(.print-pdf) .reveal table {
margin-left: 0;
margin-right: 0; }
html:not(.print-pdf) .reveal pre code {
padding: 20px;
border: 1px solid #ddd; }
html:not(.print-pdf) .reveal blockquote {
margin: 20px 0; }
html:not(.print-pdf) .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%; }
html:not(.print-pdf) .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; }
html:not(.print-pdf) .reveal .slides section.stack {
padding: 0 !important; }
html:not(.print-pdf) .reveal section:last-of-type {
page-break-after: avoid !important; }
html:not(.print-pdf) .reveal section .fragment {
opacity: 1 !important;
visibility: visible !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important; }
html:not(.print-pdf) .reveal section img {
display: block;
margin: 15px 0px;
background: white;
border: 1px solid #666;
box-shadow: none; }
html:not(.print-pdf) .reveal section small {
font-size: 0.8em; } }

127
dist/print/pdf.css vendored
View File

@ -1,127 +0,0 @@
/**
* This stylesheet is used to print reveal.js
* presentations to PDF.
*
* 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; }
html.print-pdf {
width: 100%;
height: 100%;
overflow: visible; }
html.print-pdf body {
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
overflow: visible; }
html.print-pdf .nestedarrow,
html.print-pdf .reveal .controls,
html.print-pdf .reveal .progress,
html.print-pdf .reveal .playback,
html.print-pdf .reveal.overview,
html.print-pdf .fork-reveal,
html.print-pdf .share-reveal,
html.print-pdf .state-background {
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 {
text-shadow: 0 0 0 #000 !important; }
html.print-pdf .reveal pre code {
overflow: hidden !important;
font-family: Courier, 'Courier New', monospace !important; }
html.print-pdf ul, html.print-pdf ol, html.print-pdf div, html.print-pdf p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto; }
html.print-pdf .reveal {
width: auto !important;
height: auto !important;
overflow: hidden !important; }
html.print-pdf .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%; }
html.print-pdf .reveal .slides .pdf-page {
position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always; }
html.print-pdf .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; }
html.print-pdf .reveal section.stack {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important; }
html.print-pdf .reveal img {
box-shadow: none; }
html.print-pdf .reveal .roll {
overflow: visible;
line-height: 1em; }
html.print-pdf .reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important; }
html.print-pdf .reveal.show-notes {
max-width: none;
max-height: none; }
html.print-pdf .reveal .speaker-notes-pdf {
display: block;
width: 100%;
height: auto;
max-height: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 100; }
html.print-pdf .reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative;
color: inherit;
background-color: transparent;
padding: 20px;
page-break-after: always;
border: 0; }
html.print-pdf .reveal .slide-number-pdf {
display: block;
position: absolute;
font-size: 14px; }
html.print-pdf .aria-status {
display: none; }

4
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
gulpfile.js
View File

@ -39,10 +39,6 @@ gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
.pipe(sass())
.pipe(gulp.dest('./dist/theme')))
gulp.task('css-print', () => gulp.src(['./css/print/*.{sass,scss,css}'])
.pipe(sass())
.pipe(gulp.dest('./dist/print')))
gulp.task('css-core', gulp.series(
() => gulp.src(['css/reveal.scss'])
@ -58,7 +54,7 @@ gulp.task('css-core', gulp.series(
))
gulp.task('css', gulp.parallel('css-themes', 'css-print', 'css-core'))
gulp.task('css', gulp.parallel('css-themes', 'css-core'))
gulp.task('test', gulp.series(
@ -98,8 +94,9 @@ gulp.task('serve', () => {
'css/theme/template/*.{sass,scss}',
], gulp.series('css-themes'))
gulp.watch(['css/print/*.{sass,scss,css}'], gulp.series('css-print'))
gulp.watch(['css/reveal.scss'], gulp.series('css-core'))
gulp.watch([
'css/reveal.scss',
'css/print/*.{sass,scss,css}'
], gulp.series('css-core'))
})

4
index.html
View File

@ -10,10 +10,6 @@
<link rel="stylesheet" href="dist/reveal.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 -->
<link rel="stylesheet" href="lib/css/monokai.css">
</head>

2
test/test-pdf.html
View File

@ -7,8 +7,6 @@
<title>reveal.js - Test PDF exports</title>
<link rel="stylesheet" href="../dist/reveal.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">
<script src="qunit-2.5.0.js"></script>
</head>