support for PDF export in chrome (closes #92)
This commit is contained in:
Hakim El Hattab
parent
7101c2408d
commit
f350c6a5cd
@ -206,6 +206,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi
|
||||
- Fixed bug where hovering 3D links in Chrome caused them to disappear
|
||||
- Disable 3D links in IE and more accurate CSS feature detection
|
||||
- CSS is more relative in sizing to allow for low resolutions. Thanks [StereotypicalApps](https://github.com/StereotypicalApps)
|
||||
- PDF export
|
||||
|
||||
#### 1.4
|
||||
- Main ```#reveal container``` is now selected via a class instead of ID
|
||||
|
||||
@ -216,6 +216,7 @@ body {
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
@ -474,6 +475,7 @@ body {
|
||||
top: 50%;
|
||||
margin-top: -320px;
|
||||
padding: 20px 0px;
|
||||
overflow: visible;
|
||||
|
||||
text-align: center;
|
||||
|
||||
|
||||
147
css/print-pdf.css
Normal file
147
css/print-pdf.css
Normal file
@ -0,0 +1,147 @@
|
||||
/* 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. */
|
||||
|
||||
|
||||
/* 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 */
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 20pt;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 0;
|
||||
margin: 0 5%;
|
||||
padding: 0;
|
||||
float: none !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
html {
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* SECTION 2: Remove any elements not needed in print.
|
||||
This would include navigation, ads, sidebars, etc. */
|
||||
.nestedarrow,
|
||||
.controls a,
|
||||
.reveal .progress,
|
||||
.reveal.overview,
|
||||
.fork-reveal,
|
||||
.share-reveal,
|
||||
.state-background {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* SECTION 3: Set body font face, size, and color.
|
||||
Consider using a serif font for readability. */
|
||||
body, p, td, li, div, a {
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
/* SECTION 4: Set heading font face, sizes, and color.
|
||||
Diffrentiate your headings from your body text.
|
||||
Perhaps use a large sans-serif for distinction. */
|
||||
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: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.reveal .slides {
|
||||
position: static;
|
||||
width: 100%;
|
||||
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,
|
||||
.reveal .slides>section.past, .reveal .slides>section.future,
|
||||
.reveal.linear .slides>section, .reveal.linear .slides>section>section,
|
||||
.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
|
||||
|
||||
visibility: visible;
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: 0px;
|
||||
margin-top: 15%;
|
||||
padding: 20px 0px;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform-style: flat;
|
||||
-moz-transform-style: flat;
|
||||
-ms-transform-style: flat;
|
||||
transform-style: flat;
|
||||
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.reveal section {
|
||||
page-break-after: always !important;
|
||||
display: block !important;
|
||||
}
|
||||
.reveal section.stack {
|
||||
margin-top: 0% !important;
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
.reveal section .fragment {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.reveal img {
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -11,7 +11,7 @@
|
||||
beyond the edge of the printed page, and prevents
|
||||
unnecessary background images from printing */
|
||||
body {
|
||||
background: #fff url(none);
|
||||
background: #fff;
|
||||
font-size: 13pt;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -32,8 +32,11 @@ html {
|
||||
This would include navigation, ads, sidebars, etc. */
|
||||
.nestedarrow,
|
||||
.controls a,
|
||||
.reveal .progress span,
|
||||
.reveal.overview {
|
||||
.reveal .progress,
|
||||
.reveal.overview,
|
||||
.fork-reveal,
|
||||
.share-reveal,
|
||||
.state-background {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
17
index.html
17
index.html
@ -16,10 +16,13 @@
|
||||
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
|
||||
|
||||
<link rel="stylesheet" href="lib/css/zenburn.css">
|
||||
|
||||
<script>
|
||||
// If the query includes print-pdf we'll use the fancy print CSS
|
||||
document.write( '<link rel="stylesheet" href="css/' + (window.location.search.match( /print-pdf/gi ) ? 'print-pdf.css' : 'print.css') + '" type="text/css" media="print">' );
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
@ -36,11 +39,7 @@
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h1>Reveal.js</h1>
|
||||
<h3 class="inverted">CSS 3D Presentations</h3>
|
||||
<script>
|
||||
// Delicously hacky. Look away.
|
||||
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
|
||||
</script>
|
||||
<h3 class="inverted">HTML Presentations Made Easy</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@ -223,7 +222,7 @@ function linkify( selector ) {
|
||||
<section>
|
||||
<h2>Intergalactic Interconnections</h2>
|
||||
<p>
|
||||
You can link between slides internally,<br/>
|
||||
You can link between slides internally,
|
||||
<a href="#/2/3">like this</a>.
|
||||
</p>
|
||||
</section>
|
||||
@ -333,7 +332,7 @@ function linkify( selector ) {
|
||||
// Load the scripts and, when completed, initialize reveal.js
|
||||
head.js.apply( null, scripts );
|
||||
|
||||
</script>
|
||||
</script>x
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* reveal.js 1.5 r13
|
||||
* reveal.js 1.5 r14
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* MIT licensed
|
||||
*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user