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.