How can I increase text size in a quarto-revealj made presentation while presenting?

[Sancho-git]

Description

I use rmarkdown a lot for creating presentations as webpages for my courses. I recently tried Quarto and it seems to be a quite nice alternative. The issue I had, though, is that in a rmarkdown presentation (as webpage) I am able to increase the size of the text by using ctrl+mouse scroll on a windows machine. It seems that I am unable to do the same in a Quarto (revealj) presentation. Am I missing something here?

Ideas/suggestions are more than welcomed.

[cscheid]

Quarto presentations offer zooming, that might be enough for what you're looking: https://quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom

[Sancho-git]

Thanks, it is useful but the ability to dynamically adjust the text size to accommodate audience needs is far more useful. Zooming in and out becomes annoying after a while. I will go back to rmarkdown for now and see what comes next.

[mcanouil]

Because Reveal.js resize itself the font-size, if you have concern about the font-size you can only hardcode it or possibly look for a Reveal.js plugin that does what you want.

To note, in rmarkdown, if you are talking about Xaringan, that is an entirely different framework also in JavaScript.

In HTML, it's "easy" to use JavaScript to modify font size but, it's harder to add a script that interacts with another complex script such as Reveal.js.

---
title: "Quarto Playground"
format: html
include-after-body:
  - text: |
      <script type="text/javascript">
        function increaseFontSize() {
          var body = document.getElementsByTagName('body')[0];
          var currentSize = parseFloat(window.getComputedStyle(body, null).getPropertyValue('font-size'));
          body.style.fontSize = (currentSize + 1) + 'px';
        }
        function decreaseFontSize() {
          var body = document.getElementsByTagName('body')[0];
          var currentSize = parseFloat(window.getComputedStyle(body, null).getPropertyValue('font-size'));
          body.style.fontSize = (currentSize - 1) + 'px';
        }
      </script>
---

## Section 1

<button onclick="increaseFontSize()">Increase Font Size</button>
<button onclick="decreaseFontSize()">Decrease Font Size</button>

This is a playground for Quarto.

[Sancho-git]

Thanks for the reply and the provided example. I will now close this discussion

[mcanouil]

FYI:

• https://github.com/gadenbuie/revealjs-text-resizer by @gadenbuie

[Sancho-git]

Thank you so much, I will definitely try this.