Superb Tables
+| Item | +Value | +Quantity | +
|---|---|---|
| Apples | +$1 | +7 | +
| Lemonade | +$2 | +18 | +
| Bread | +$3 | +2 | +
Transition Styles
You can select from different transitions, like:
- Cube -
- Page -
- Concave -
- Zoom -
- Linear -
- Fade -
+ Default -
None -
- Default
+ Fade -
+ Slide -
+ Concave -
+ Zoom
Background Transitions
Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.
Background Transition Override
You can override background transitions per slide by using data-background-transition="slide".
@@ -401,7 +399,7 @@ function linkify( selector ) {
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
- transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
+ transition: Reveal.getQueryHash().transition || 'default', // none/fade/slide/convex/concave/zoom
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
diff --git a/js/reveal.js b/js/reveal.js
index 06b217b..6daa9f8 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -93,13 +93,13 @@ var Reveal = (function(){
theme: null,
// Transition style
- transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
+ transition: 'default', // none/fade/slide/convex/concave/zoom
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
- backgroundTransition: 'default', // default/linear/none
+ backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
// Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
@@ -2000,7 +2000,7 @@ var Reveal = (function(){
}
if( includeAll || h === indexh ) {
- toArray( backgroundh.querySelectorAll( 'section' ) ).forEach( function( backgroundv, v ) {
+ toArray( backgroundh.querySelectorAll( '.slide-background' ) ).forEach( function( backgroundv, v ) {
if( v < indexv ) {
backgroundv.className = 'slide-background past';
--
cgit v1.2.3
From 38af788a65bcb18e644ae63f83410710c80ae97b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 13 Apr 2014 12:00:06 +0200
Subject: fix css syntax error
---
css/reveal.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'css')
diff --git a/css/reveal.css b/css/reveal.css
index 8022b1e..806d064 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -687,7 +687,7 @@ body {
* Aliased 'linear' for backwards compatibility
*********************************************/
-.reveal.slide section.
+.reveal.slide section,
.reveal.linear section {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
--
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')
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')
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 @@
-
+
@@ -131,11 +131,7 @@
Fragments
Hit the next arrow...
... to step through ...
--
-
any type
- - of view -
- fragments -
... a fragmented slide.
Fragment Styles
-There's a few styles of fragments, like:
+There's different types of fragments, like:
grow
shrink
roll-in
fade-out
-highlight-red
current-visible
-highlight-current-blue
+highlight-red
+highlight-blue
Themes
- Reveal.js comes with a few themes built in:
+ reveal.js comes with a few themes built in:
Default -
Sky -
Beige -
@@ -209,10 +205,10 @@ Reveal.addEventListener( 'customevent', function() {
Slide Backgrounds
- Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.
+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.
@@ -223,7 +219,7 @@ Reveal.addEventListener( 'customevent', function() {
<section data-background="image.png">Tile Backgrounds
+Tiled Backgrounds
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">Background Transitions
- Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+ Different background transitions are available via the backgroundTransition option. This one's called "zoom".
Reveal.configure({ backgroundTransition: 'zoom' })Background Transitions
- You can override background transitions per slide by using data-background-transition="zoom".
+ You can override background transitions per-slide.
<section data-background-transition="zoom">