How to control default spacing (format: revealjs)

[rodrigo-j-goncalves]

Description

Quarto version: 1.8.24
OS: Ubuntu 22.04

I'm trying to customize the space usage in my slides, which sometimes isn't well aligned with the default spacing.
I can control most of the cases using CSS styling, but it would be great if I could change the default values to avoid using the CSS rules every time.

The example code shows a 2-column block (one column is an image with a caption, the other column is just text), and a paragraph after the 2-column block.

Please watch:

1. the space on top of the text in the 2-column (right)
2. the space between the bottom of the image and the 'image caption' text
3. the space between the end of the 2-column block and the next paragraph (text at the bottom of the slide).

You can check this by going back and forth in the example presentation.

Is there a way to change the default values for those 3 spacings?
Thanks!

---
title: "Minimum reproducible example"
format: revealjs
---

## Default spacing

::::: {columns}

::: {.column width="40%"}

![Image caption](https://placehold.co/650x770)

:::

::: {.column width="60%"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat.

Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

:::

:::::

Duis sagittis vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

## What I'd like

::::: {columns}

::: {.column width="40%"}

![[Image caption]{.style style="position: relative; top: -0.95em;"}](https://placehold.co/650x770)

:::

::: {.column width="60%"}

:::{.style style="position: relative; top: -0.3em;"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat.

Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

:::

:::

:::::

[Duis sagittis vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.]{.style style="position: relative; top: -1.5em;"}

[mcanouil]

Have you tried using your favourite browser developer mode to figure out the rule being used?
Then look at the documentation to see if there is any matching SASS variables: https://quarto.org/docs/presentations/revealjs/themes.html

You can also try to use layout- instead of .columns, see https://quarto.org/docs/authoring/figures.html#complex-layouts.

FYI, Quarto provides shortcodes for lipsum and placeholder images (https://quarto.org/docs/authoring/shortcodes.html).

This being said, I don't see any spacing related to columns. The only vertical spacing is the one for paragraph.

Code

---
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
            .reveal .slides { border: 1px solid #b22222; }
          </style>
---

## Slide {.smaller}

:::: {columns}

:::: {.column width="40%"}

{{< placeholder 600 400 >}}

:::

:::: {.column width="60%"}

{{< lipsum 1 >}}

:::

:::

[rodrigo-j-goncalves]

Thank you @mcanouil , yes I'm learning how to inspect the file as you suggested. I noticed that in my original code, the 1st paragraph has 12px as top margin. This does not happen in your example code. Also, in your code the top of the image is well aligned with the top of the text, something that also doesn't happen in my code.

After some testing, I found that the presence of the figure caption produces some changes. I report this below in case you consider it should be a separate discussion.

[rodrigo-j-goncalves]

FYI, Quarto provides shortcodes for lipsum and placeholder images (https://quarto.org/docs/authoring/shortcodes.html).

Yes, thanks, it is very helpful! In this particular case, I needed to control exactly how much space the text takes, so I had to use an ad-hoc version (I wanted to have a short paragraph, then another paragraph in the same column, and finally a sentence outside the columns block).

[rodrigo-j-goncalves]

Disclaimer: Sorry for my poor understanding of CSS and web development in general

Quarto version: 1.8.24
OS: Ubuntu 22.04

When using columns in a revealjs presentation, the exact position of an image changes if a figure caption is present.
In the following code, you can see the difference between the slides: when we add a figure caption, the image moves towards the upper-right. It makes no difference if the caption is left-aligned (default) or centered.

No figure caption:

• the text and the image are aligned at the top (as I would expect)
• the image is left-aligned with the border of the slide (as I would expect)

With figure caption:

• The text and the image are not top-aligned anymore (img is positioned higher)
• The image moves to the right, making the inter-column space smaller and adding a space between the img and the border of the slide.

Expected behavior:
I would expect that the addition of a caption doesn't change the position of the image. If anything, the slide should "grow downward" (i.e. if more space is to be used below the figure) but not move the image. But my expectations are often wrong :|

Thanks for your quick replies and helpful comments!

---
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
            .reveal .slides { border: 1px solid #b22222; }
          </style>
---

## No fig. caption

::::: {columns}

::: {.column width="40%"}

{{< placeholder 650 770 >}}

:::

::: {.column width="60%"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat.

Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

:::

:::::


## With fig. caption (default)

::::: {columns}

::: {.column width="40%"}

![Image caption]({{< placeholder 650 770 >}})

:::

::: {.column width="60%"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat.

Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

:::

:::::

## With fig. caption (centered)

::::: {columns}

::: {.column width="40%"}

![Image caption]({{< placeholder 650 770 >}}){.style style="text-align: center"}

:::

::: {.column width="60%"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat.

Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien.

:::

:::::

[mcanouil]

A figure is different from an image.
Imagine the case where no spacing is added after the caption in a general context where the figure is in-text. It would lead to the next paragraph being almost indistinguishable from the caption which is not great.

Again, using your favourite browser, you can see the CSS rule being used:

From this you can add a rule to avoid spacing in some condition, for example when inside "column".

.column > .quarto-figure {
  margin-bottom: 0;
}

[rodrigo-j-goncalves]

Yep, it definitely makes sense.
Thank you!!!