Quarto - Positioning Content in the Margin

[giscus[bot]]

Quarto - Positioning Content in the Margin

https://quarto.org/docs/blog/posts/2022-02-17-advanced-layout/

[dkStevensNZed]

I want to create a margin figure with a caption in the margin below the figure. I've found that the caption runs through the center of the figure space rather than below. In addition, in trying to create a table and have the table caption in the margin, the caption is always above the table in the main column. Is this behavior expected? How do I change it?

[astoeriko]

Hey, I am not sure if I understand your question correctly, but it seems to me that I had a similar questions to your first one (positioning the caption of a margin figure below it). I asked it in this Quarto github discussion, maybe the answer is helpful for you, too.

[tecunningham]

Typically I want to align my margin figures with a specific piece of text.

This is a problem when there's a figure that is longer than the associated text, in which case I need to insert some white space.

Is there any way of doing this automatically?

(Related: in HTML there's
which puts all new content below any floating figure, but that doesn't work here).

[tecunningham]

Actually it'd be great if "{{< pagebreak >}}" did this, but it doesn't seem to.

[Scavetta]

In $\LaTeX$ you'd often need to adjust the vertical position of margin figures to place them exactly where you wanted them. In HTML, you can do the same with those generated using quarto.

The figure label, specified with fig-lab, is unique to each figure and is also used as the id of a figure's div, including the figure legend. You can adjust the div which has a specific id using CSS.

This will move the margin figure down 10em (-10em would move it up) -- you can use other valid CSS units.

An R code chunk:

#| label: fig-plot
#| fig-cap: "A margin figure."
#| column: margin

plot(pressure)

Include in your css:

#fig-plot {
    position: absolute;
    transform: translateY(10em);
}

[joelnitta]

Is there any way to adjust the size of the margin figures? Or even better show a magnified view on hover-over? I'm trying to deal with margin figures that are too small for my content.

[dragonstyle]

For HTML, you could certainly target individual plots with the css above (.e.g #fig-plot). In addition, you could consider giving the Lightbox extension a try (which would enable zooming):

https://github.com/quarto-ext/lightbox

[Sytse45]

When I have a rather short paragraph in the body and some longer text in the margin next to it, I would like to continue the body text below the level of the last line in the margin, like in the primitive scheme below. Is this possible without ad-hoc fiddling with white vertical space? I think of wrapping the short paragraph and the longer margin text together into a div, but I don't know how to realise this. A callout {.aside} approximately does what I want, but it adds a colour which I don't want.

xxxxxxxxxxxxxxxxxxxxxx  xxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx  xxxxxxxx
                        xxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

[friendly]

Nice blog post. For a book, I'd like to display the names of R files for figures in the margin during development, e.g.,

::: {.column-margin}
R file: `R/collin-data-beta.R`
:::

But then I'd like to be able to turn this off globally for production. Is there any way to add an option for this?
Or define a more general version of this?

[cscheid]

You can write a Lua filter that controls the inclusion of the column-margin class in the desired contexts. The cleanest way to do this would be with project profiles: https://quarto.org/docs/projects/profiles.html.