Does Quarto/Pandoc support RevealJS "slide attributes"?

[MattF-NSIDC]

I'm trying to get a Quarto (1.3.340) presentation to set blur + dimming on the background image of non-title slides to make text more readable. I aimed to do this with RevealJS' slide attributes mechanism, similar to the method described here.

When I add a slide attributes HTML comment beneath the front matter of my markdown doc, instead of adding attributes to each slide <section>, I get a blank slide containing only that HTML comment:

<section class="slide level2 present" style="display: block;" data-pdf-page-number="2">

<!-- .slide: data-state="blur" -->
</section>

Is there any way currently with Quarto (or Pandoc) to add attributes to all slide sections? I would like to avoid applying attributes to individual slides, like # heading {data-state="blur}, because I'll forget some.

[MattF-NSIDC]

Getting the same result when using pandoc directly: pandoc -t revealjs -o test.html --slide-level=2 -s my_slides.md. This also produces an "empty" section like:

<section class="slide level2 present" style="top: 350px; display: block;">

<!-- .slide: data-state="blur" -->
</section>

... and none of my slides receive that attribute. I think this is an issue of pandoc not supporting the feature. Is there a place I can look for a list of revealjs features pandoc does not support?

Does anyone have any other ideas for how to accomplish this?

[cderv]

Just to be sure: using the syntax # heading {data-state="blur} works, right ? What is the attributes you want to set exactly ?

to add attributes to all slide sections? I would like to avoid applying attributes to individual slides

You can use a Lua filter to apply some attributes to all headers at once. That would be the easiest IMO.

I aimed to do this with RevealJS' slide attributes mechanism

For revealjs output, we leverage Pandoc's support for revealjs, and I don't think it supports the markdown syntax. Pandoc will convert markdown to HTML for revealjs directly and attributes are passed as HTML attributes (example with data-background)

[MattF-NSIDC]

Just to be sure: using the syntax # heading {data-state="blur} works, right ?

Correct. If I apply this to every slide, I get the outcome I'm expecting, but I prefer not to apply that to every slide!

What is the attributes you want to set exactly ?

I'm hoping that by setting a data-* attribute, I can write CSS that conditionally applies blur to all slides except the title. I'm not trying to hook in to any existing functionality with this attribute.

You can use a Lua filter to apply some attributes to all headers at once. That would be the easiest IMO.

Will look in to this, thanks!

For revealjs output, we leverage Pandoc's support for revealjs, and I don't think it supports the markdown syntax. Pandoc will convert markdown to HTML for revealjs directly and attributes are passed as HTML attributes (example with data-background)

Do you think it's worth my time to open an issue with Pandoc? Or do you think supporting this feature would be out-of-scope?

[cderv]

Do you think it's worth my time to open an issue with Pandoc? Or do you think supporting this feature would be out-of-scope?

Regarding markdown syntax support, I personally thing this is out of scope for something like Pandoc already converting markdown to HTML. But maybe they will differ...
Regarding the feature you need, I believe slide attributes is already supported. I don't see any way in revealjs to apply an attributes to all sections at once. The doc you shared is just the markdown syntax way to apply attributes to a slide IIUC

I believe the Lua filter would be an easy way to do that. I think I shared an example somewhere on Github. If I can find it, I'll share the link

[MattF-NSIDC]

I don't see any way in revealjs to apply an attributes to all sections at once. The doc you shared is just the markdown syntax way to apply attributes to a slide IIUC

I think you're right that I read the doc wrong; I read the plural "elements" in the sentence "for adding attributes to the slide <section> elements " and assumed that meant it would apply to all <section>s. Thank you!

[MattF-NSIDC]

Following up with how I solved this problem after maybe too much fidgeting with CSS (Firefox doesn't fully support this method; see comment):

/*
blur, desaturate, and dim backgrounds of non-title slides to make text easier
to read.

NOTE: Firefox does not support the `:has()` selector (for the last 16 years:
https://bugzilla.mozilla.org/show_bug.cgi?id=418039), so in Firefox all slides
will appear "dim".
*/
html .backgrounds {
   -webkit-filter: blur(4px) saturate(.7) brightness(.8);
   -moz-filter: blur(4px) saturate(.7) brightness(.8);
   -o-filter: blur(4px) saturate(.7) brightness(.8);
   -ms-filter: blur(4px) saturate(.7) brightness(.8);
   filter: blur(4px) saturate(.7) brightness(.8);
}
.slides:has(> #title-slide:not([hidden])) ~ .backgrounds {
   -webkit-filter: blur(0px) saturate(1) brightness(1);
   -moz-filter: blur(0px) saturate(1) brightness(1);
   -o-filter: blur(0px) saturate(1) brightness(1);
   -ms-filter: blur(0px) saturate(1) brightness(1);
   filter: blur(0px) saturate(1) brightness(1);
}