RevealJS How to add format option for slides delineated with a horizontal rule

[harrylojames]

Hi,

I am trying to make the second slide and not the first scrollable. I'm not sure where to add {.scrollable}. I have tried the following with no success.

## Slide 1 

abcd

---- {.scrollable}

abcd

https://quarto.org/docs/presentations/revealjs/#content-overflow

Let me know if you know how to do this :)

[fuhrmanator]

I noticed you used the ---- separator, but I don't think it's necessary. I can do:

# {.scrollable}

blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 
blah blah

blah blah 

However, on the latest Chrome and with Quarto 1.3.x (prerelease), this isn't giving me the result from the documentation. It is maybe a bug. Using Inspect in Chrome, I see a css definition of:

.reveal .slide.scrollable {
    overflow-y: auto;
}

If I change it in Chrome to add (according to https://stackoverflow.com/a/30530246/1168342) a max-height:

.reveal .slide.scrollable {
    overflow-y: auto;
    max-height: 100vh;
}

I get a good result.

A workaround (in my case) was to add the above CSS to a custom .css I specified in the format: reveal: css: metadata for the presentation.

[cderv]

Yes using an empty header is the way to go. You can't add classes or attributes to --- delimiters. We have an example of that in the doc with background color https://quarto.org/docs/presentations/revealjs/#slide-backgrounds-without-a-title

Regarding the observed behavior, this is because you are using # used for section slide (internal title slide) and not ## which is the way to split slides and on which .scrollable is working. In short, scrollable works on normal slide not section slide (so by default when using ##)

We could make it work on section slide also maybe, but usually there are not much text on those slides - only titles for section.
https://quarto.org/docs/presentations/revealjs/#creating-slides

To be more precise, the CSS is different for section slides (with #) because center is applied to it, and in that case height is not 100%

quarto-cli/src/resources/formats/revealjs/styles.html

Lines 13 to 16 in 8222a01

	.reveal .slide:not(.center) {
	height: 100%;
	<% if (scrollable) { %>overflow-y: auto;<% } %>
	}

That is why setting the max-height individually works, but it could mess up the other title slide maybe. Some checks would be needed to make this a default.

[fuhrmanator]

Thanks for all the info - it's super helpful, as usual!

We could make it work on section slide also maybe, but usually there are not much text on those [section] slides - only titles for section.

As someone who's made hundreds of slides with Reveal before Quarto support, I will state that this assumption doesn't always hold true to my case (but I'll also say that I'm guilty of putting too much on my slides!). Scrollable as a concept already seems to violate the principle of low-content slides, so I'm not sure why it shouldn't work everywhere (just like {.smaller}). In any case, the documentation should state the limitation (if it applies) to avoid confusion.

[cderv]

Scrollable as a concept already seems to violate the principle of low-content slides, so I'm not sure why it shouldn't work everywhere (just like {.smaller}).

So you would expect to have some scrollable content on slides that are used for section delimiter ?

# This is a section title

## This is a slide 1

Some content

## This is slide 2 

Some content 

# This another section to regroup slides 

## This is slide 1 for this section

Some content 

## This is slide 2 for this section

Some content 

If you don't need specifically section slides as you need more content per slide, I would expect to use only one type of slide

## This is a slide 1

Some content

## This is slide 2 

Some content 

## This is slide 3

Some content 

## This is slide 4

Some content

Are you specifically using # and ## ?

In any case, the documentation should state the limitation (if it applies) to avoid confusion.

Our doc currently says

In markdown, slides are delineated using headings. For example, here is a simple slide show with two slides (each defined with a level 2 heading (##)

You can also divide slide shows into sections with title slides using a level 1 header (#).

As we explain that level 1 header are for slides with Titles for section delimitation, we assume ine scrollable part doc, that it applies with content slide.

But you mean that all this was not clear enough ?

Any suggestion in PR appreciated if you have some ideas in mind to be more clear.

I'll think about a CSS rule though that would target only this specific case - Content overflow on slide is though not advised. Printing to PDF will be hard for example !