Slide Number Issues with RevealJS's print-pdf and h1 sections

[jmgirard]

Bug description

The slide numbering gets messed up by h1 (i.e., #) sections when using print-pdf with RevealJS. If you create a MWE presentation using the code below, it will correctly number the slides 1 to 4 in the IDE and web browser. But when you go to http://localhost:6600/?print-pdf (or whatever your port is) or open the presentation in Chrome and hit e on the keyboard, each h1 section will increment the slide number by 2 instead of 1. It will also change back to the c format, even if you change it in YAML, and it will add an empty page at the end.

---
format: 
  revealjs:
    slide-number: c/t
    show-slide-number: all
---

# Section 1

## Slide

# Section 2

## Slide

Correct display in RStudio IDE: (i.e., 1 / 4, 2 / 4, 3 / 4, 4 / 4)

Incorrect numbering and format in PDF Output: (i.e., 2, 3, 5, 6, Blank)

See the PDF here generated by Chrome
mwe.pdf

---

Versions

RStudio 2022.12.0+353 "Elsbeth Geranium" Release (7d165dcfc1b6d300eb247738db2c7076234f6ef0, 2022-12-03) for Windows
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2022.12.0+353 Chrome/102.0.5005.167 Electron/19.1.3 Safari/537.36

Microsoft Windows version 22H2 (OS Build 22623.1095) (64-bit)

Google Chrome version 109.0.5414.75 (Official Build) (64-bit)

Quarto CLI 1.2.269

---

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[cscheid]

We generally reserve h1 headers for the document title. Can you shift your headers down one level, and operate with h2 and h3 headers?

[jmgirard]

We generally reserve h1 headers for the document title. Can you shift your headers down one level, and operate with h2 and h3 headers?

This seems contradicted by https://quarto.org/docs/presentations/revealjs/#creating-slides.

If I try to shift down, the h3 headers do not create new slides but just subheadings on the h2 slides.

---
format: 
  revealjs:
    slide-number: c/t
    show-slide-number: all
---

# Title Slide

## Section 1

### Slide

## Section 2

### Slide

[cderv]

@cscheid We are using slide-level: 2 as the default value for revealJS format (which is different than Pandoc), this means "The examples above all use level 2 headings for slides and level 1 headings for sections/title slides.", which we document in https://quarto.org/docs/presentations/revealjs/index.html#creating-slides

It seems there is indeed an issue with numbering in print pdf mode. From some quick tests with pandoc only and revealJS format, it seems that latest Revealjs version may solve the issue.

We don't use latest version yet, and updating seems to solve the issue

# inside the qmd file directory
curl -OL https://github.com/hakimel/reveal.js/archive/master.zip
unzip .\master.zip
rm .\master.zip

Using latest reveal-js with Quarto.

---
format: 
  revealjs:
    slide-number: c/t
    show-slide-number: all
    revealjs-url: reveal.js-master
---

# Section 1

## Slide

# Section 2

## Slide

It solves the issue for me. So I guess we need to update - @cscheid I did it once, I can do it again if you want

[cscheid]

@jmgirard You're right, and I'm wrong, thank you for setting me straight!

@cderv Yeah, that'd be great. But I also wonder if we need to do something more general. It is the case that we generally discourage h1 in non-slide formats. I think this inconsistency is leading users to (understandably) learn non-generalizable patterns, which is a bummer.

[cderv]

It is the case that we generally discourage h1 in non-slide formats. I think this inconsistency is leading users to (understandably) learn non-generalizable patterns, which is a bummer.

Oh ok. 🤔 I did not know or just misunderstood.

Our doc definitely do not show that (as our examples in Gallery I think), unless we are just mixing things up. What we currently say is:

• Use h2 (##) to create slides
• ...but optionally you can add sections slides with title using h1 #, to separate slides - we don't expect content really on this one, and default style is centered unless other slides.

I remember we tweaked Pandoc's default for to do this exactly in our revealjs format.

If we move to no h1 at all, then I think it would lead to using h3 for delimiting slides, and h2 for separating slides with title.

So current h2 and h1 usage feels correct to me feel and expected, it just seems to be an issue with the pdf mode.

Anyway, let's discuss this further!

[jmgirard]

I can confirm that this does fix the slide numbering issue. However, the display format is still wrong and an empty slide is still added at the end in print-pdf mode.

Expected: 1 / 4, 2 / 4, 3 / 4, 4 / 4

Observed: 1, 2, 3, 4, Blank

---
format: 
  revealjs:
    slide-number: c/t
    show-slide-number: all
    revealjs-url: reveal.js-master
---

# Section 1

## Slide

# Section 2

## Slide

mwe.pdf

[jmgirard]

It also looks like footer text is suppressed from print-pdf mode (not sure if that is intentional or not).

[cderv]

However, the display format is still wrong and an empty slide is still added at the end in print-pdf mode.

I believe this is an issue with RevealJS itself (or with Pandoc integration of revealJS). I can reproduce this by only using Pandoc

• test.md

---
title: Test
---

# Section 1

## Slide

# Section 2

## Slide

pandoc -t revealjs -f markdown -s -o test.html test.md

Then opening in browser in print pdf mode and printing in chrome show the addition empty slide.

It also looks like footer text is suppressed from print-pdf mode (not sure if that is intentional or not).

I can see the footer when printing. Can't reproduce

Qmd content

---
format:
  revealjs:
    footer: "Footer text"
---

# Section 1

## Slide

Content

# Section 2

## Slide

Content

[jmgirard]

The footer seems to work when applied via YAML but not via div:

---
format: 
  revealjs:
    slide-number: c/t
    show-slide-number: all
    revealjs-url: reveal.js-master
---

# Section 1

## Slide

Content

::: {.footer}
Footer 1
:::

# Section 2

## Slide

Content

::: {.footer}
Footer 2
:::

[cderv]

The footer seems to work when applied via YAML but not via div:

Thanks for the additional information I can reproduce

[fuhrmanator]

If we move to no h1 at all, then I think it would lead to using h3 for delimiting slides, and h2 for separating slides with title.

So current h2 and h1 usage feels correct to me feel and expected, it just seems to be an issue with the pdf mode.

Having used markdown with revealjs for several years with another tool in VS Code called vscode-reveal, I would suggest not breaking from the standard of "horizontal slide" and "vertical slide". The trouble is that in many themes, H1 appears very big, and so forcing one to use a # will fill up the slide, not leaving much space for the rest.

In the vscode-reveal tool, it's a configurable option (one can use a regex), e.g., a single line with --- means a new horizontal slide is created, and a single line with -- means a vertical slide is created. Again, this is nice because I can put a smaller title ## at a horizontal (title) slide, or even use a huge title # in a vertical slide if I want to.

I teach 3-hour lectures and so having sub-lectures separated into vertical parts is great for me. Even a one-hour lecture can have three 20-minute vertical parts. It's a good use-case.

On the other hand, I love the toc feature that Quarto adds (I was doing it an overview slide by hand before, which is always tricky when you make last-minute changes). So for that to work, it's important to have titles on every horizontal slide. Fair enough, but the logic for toc as far as I understand it is to use only # titles. I've been living with this, but I must say it seems tricky when I want to do a single slide to address 3-4 "Administrivia" bullet points, or a summary slide at the end of the class, but the information won't fit on the # slide because the text is so huge. I have to do a second (##) slide, which seems like a waste. I addressed this point in another question about reducing the text size of a #.

Maybe the team can find some existing markdown/reveal presentations and see what's most common? My opinion is only one user, but looking quickly at GitHub, lots of people designed revealjs slides using the --- and -- convention to designate horizontal/vertical slides, rather than # and ##. I think it will be a surprise for them (like it is for me) to transition. Here's a search I used: https://github.com/search?l=&q=filename%3Aslides.md+language%3AMarkdown+size%3A%3E2000&type=code

ETA: I realize now that pandoc has a convention ("title slides", etc.) documented here: https://pandoc.org/MANUAL.html#structuring-the-slide-show
Given that quarto uses pandoc, it makes sense to follow this. It's an abstraction to support PowerPoint/Beamer as well. It makes sense, but to people transitioning from revealjs to Quarto (with no familiarity of pandoc), it might be a surprise.

[cderv]

@fuhrmanator regarding your comments, some additional context

In the vscode-reveal tool, it's a configurable option (one can use a regex), e.g., a single line with --- means a new horizontal slide is created

You can still do that with Quarto by using --- to create slide, and set slide-level: 0 if you only want --- to create slides. Documented in https://quarto.org/docs/presentations/revealjs/#creating-slides

and a single line with -- means a vertical slide is created

I don't think Pandoc supports this. Only --- can be used to separate slide, and Quarto format builds on Pandoc's one.

I teach 3-hour lectures and so having sub-lectures separated into vertical parts is great for me. Even a one-hour lecture can have three 20-minute vertical parts. It's a good use-case.

If you want vertical slide layout with Quarto you need to change navigation-mode to vertical or grid, and by default the config slide-level: 2 so # will be main slide, and ## will be vertical sub section slides. Documented here: https://quarto.org/docs/presentations/revealjs/advanced.html#vertical-slides

Quarto presentation default is just using linear navigation mode by design.

On the other hand, I love the toc feature that Quarto adds

Are you talking about the Navigation Menu ?
It should have both levels.

I believe toc: true should also have all titles on the main slide.

If that is not the case, please do open an issue with a reproducible example.

Hope it helps understand the current state. Thanks for your feedback !

[fuhrmanator]

Are you talking about the Navigation Menu ? It should have both levels.

I believe toc: true should also have all titles on the main slide.

I was talking about Table of contents, but now I realize it's not documented for Presentations (RevealJS) as far as I can find it.

Anyway, it works to my liking:

---
format: 
  revealjs:
    toc: true
    toc-depth: 1
    toc-title: Overview
    theme: beige
---

# First topic that is a really long title


## Subtopic 1


# Second topic

Here's a screen shot of the slide overview (after pressing o key):

[cderv]

Fair enough, but the logic for toc as far as I understand it is to use only # titles.

In the example above you shared, you set toc-depth: 1 so you have only # that is in the overview slide, as asked. You need 2 or more to get h2 level in addition to 1.

If you do only ## and use toc-depth: 2 you'll get all.

But anyway, it seems it is working for you as you like with it, and I may have misunderstood the issue.

[fuhrmanator]

Fair enough, but the logic for toc as far as I understand it is to use only # titles.

In the example above you shared, you set toc-depth: 1 so you have only # that is in the overview slide, as asked. You need 2 or more to get h2 level in addition to 1.

If you do only ## and use toc-depth: 2 you'll get all.

My comment wasn't clear enough. Here's some more info from what I gather:

There's a fundamental difference between vanilla RevealJS markdown and Pandoc's support, namely that Reveal has always allowed new slides to be defined with a --- (akin to level 1 headings) or -- (level 2) to make a grid (Horizontal vs Vertical new slide). https://revealjs.com/vertical-slides/ -- they're numbered h.v (h is column, v is row). Pandoc's support eschews that (which is a design decision, I think to accommodate PowerPoint and Beamer).

The Table of Contents (which is not documented on Quarto, but probably comes from Pandoc) builds its info from the headings (#, ##, ###), etc. and not from the slide level per revealjs's markdown. That is to say, if I created in markdown a new horizontal slide in reveal-style markdown with --- and put a ## title to have the title be smaller, the TOC won't pick it up properly (because Pandoc is doing the processing).

I guess it would be useful in the Quarto documentation, for people who might be coming from the pure RevealJS ecosystem with markdown (like me), to understand that the markdown is processed via Pandoc and there are some important differences (not all bad - I love the TOC feature!).

[timbrock]

and it will add an empty page at the end

I think this is because the pdf-page class includes "break-after: page", forcing a break after every such container, including the one wrapping the final slide. Adding this CSS seems to have fixed it for me:

@media print {
  html.print-pdf .reveal .slides .pdf-page:last-child {
    break-after: avoid;
  }
}

[cderv]

Thanks @timbrock !

I believe the initial rule is from Revealjs itself
https://github.com/hakimel/reveal.js/blob/db2523db277bea632c218a7d836f27079a1be7f9/css/print/pdf.scss#L65-L71

So probably your CSS tweak is worth suggesting upstream too !

We will add this in our CSS tweak in Quarto though. thanks.

[cderv]

• Check that this is fixed by an update to revealjs:

• Update Revealjs to latest version 5 #4795

[cscheid]

(we use verify-fixed for bugs that we believe have already been fixed, and we're waiting for the issue reporter to confirm, and not for bugs that need verification once they're fixed.)

[cderv]

Update to Revealjs 5.1.0 has been done in Quarto 1.6.9. It solves the slide numbering offset problem.

For the formatting it is Revealjs issue directly I think. Should be reported upstream probably.
Let's deal with that on its own.

For the footnote, we'll handle in #5998