Rows and nested columns in a revealjs presentation

[dmkaplan2000]

Description

I have a quarto revealjs presentation in which I would like to include a rather complex set of images and text. In xaringan, I would do this with a set of rows and columns, but I can't seem to get it to work correctly in quarto with revealjs.

As an example of what I want to do, I have the following slide:

Everything, but the red "Some text goes here" was made with quarto by creating a column for the text on the left and one column for each of the fish images. This issue I have is that I don't know how to create in quarto the red text centered under the three images. I asked ChatGPT how to create a row in which I would place a nested set of 3 columns, one for each fish image and it suggested defining a row class in CSS as follows:

.row {
  display: flex;
  #flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

I did this, but ether I didn't use it correctly or it didn't seem to like the nested columns and the result was a mess.

What is the best way to achieve what I want for this slide?

Thanks!

[mcanouil]

Unfortunately, it's nearly impossible for someone to help about HTML/CSS layout with only a screenshot.
Please provide a small reproducible example that could be use.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ```  The end. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ```  The end. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[dmkaplan2000]

---
title: "A silly example"
format: 
  revealjs:
    smaller: true
include-in-header:
  - text: |
      <style>
      .row { # Definition for .row from chatgpt...
        display: flex;
        #flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
      }
      </style>
---

## A slide that has most of what I want

::::::{.columns}

:::::{.column width="30%"}
Some text
:::::

:::::{.column width="22%"}
:::{style="text-align: center"}
Skipjack tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::::

:::::{.column width=22%}
:::{style="text-align: center"}
Yellowfin tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::::

:::::{.column width=22%}
:::{style="text-align: center"}
Bigeye tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::::

::::::


## A slide that doesn't work, but has what I want

::::::{.columns}

:::::{.column .col-border-right width="30%"}
Some text
:::::

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

::::{.row}
::::{.columns}
:::{.column}
:::{style="text-align: center"}
Skipjack tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

:::{.column}
:::{style="text-align: center"}
Yellowfin tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

:::{.column}
:::{style="text-align: center"}
Bigeye tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

::::
::::

Some text

:::::

::::::

[cscheid]

Quarto doesn't currently support that.

[mcanouil]

Overall, it's a plain HTML/CSS question that would be more appropriate on platforms more dedicated to HTML/CSS.

Instead of reimplementing everything, you could add Bootstrap as a dependency and use "grid".

[dmkaplan2000]

Thanks. I asked ChatGPT how to enable bootstrap and use grid in quarto revealjs and it suggested the following:

---
title: "My Presentation"
format: revealjs
resources:
  - href: https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
    rel: stylesheet
---

Is this correct? If I understand correctly, bootstrap is already enabled in quarto html documents, but you have to manually enable it in quarto revealjs. Is that correct? Once enabled, will I have to use grid for all page layouts or will the standard .columns and .column continue to work?

[mcanouil]

You already have been given the answer in a previous thread of yours that can be found by searching for "bootstrap reveal".

• How to add striping to table in revealjs quarto presentation #7356

Note that Quarto support doesn't cover validation of LLM answers.
The one asking the questions to such tools is the one that has to validate them.

A reading suggestion: https://doi.org/10.1007/s10676-024-09775-5

[dmkaplan2000]

I don't really know how to respond to this other than to say that I am trying my best to learn how to do things and so sometimes I ask questions that maybe have answers elsewhere or maybe are a bit dumb, and I just hope that other quarto users to whom I directed the question will be understanding of that.

[mcanouil]

Sorry, the wording was probably not great.

I meant, there are a lot of useful answers in the discussion board. The discussions are labelled and you can use those as well as keywords.
Starting with that is better than asking LLMs.
Same applies with the documentation (which LLMs are basically unaware of, thus the 99% bad answers from them).

As an example: label:themes label:revealjs bootstrap in the discussion search leads to https://github.com/quarto-dev/quarto-cli/discussions?discussions_q=label%3Athemes+label%3Arevealjs+bootstrap which contains only four discussions including this one.
Even without label:themes, you get roughly a dozen of discussion not more.

[dmkaplan2000]

Look, I get it, people asking questions already answered is annoying, but not everyone is an expert on querying github. None of us is perfect. Your comment on exactly how to query github to get a useful answer is genuinely helpful. In this case, prior to asking ChatGPT, I googled it and I looked at the quarto documentation and none of it gave me a clear answer, so I ended up at ChatGPT, which does indeed give many incorrect answers, explaining why I asked to make sure, but in this case maybe it did give a correct answer. A yes or no or look elsewhere response would have been fine without the lecture.

As a general comment, one reason I ask these types of questions instead of just spending a few weeks learning SCSS is that part of the point of markdown is to make things simpler when possible. I realized from the start that there is undoubtedly a HTML solution to my question (in the end, there is an HTML solution to almost all questions), but if I have to be an HTML expert just to make a quarto presentation, then maybe I should be using powerpoint. In this particular case, grid seems like a really useful thing to have in a presentation format, which makes me think that it isn't activated by default for some very important reason, explaining why I am hesitating to just jump in head first. Maybe, in the future, when you guys have time, documenting how to use grid in a revealjs presentation would be useful.

[mcanouil]

people asking questions already answered is annoying,

That was not the point/case ("annoying" part).
FYI, I am not a native English speaker, so I don't always realise there is a "tone".

In this particular case, grid seems like a really useful thing to have in a presentation format, which makes me think that it isn't activated by default for some very important reason, explaining why I am hesitating to just jump in head first. Maybe, in the future, when you guys have time, documenting how to use grid in a revealjs presentation would be useful.

The issue is that Bootstrap (for example) can have conflict with Reveal.js and conflicts very hard to detect as both libraries are quite huge and change very often.

It's note about "being activated" or not. Reveal.js does not support natively this and does not support Bootstrap.
Quarto made a lot of improvements (some successful, some less successful) to Reveal.js to include features as close as possible as with "standard" HTML.

I'm just thinking about it now, but instead of using columns/column (from Pandoc) you could use layout (from Quarto).
(Note that layout does not behave 100% like columns in particular in Reveal.js)

---
title: "Reproducible Quarto Document"
format: revealjs
---

## Slide

::: {layout="[[1, 1], [1, 1, 1]]"}

{{< placeholder >}}

Content

{{< placeholder >}}

Content

{{< placeholder >}}
:::

[dmkaplan2000]

people asking questions already answered is annoying,

That was not the point/case ("annoying" part). FYI, I am not a native English speaker, so I don't always realise there is a "tone".

Dans ce cas, mieux répondre en français, de toute façon ChatGPT peut tout traduire...

I'm just thinking about it now, but instead of using columns/column (from Pandoc) you could use layout (from Quarto). (Note that layout does not behave 100% like columns in particular in Reveal.js)

---
title: "Reproducible Quarto Document"
format: revealjs
---

## Slide

::: {layout="[[1, 1], [1, 1, 1]]"}

{{< placeholder >}}

Content

{{< placeholder >}}

Content

{{< placeholder >}}
:::

I didn't previously realize that layout can group together content more than just a single image + caption. This seems like a good solution. Can a layout include fragments? I suppose so.

With respect to the comment that layout isn't 100% like column in revealjs, are there known issues I should watch out for? I have noticed with columns themselves that sometimes I have to be careful about sizing to keep things from floating on the page. Is this sort of thing what you are talking about?

[mcanouil]

Can a layout include fragments? I suppose so.

You are going to need to test that.
(Unfortunately, Quarto does not have a comprehensive test suite at this point, especially regarding cross-features interactions.)

With respect to the comment that layout isn't 100% like column in revealjs, are there known issues I should watch out for? I have noticed with columns themselves that sometimes I have to be careful about sizing to keep things from floating on the page. Is this sort of thing what you are talking about?

It was mostly a matter of how things were aligned. I know one issue like this has been fixed but other differences exist, so don't be surprised (I don't recall/find the one thing that won't be fixed ...).

[dmkaplan2000]

For completeness, the following example using layout does what I want it to do (fragment works, as does the centering and coloring of text and figures):

---
title: "A working example"
format: 
  revealjs:
    smaller: true
---

---

### A title

::::::{.columns}

:::::{.column width="30%"}
Some text

Some more text
:::::

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

:::: {layout="[[1,1,1], [1]]"}

:::{#skipjack}
:::{style="text-align: center"}
Skipjack tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

:::{#yellowfin}
:::{style="text-align: center"}
Yellowfin tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

:::{#bigeye}
:::{style="text-align: center"}
Bigeye tuna
![](https://upload.wikimedia.org/wikipedia/commons/a/ac/Thunnus_obesus_%28bigeye_tuna%29.jpg)
:::
:::

:::{#text .fragment}
:::{style="text-align: center; color: red;"}
Some text
:::
:::

::::

:::::

::::::

[mcanouil]

Thanks for sharing what worked for you!