quarto-dev / quarto-dev/quarto-cli

Figure inside .column-screen steals that class

Open
#10,899 14 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Sep 26, 2024.

article-layout bug
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: ![a caption](trees.png)
:::

This also works (no caption):

:::{#alsoworking}
![](trees.png)
:::

But this doesn't:

:::{#notworking}
![This one is breaks things](trees.png)
:::

::::
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:

Screenshot 2024-09-27 at 09 14 36

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.