Display slide number in reveal.js printout

Question

I have activated slideNumber for my reveal.js based slides and they show up nicely on the HTML view.

Now I would like to also show them on the PDF printout that I generate with Chrome as suggested on the documentation.

It seems that its all one large page so even header and footer display only once for all slides rather than on each slide. Is there a way to print reveal.js slides that works nicely for these sort of things?

Answer 1

well, one ugly hack will be to:
1. take sequential screenshots.
2. embed each shot in a pdf file.
(or 3. embed it in a ppt and convert ppt into pdf)

Other than that, I couldn't find anything that'd convert it to a good-looking pdf with ease.

---

An Elegent Hack

Although I still couldn't find a precise solution, I do have, as the title suggests, an elegent hack.

A firefox plugin named Grab Them All.

It's basically a script that accesses links in a predefined list and takes screenshots and saves them. But as it's a only a hack, there's some (a lot) of manual work to do.

Firstly, you need to provide hard links to all the webpages, ie, slides in presentation, in a .txt file. I did so in a file called paths.txt and these were the contents in my case:

file:///C:/absolute_path_to_presentation_folder/presentation.html#/
file:///C:/absolute_path_to_presentation_folder/presentation.html#/1
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2/1
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2/2

Second and final step: after iNstalling the addon and restarting firefox, just start the addon. It opens a popup like this:

Now, it's as simple as 1,2,3. Select the file with URLs, select the destination directory and reduce the Max page processing time.

And Voila! Let's go

---

All the slides will be downloaded as png format in sequential order. What's left to do is put them in a ppt or pdf format.

Answer 2

If you are printing HTML files which are heavily relying on CSS, the general guideline to create an 'elegant' print representation of the same HTML, is to create an appropriate CSS for print.

In RevealJS the PDF generation is controlled by the css/print/pdf.css file. So my advice is this:

1. Go and locate the file pdf.css on your system.
2. Open it in a text editor of your choice.
3. Locate the string "slide-number" inside the file.
4. Determine the context this string appears in: Is it commented out? Is it set to use display: none or similar?
5. Change the setting for slide-number accordingly.

---

Update

Inside the pdf.css, there is the following section right after line 32:

/* SECTION 2: Remove any elements not needed in print.
   This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .slide-number,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
        display: none !important;
}

Change this to:

/* SECTION 2: Remove any elements not needed in print.
   This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
        display: none !important;
}

Voila!

---

Update 2

Meanwhile I cloned the latest sources from GitHub and tested myself...

It seems to me that there is a bug with Reveal.js' PDF generation involved. I've filed a bug report about it on GitHub.

My 'js/reveal.js' currently has the following setting:

// Display the page number of the current slide //slideNumber: false, slideNumber: true,

So slide numbers DO appear in the slide deck. Here is a screenshot montage showing this (skipping the title slide). The slide numbers are rather small, but they do show up:

My 'css/print/pdf.css' file has the following setting:

/* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, .reveal .controls, .reveal .progress, //.reveal .slide-number, .reveal .playback, .reveal .overview, .fork-reveal, .share-reveal, .state-background { display: none !important; }

I commented out the line which marks the .slide-number as an element that shouldn't be printed.

However, when creating a PDF (using Chrome 39.0.2171.71 (64-bit) on Mac OSX Mavericks 10.9.5), a slide number does only appear for the first slide, not for the following slides. Here is a screenshot montage of the PDF pages (skipping the second slide):

The title slide shows navigation controls as well as slide number '0' (very small though, but it is there...). The other slides do show neither navigation controls, nor slide numbers.

---

My reveal.js is pulled directly from the current GitHub sources (AFAICS it is the very current one); my remote branch when pulling seems to be origin/dev.

Answer 3

I was facing same problem and I have solved it simply by little bit of dom manipulation:

Basicly my prezentation contains of vertical sections which contains slides. So I can rely on that structure and do it by simple added element

<script>
      $(document).ready(function () {
            $('.slides')
                .children().each(
                function (sectionNumber, section) {

                  $(this).children().each(
                      function (slideNumber) {

                        var elem = $("<span></span>", {
                          class: "angular-cz-slide-number",
                          text: sectionNumber + "-" + (slideNumber)
                        });
                       $(this).append(elem);
                      })
                });
          }
      )

</script>

In css It can be done like :

.reveal .angular-slide-number {
  z-index: 100;
  font-size: 20pt;
  color: white;
  position: absolute;
  right: 0;
  top: 0; }

In pdf it looks like it is too close to edge, but when you print it (i print 4x4 layout) it looks just fine.

That is basically all.

I like the solution because you can provide also some advanced logic here. For example in our prezentation we have some slides marked as "not printable" because they are extended by next slide, so they shouldn't increase number.