quartoreveal.js

Apply class to headings in quarto revealjs


I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css file:

.longtitle{
  font-size: 0.7em;
}

This is my qmd code:

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

<h2 class="longtitle">Try to apply the "longtitle" class</h2>

- Not working

Solution

  • This is because your css gets overwritten by the .reveal h2 styles. Instead, a possibility is to use a span. The css can stay as it is and we use

    ## [Try to apply the "longtitle" class]{.longtitle}
    

    what defines a span which has the longtitle class, where the span is located inside an h2, so that it is in particular inside a suitable header.

    custom.css
    .longtitle {
      font-size: 0.7em;
    }
    
    index.qmd
    ---
    title: test
    format: revealjs
    self-contained: true
    css: custom.css
    ---
    
    ## Short title
    
    - Item
    
    ## Very very long title that goes in two lines
    
    - Item
    
    ## [Try to apply the "longtitle" class]{.longtitle}
    
    - Working
    

    enter image description here