quarto-dev / quarto-dev/quarto-cli
Figure inside .column-screen steals that class
@cscheid is already working on this.
Since Sep 26, 2024.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
When we place an image with a caption inside a fenced div with .column-screen, the image gets .column-screen and the section does not, which causes various kinds of layout havoc (the rest of the section doesn't get the enlarged width, and .page-columns propagates up from the image through the rest of the document, which makes placing one's own CSS grids inside the section extremely difficult).
Steps to reproduce
Test case: https://github.com/jimjam-slam/test-quarto-cr-img-classes
---
title: Test test test
format: html
---
Oh hello! Here are some images with classes:
::::{.column-screen}
This text is inside the section. But the section itself doesn't seem to get `.column-screen`...
:::{#working}
This works: 
:::
This also works (no caption):
:::{#alsoworking}

:::
But this doesn't:
:::{#notworking}

:::
::::
Expected behavior
The fenced div in the input document that has .column-screen should have it in the output HTML, and the image inside #notworking should not. The other ancestors of the image should also not have .page-fill .page-columns.
Actual behavior
The image receives .column-screen and goes to full width. Other elements in the section don't. Any nested grids declared inside the broken section tend to get overridden, as .page-columns is on all ancestors of the image inside.
Your environment
- OS: macOS Sequoia 15.0
- VSCode 1.93.1
Quarto check output
Check file:///Users/rensa/code/quarto-cli/src/quarto.ts
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 2d0331c755c74544539cec2706df4bc4d378694d
Path: /Users/rensa/code/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/rensa/Library/TinyTeX/bin/universal-darwin
Version: 2021
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.9.7 (Conda)
Path: /Users/rensa/miniforge3/bin/python
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with conda install jupyter
[✓] Checking R installation...........OK
Version: 4.2.1
Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
LibPaths:
- /Users/rensa/Library/R/arm64/4.2/library
- /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
knitr: 1.42
rmarkdown: 2.21
[✓] Checking Knitr engine render......OK
EDIT: added a screenshot of the output, and also a link to previous discussion:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.