How to force the scaling of the slide contents?

[rodrigo-j-goncalves]

Description

I prepare my presentations on my laptop, and then present them using a 'random' beamer projector. This means that I don't know the aspect ratio in advance. Sometimes it is similar to my laptop, sometimes it is almost a square.
Therefore I would like my presentations to scale accordingly, and I don't mind if the contents become somewhat smaller, but I absolutely want to be sure that all the content I see in my laptop will be shown at the moment of the presentation.

For this, I guess two conditions should be met:

1. the contents should be aligned to the top of the screen, and
2. the contents should scale to the available space.

It seems none of these are fully working in my case. How can I configure this? I did some tests with the Presentation Size options, but didn't get too far.

(Sorry if I'm misusing terms, I am not an expert in CSS, HTML, etc.)

Below is the Quarto code to reproduce, and here's a screencast of how I see it on my laptop (I test this by changing the preview window in VSC, but the same happens when changing Firefox or Chrome windows size to make it similar to the beamer projectors).

Any suggestions on how to design an 'aspect-ratio safe' layout/code?

Thanks in advance

---
title: "test"
subtitle: "I want all the content to be visible at all times"
format:
  revealjs:
    transition: fade
---

##
I would like the whole slide to be visible in different displays, especially a) my laptop and b) the PC where I give the presentation from. This means I expect the content to be scaled down/up according to the aspect ratio of the display.
However this seems to be not the case.

::::: columns
::: {.column width="50%"}
![](https://quarto.org/docs/authoring/images/word-figure.png){fig-align="center" width="50%"}
:::
::: {.column width="50%"}
![](https://quarto.org/docs/authoring/images/html-figure.png){fig-align="center" width="50%"}
:::
:::::
This first statement is always visible when I change size. But you can see that the last line of this paragraph gets lost when the display is shorter (vertically).

[cderv]

This behavior is the one from Revealjs itself: https://revealjs.com/presentation-size/

We don't change it and Quarto Presentation inherit it. The scaling they do is presented as the following

All presentations have a "normal" size, that is, the resolution at which they are authored. reveal.js will automatically scale presentations uniformly based on the normal size to ensure that everything fits on any given display or viewport without changing the aspect ratio or layout of your content.

It can be totally disable if needed, but I don't know the side effect.

My understanding is that this scaling will adapt to the display keeping aspect ratio, but it won't change font size or else to fit more content in a bigger screen.

So the width and height define the size, and it Quarto it defaults to 1050 x 700

Revealjs doc claims in can be made percent... maybe this would help in your case. I did not check if Quarto does have issue if those are passed in %. It shouldn't as this is all Revealjs doing.

The other parameter margin, min-scale, max-scale probably also control part of it.

Did you try several combination of those ?

Honestly, if you don't manage to do what you want, I check Revealjs repo and ask there regarding which configuration they would recommand for this: https://github.com/hakimel/reveal.js

[rodrigo-j-goncalves]

Thank you for your answer.
I didn't try all combinations of margin, min-scale, max-scale because I wasn't really sure what I was doing :p ... of if that was even the problem.

It is unexpected to me that the text is cut at the bottom while, at the same time, it is not aligned to the top of the screen (ie. valuable space is being wasted at the top of every slide), as you can see in the screencast.

I'll play with the presentation size options and see if I can get it to work for different viewports.

[cderv]

It is unexpected to me that the text is cut at the bottom while, at the same time, it is not aligned to the top of the screen (ie. valuable space is being wasted at the top of every slide), as you can see in the screencast.

The pixel space is reducing, and the content takes too much. Maybe the image should reduce size to leave room for the text, or margin around slide should reduced.

This is definitely something related to Revealjs configuration, and content inside the slide and their size (absolute size or relative size).

I'll play with the presentation size options and see if I can get it to work for different viewports.

Please do, and share feedback here. If you have observation on what could be improved, that will be very valuable !

[rodrigo-j-goncalves]

After some testing, I finally got it to work. Unsurprisingly, it was a very simple addition. Just added the height parameter into revealjs's format with a value larger than the default. The code below works perfectly, as seen in the new screencast.

---
title: "test"
subtitle: "I want all the content to be visible at all times"
format:
  revealjs:
    transition: fade
    height: 900 # I use 900 here to exaggerate the effect as shown in the video, but 800 already works well for my needs
---

##
I would like the whole slide to be visible in different displays, especially a) my laptop and b) the PC where I give the presentation from. This means I expect the content to be scaled down/up according to the aspect ratio of the display.
However this seems to be not the case.

::::: columns
::: {.column width="50%"}
![](https://quarto.org/docs/authoring/images/word-figure.png){fig-align="center" width="50%"}
:::
::: {.column width="50%"}
![](https://quarto.org/docs/authoring/images/html-figure.png){fig-align="center" width="50%"}
:::
:::::
This first statement is always visible when I change size. But you can see that the last line of this paragraph gets lost when the display is shorter (vertically).

Now I can trust that I won't lose any content in my presentations :)

Thanks again for all your hard work!

[rodrigo-j-goncalves]

Just to clarify that I not only added, but increased the height parameter