[revealjs]: `aside` class

[juliantao]

When aside is used on a slide with a single figure, there seems a clash between aside and r-stretch: the figure is stretched too much and the aside content overlaps the bottom of the figure. If there is a caption for the figure, the caption even goes below the aside content.

Desired behavior is that aside contents have priority, and they always take the bottom part of the slide; if a single figure is included, it should be stretched to the top of the aside block. Is this something that can be implemented? @cderv

Try the MRE below.

---
title: "`aside` class"
format: revealjs
---

## Slide 1

![](./img/kitten.png)

::: {.aside}
Something here. A figure without caption
:::


## Slide 2

![Kitten](./img/kitten.png)

::: {.aside}
Something here. A figure with caption
:::


## Slide 3

There is no figure on this slide.

::: {.aside}
`aside` works well.
:::

## Slide 4 

::: {layout-ncol=2}
![Kitten](./img/kitten.png)

Mix text and figures.
:::

::: {.aside}
`aside` works well.
:::

[jjallaire]

Unfortunately reveal is doing the measuring to determine available height and it doesn't know about the quarto aside feature. I don't think we can fix this without re-writing the stretch feature entirely (not impossible but not a small amount of work).

@cderv Should we disable auto-stretch when we see footnotes or asides on a page?

[cderv]

Yes I agree. I think we should deactivate auto stretch in this case.

If we want to support it in more quarto specific feature we'll need to rewrite it and adapt to our need.

[juliantao]

Thank you both! The most frequent use regarding this combination (single figure + aside)for me is when I need to show the credit of a figure. Currently, I am using css to define a custom div, which is then included after the figure.

[cderv]

@jjallaire I have looked closer into this today to understand why this would not work. The measuring should be aware of the aside presence in the slide. I think it gets the measuring right, but Quarto aside is position as absolute, 20px from the bottom.

quarto-cli/src/resources/formats/revealjs/quarto.scss

Lines 279 to 285 in 9bb09f5

	.reveal .slide aside,
	.reveal .slide div.aside {
	position: absolute;
	bottom: 20px;
	font-size: #{$presentation-font-smaller}em;
	color: $text-muted;
	}

I believe this is why its gets above the image as the measuring does not take into account this absolute position. Is that what you meant by "reveal is doing the measuring to determine available height and it doesn't know about the quarto aside feature" ? Maybe we could 'patch' the height computation to remove this fixed 20px we are adding ?

Let's note that adding an aside will automatically reduce the available size for an image and so it will also be above image if one manually set the height

---
title: "`aside` class"
format: revealjs
---

## Slide 1 {.nostretch}

![elephant](https://github.com/quarto-dev/quarto-web/raw/main/docs/authoring/elephant.png){height="600px"}

::: {.aside}
Something here. A figure without caption
:::

There is even a size which is not so big that will make the aside part be above the caption

At the end, this will be always the case when an aside is on slide. Content needs to be sized manually in this case to fit the remaining space without the aside.

So I am doing a PR to remove the auto-stretch when aside is present, but this will mean that all images on those slide requires to be manually sized according to the space left considering aside part at 20px from bottom.

[jjallaire]

If there is a way for us to patch the height computation to account for the aside that's great but I think its' going to be pretty messy/complicated to do that esp. give absolute positioning, varying height of aside, etc. Disabling for now seems like the best approach.

[EmiliaJarochowska]

I would like to return to this issue because it also affects plots. Example:

### Example {.smaller}

```{python}
#| echo: false
import pandas as pd
import seaborn as sns
path = '../Data/wellbeing.csv'
df = pd.read_csv(path, sep=',')
sns.pairplot(data=df, hue='education', markers=["o", "s", "v"])
```

::: aside
Source of the dataset: https://ec.europa.eu/eurostat
:::

gives:

I tried to control it by manually setting the figure size but when I present the slides on different displays it does not scale well so not a good solution.

[cderv]

As I shared a while back on this issue , figures needs to be manually sized when there is an aside on the slide

I tried to control it by manually setting the figure size but when I present the slides on different displays it does not scale well so not a good solution.

Currently, there is no easy way for us to automatically compute the size of the plot when there is an aside. So using manual size is necessary.

How did you do it ?

[EmiliaJarochowska]

Right, sorry, I didn't process your instructions correctly, but looking at them again they are clear.

I use sizing like this:

sns.pairplot(data=df, hue='education', markers=["o", "s", "v"], height=2)

but I give lectures using different displays so sometimes this means the figure is very small. If I don't set the size, I think the plot is stretched to the window size.