Revealjs: slide header with section and subsection

[fbob]

Hello,
I would like to reproduce a layout from latex beamer using quarto and revealjs which puts the current section and subsection of a presentation a the top of the slide, the slide title being just underneath. Before each new subsection a new slide is displayed showing the section and subsections titles.

See screenshots below:

I'm very new to quarto and revealjs and need some help.
Any revaljs guru here that can help ?

Thanks !
Have a nice day.

[mcanouil]

This requires "some" CSS, possibly a modification of https://github.com/andrie/reveal-auto-agenda, but most likely this would be a format extension https://quarto.org/docs/extensions/formats.html.

[mcanouil]

Not perfect, but here is an example only with css:

.reveal h2 {
  text-align: left;
  vertical-align: top;
}

.reveal h3 {
  text-align: right;
  position: inherit;
  top: 0;
  right: 0;
}

---
title: "Untitled"
format:
  revealjs:
    css: theme.css
---

## Section

### Sub section

content

[mcanouil]

For more, checkout https://revealjs.com/.

[fbob]

Many thanks @mcanouil, it's very nice from you 👍
I've played with it a lite bit and I came across a strange behavior. I think it's me who doesn't know how to use reveal well but it's also possible that it's just not feasible to do that.

I saw that you used levels h2 for the sections, h3 for the sub-sections and h4 for the slide's title.

I've changed the theme.css to try to have the sections and sub-sections in h1 and h2 but it doesn't work

Another difficulty and that I can't start a new slide for each level of header corresponding to the slides keeping the section and subsection titles at the top of the slide.

I've made some screenshots to try to better explain the issues/behaviors.

Strang behavior with sections and subsections as h1 and h2 levels

.reveal h1 {
  text-align: left;
  vertical-align: top;
}

.reveal h2 {
  text-align: right;
  position: inherit;
  top: 0;
  right: 0;
}

---
title: "Playing with the layout"
format:
  revealjs:
    css: theme.css
---

# Section

## Subsection

### Slide title

content of the slide

Strange behavior with slide-level: 3

---
title: "Playing with the layout"
format:
  revealjs:
    css: theme.css
    slide-level: 3
---

# Section

## Subsection

### Slide title

Content of the first slide

### Another slide

Content of the second slide

You can see each section and subsection starts a new slide and that the layout is lost i.e the section and subsection are not on the current slide.

I'm sorry if this seems trivial to you or if you find my questions stupid but I couldn't find explanations in the revealjs's doc, maybe I didn't look in the right place.

Have fun and good day to all.

[mcanouil]

To be clear about the vocabulary and how Reveal.js defines headers:

• Level 1 headers are more like "chapters".
• Level 2 headers are slide titles.
• Level 3 Headers are slides subtitles.

(I am AFK right now, so can't really do much more.)

[mcanouil]

Some update, the layout you try to achieve is not really trivial because Reveal.js is building most of it on it's own.
The best would be for you to play with CSS or even write your own modified Reveal.js Pandoc template (see https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/revealjs/pandoc/template.revealjs).

[jimjam-slam]

You could also write a Lua filter to add the section/subsection content as well! It'd just need to walk the sections, walk the slides inside adding classed spans, then you use some basic CSS to position the spans.

[mcanouil]

The Lua filter is probably the best option once you know and have defined the required CSS classes.
But, to get properly the two side by side properly, this involves also to tweak the content of the slide to add some margin at the top, to avoid content to overlap with the slide part/title/subtitle.

[fbob]

Thanks to both of you for your quick feedback.
I realize that it's not that trivial and that it requires delving into more advanced notions of Revealjs.

Thanks for your help and advice, it's really appreciated !

[fbob]

For those who may be interested, there is a new extension done by @shafayetShafee
who does this :
https://github.com/shafayetShafee/reveal-header