Reveal js presentation : title slide h2 not vertically centered

[ced75]

Hi,

I have created a reveal.js presentation with Quarto with the following global option:
slide-level: 3

Since I did that, all my level 2 slides are vertically centered automatically (like level 1 slides).
But there are few level 2 slides in my presentation I do not want to be vertically centered.
How to achieve this?

Thanks in advance for help.

[mcanouil]

Could you share a small "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[ced75]

Thanks for your answer.

Here is an example of reproducible Quarto document 👍

---
title: "Test Reveal JS title levels"
format: 
  revealjs:
    slide-level: 3
    smaller: false
    self-contained: false
    slide-number: c/t
engine: knitr
---

# LEVEL1


## Level 2

- item 2.1
- item 2.2
- item 2.3
- item 2.4

### Level 3

- item 2.1
- item 2.2
- item 2.3
- item 2.4

## Level 2 on top ?

- item 2.1
- item 2.2

What I'm expecting is the top align of text in slide "Level 2 on top", as it is displayed in slide "Level 3".
With the actual code, it is vertically centered.

For the moment, slide "Level 2 on top" inherits of class "center" automatically by Reveal JS. This is related to the fact that slide-level is set to 3.

[mcanouil]

The css code block is not valid.
Is it a try?
Please only describe the issue, don't add why you tried into it.

[ced75]

OK, I have removed the CSS code block.
It is exactly the same : the "Level 2 on top" slide remains centered vertically.

[cderv]

Since I did that, all my level 2 slides are vertically centered automatically (like level 1 slides).
But there are few level 2 slides in my presentation I do not want to be vertically centered.
How to achieve this?

I don't think you can do that easily with revealjs. The slide level will indicate to revealjs which type of slide to use.

• Section slides which are vertically centered - these slides get the class .title-slide
• Normal slides which will be top centered.

Usually you need only two level to structure the slide. Using ## in your setup will create section slide - so centered. The centering is done by revealjs computing dimension and apply a top style at element scope.

You could use a trick to override this but it does not seem like a good solution, rather something to solve another type of need. Though you can do

---
title: "Test Reveal JS title levels"
format: 
  revealjs:
    slide-level: 3
    smaller: false
    self-contained: false
    slide-number: c/t
    theme: [default, styles.scss]
engine: knitr
---

# LEVEL1


## Level 2

- item 2.1
- item 2.2
- item 2.3
- item 2.4

### Level 3

- item 2.1
- item 2.2
- item 2.3
- item 2.4

## Level 2 on top ? {.top}

- item 2.1
- item 2.2

• styles.scss

/*-- scss:defaults --*/

/*-- scss:rules --*/

.reveal section.top {
  top: 0px !important;
}

Really it is a trick but after all it is CSS.

Why do you set slide-level: 3 ? I am curious to understand has maybe there is other solutions.

Are you using h1, h2 and h3 to get different font size ?

[mcanouil]

To complete/illustrate this and highlight the fact that it's not how Reveal.js is supposed to be used (not Quarto's fault).

[ced75]

Thanks for your answer.
The reason why I set slide-level to 3 is than I want new slides for each level 3 title.
But maybe there is another solution to create a new slide between 2 slides at level 3.

[mcanouil]

Why don't use level 2?
Why do you need three "levels" of slides? What's the difference between 2 and 3 basically?

[mcanouil]

Would this do? (I find it weird because most people won't see the subtle font size change between 2 and 3 ...)

See Quarto document code.

---
title: "Test Reveal JS title levels"
format: 
  revealjs:
    smaller: false
    self-contained: false
    slide-number: c/t
engine: knitr
---

# LEVEL1


## Level 2

- item 2.1
- item 2.2
- item 2.3
- item 2.4

---

### Level 3

- item 2.1
- item 2.2
- item 2.3
- item 2.4

## Level 2 on top ?

- item 2.1
- item 2.2

Screen.Recording.2023-05-24.at.18.11.26.mov

[ced75]

The reason is one slide per level 2, one slide per level 3...
Basically, it's one slide per level 2, and many levels 3 on the same slide. Which is not what I want for this particular presentation.

[mcanouil]

Still, why not use level 2?

[mcanouil]

Anyway, see #5658 (comment).

[ced75]

OK, this can be done with --- marker before each level 3.
Correct ?

[mcanouil]

Yes, this is how to tell Reveal.js "make a new slide with what follows".

[ced75]

Thanks a lot, that will do the trick.

[ced75]

With that solution, I have a new problem.
At each level 3 slide, I lose the following features:

• pause with . . . marker
• .smaller class
• background-image property

These worked with slide-level: 3

[cderv]

Yes you will encounter a few issues with revealjs feature as you are trying to tweak how it is designed to be used.

slide-level controls automatic slide creation based on header and there level. this means you can't have ## be the same as ### which this behavior. Unless you "cheat" and use CSS to make it look the same as shown in #5658 (comment)

Otherwise you can use slide-level: 0 and controls slide creation using --- only, but I think you will look header attributes feature. If you don't need them, that is ok. But as you have seen, background-image won't work so --- won't be useful.

So in summary, this is how revealjs works with Quarto (and Pandoc).

• slide-level is the level that creates slides
• Anything header above that level will create section slide with class title-slide and then get a special layout different than usual slide.
• Those section slide have also meaning if you use a vertical navigation.

So overall you need to decide what you need. If at the hand, you want to tweak the styling: Make some of you h3 header with a specific class looks like h2, then you can use CSS.

Unfortunately, Quarto leverages Pandoc for the slides, and the markdown syntax to translate to html will offer less flexibility that if you were doing your revealjs slide using HTML directly.

Hope it helps understand

[ced75]

Thanks for the very clear explanation.