RevealJS and r-fit-text class (with slide titles)

[fuhrmanator]

How can I apply r-fit-text to level 1 titles in RevealJS with Quarto? The Quarto documentation shows examples using ## to make smaller titles, but that won't work for the toc: feature with level 1 titles.

https://quarto.org/docs/presentations/revealjs/advanced.html#fit-text shows to put text in ::: blocks, but it appears to have no effect.

Since I want to use a toc: true slide at the start of my presentations - it's great because it's re-build based on the slides -- titles need to be defined as #. The snag I hit is that # title with most reveal themes results in a really huge title that often wraps, eating up all the space in the slide.

The reveal-esque solution is to use the r-fit-text class on the <h1> tag, such as described at https://revealjs.com/layout/#fit-text

# My title that wraps several lines {.r-fit-text} has no effect. I believe it's because of how the markdown is parsed. I gather from examples such as https://quarto.org/docs/presentations/revealjs/index.html#content-overflow that {.something} (e.g., .scrollable) is meant to apply to the entire slide, rather than just the title.

I know it can work, because I used it in a partial for the title slide:

<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
  <h1 class="title r-fit-text">$title$</h1>
  $if(subtitle)$
    <p class="subtitle">$subtitle$</p>
  $endif$
...
</section>

A partial solution is

#
::: {.r-fit-text}
<h1>Here's a long title that would wrap</h1>
:::

But then the level 1 entry in the TOC slide is blank.

I ultimately must use a level 1 slide by itself; that is, with no other info. This works, but is maybe a waste of the page in the PDFs generated (students sometime print things for studying, but maybe I need to forget about that!). It seems to be a Reveal philosophy, so maybe it's not worth trying to hack around it.f

EDIT: cleared up misuse of r-text-fit

[cscheid]

I'm away from a computer where I can quickly test this, but can you try

# [This title made smaller pls]{.r-text-fit}

[text]{.some-class} is Pandoc syntax for <span class="some-class">text</span>

[schwa021]

I may be losing my mind - but for me

# [This title made smaller pls]{.r-fit-text} works

but not

# [This title made smaller pls]{.r-text-fit} <-- this is what you wrote.

note: order of "text-fit" vs. "fit-text"

Can you clarify that I am not actually losing my mind?

[mcanouil]

See https://quarto.org/docs/presentations/revealjs/advanced.html#fit-text.

Usually, consulting the documentation helps in such matter.

[schwa021]

Thank you for your prompt and typically warm reply. I hope my attempt at being helpful did not cause confusion or delay.

It appeared that there was an error in the earlier suggestion (@cscheid mentioned he was away from his computer, so such errors are easy to understand).

The thread caused a bit of confusion for me, since the original poster indicated that the advice had worked.

I had historically been using (the apparently correct) fit-text ... hence my confusion

I thought someone might want to change it here as this is an official repository of advice

As always - I appreciate the free use of these great tools and knowledgeable (albeit curt) advice.

[fuhrmanator]

@schwa021 As the OP I apologize for the sloppiness of my question. I edited my post now to clear up that confusion of the incorrect class name.

[mcanouil]

The main source of "truth" is the documentation, especially for documented options and features.
If there is confusion in the documentation, then that's an issue we'll gladly fix especially if suggestions/feedbacks are provided.

Carlos' answer clearly states he was not in a position to guarantee his answer and used what was provided to write it.