fix non-pdf printing (closes #881)

This commit is contained in:
Hakim El Hattab 2014-04-26 19:16:10 +02:00
parent b019604531
commit ae962d729b
3 changed files with 174 additions and 161 deletions

View file

@ -6,171 +6,186 @@
manipulate this file as you see fit. */ manipulate this file as you see fit. */
/* SECTION 1: Set default width, margin, float, and @media print {
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. /* SECTION 1: Set default width, margin, float, and
This would include navigation, ads, sidebars, etc. */ background. This prevents elements from extending
.nestedarrow, beyond the edge of the printed page, and prevents
.controls, unnecessary background images from printing */
.reveal .progress, html {
.reveal.overview, background: #fff;
.fork-reveal, width: auto;
.share-reveal, height: auto;
.state-background { overflow: visible;
display: none !important; }
} body {
background: #fff;
font-size: 28pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
overflow: visible;
float: none !important;
}
/* SECTION 3: Set body font face, size, and color. /* SECTION 2: Remove any elements not needed in print.
Consider using a serif font for readability. */ This would include navigation, ads, sidebars, etc. */
body, p, td, li, div, a { .nestedarrow,
font-size: 16pt!important; .controls,
font-family: Georgia, "Times New Roman", Times, serif !important; .reveal .progress,
color: #000; .reveal.overview,
} .fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}
/* SECTION 4: Set heading font face, sizes, and color. /* SECTION 3: Set body font face, size, and color.
Differentiate your headings from your body text. Consider using a serif font for readability. */
Perhaps use a large sans-serif for distinction. */ body, p, td, li, div {
h1,h2,h3,h4,h5,h6 { font-size: 28pt!important;
color: #000!important; font-family: Georgia, "Times New Roman", Times, serif !important;
height: auto; color: #000;
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. /* SECTION 4: Set heading font face, sizes, and color.
Ensure links are underlined, and consider appending Differentiate your headings from your body text.
the URL to the end of the link for usability. */ Perhaps use a large sans-serif for distinction. */
a:link, h1,h2,h3,h4,h5,h6 {
a:visited { color: #000!important;
color: #000 !important; height: auto;
font-weight: bold; line-height: normal;
text-decoration: underline; font-family: Georgia, "Times New Roman", Times, serif !important;
} text-shadow: 0 0 0 #000 !important;
/* text-align: left;
.reveal a:link:after, letter-spacing: normal;
.reveal a:visited:after { }
content: " (" attr(href) ") "; /* Need to reduce the size of the fonts for printing */
color: #222 !important; h1 { font-size: 36pt !important; }
font-size: 90%; 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 */ /* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p { ul, ol, div, p {
visibility: visible; visibility: visible;
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
display: block; display: block;
overflow: visible; overflow: visible;
margin: auto; margin: auto;
text-align: left !important; text-align: left !important;
} }
.reveal .slides { .reveal pre,
position: static; .reveal table {
width: auto; margin-left: 0;
height: auto; margin-right: 0;
}
.reveal pre code {
padding: 20px;
border: 1px solid #ddd;
}
.reveal .slides {
position: static;
width: auto;
height: auto;
left: auto; left: 0;
top: auto; top: 0;
margin-left: auto; margin-left: 0;
margin-top: auto; margin-top: 0;
padding: auto; padding: 0;
overflow: visible; overflow: visible;
display: block; display: block;
text-align: center; text-align: center;
-webkit-perspective: none; -webkit-perspective: none;
-moz-perspective: none; -moz-perspective: none;
-ms-perspective: none; -ms-perspective: none;
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%; /* there isn't a none/auto value but 50-50 is the default */
-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, .reveal .slides>section,
.reveal .slides>section>section { .reveal .slides>section>section {
visibility: visible !important;
position: static !important;
width: 90% !important;
height: auto !important;
display: block !important;
overflow: visible !important;
visibility: visible !important; left: 0 !important;
position: static !important; top: 0 !important;
width: 90% !important; margin-left: 0 !important;
height: auto !important; margin-top: 0 !important;
display: block !important; padding: 20px 0px !important;
overflow: visible !important;
left: 0% !important; opacity: 1 !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-style: flat !important; -webkit-transform: none !important;
-moz-transform-style: flat !important; -moz-transform: none !important;
-ms-transform-style: flat !important; -ms-transform: none !important;
transform-style: flat !important; transform: none !important;
}
.reveal section {
page-break-after: always !important;
}
.reveal section .fragment {
opacity: 1 !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 { .reveal section:last-of-type {
page-break-after: always !important; page-break-after: avoid !important;
display: block !important; }
} .reveal section img {
.reveal section .fragment { display: block;
opacity: 1 !important; margin: 15px 0px;
visibility: visible !important; background: rgba(255,255,255,1);
border: 1px solid #666;
box-shadow: none;
}
.reveal section small {
font-size: 0.8em;
}
-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;
} }

View file

@ -20,15 +20,13 @@
<!-- For syntax highlighting --> <!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css"> <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> <script>
if( window.location.search.match( /print-pdf/gi ) ) { var link = document.createElement( 'link' );
var link = document.createElement( 'link' ); link.rel = 'stylesheet';
link.rel = 'stylesheet'; link.type = 'text/css';
link.type = 'text/css'; link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
link.href = 'css/print/pdf.css'; document.getElementsByTagName( 'head' )[0].appendChild( link );
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script> </script>
<!--[if lt IE 9]> <!--[if lt IE 9]>

View file

@ -2014,7 +2014,7 @@ var Reveal = (function(){
// Show the horizontal slide if it's within the view distance // Show the horizontal slide if it's within the view distance
if( distanceX < viewDistance ) { if( distanceX < viewDistance ) {
horizontalSlide.style.display = 'block'; horizontalSlide.style.display = '';
loadSlide( horizontalSlide ); loadSlide( horizontalSlide );
} }
else { else {
@ -2031,7 +2031,7 @@ var Reveal = (function(){
distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy ); distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy );
if( distanceX + distanceY < viewDistance ) { if( distanceX + distanceY < viewDistance ) {
verticalSlide.style.display = 'block'; verticalSlide.style.display = '';
loadSlide( verticalSlide ); loadSlide( verticalSlide );
} }
else { else {