[Feature request]: add multiple columns capability to html outputs

[prosoitos]

I am transitioning from using Hugo to Quarto to create websites.

One thing that I am missing is the ability to create multiple columns.

In Hugo, I would simply use a raw html block for this. When doing the same in Quarto, the content exits the site frame in some crazy ways.

I love the :::: {.columns} div ability in presentation outputs, but when I tried it in html, it also messed up the rendering with some text showing on top of other and things getting garbled (and indeed, multiple columns is not in the html documentation, so this is not a bug. It would just be great to be able to do it there too).

Thank you!!!

[prosoitos]

Actually, for the time being, I just found a workaround:

While the ::: {.columns} div garbles the following output when used in html, using ::: {layout-ncol=2} does work (for text rather than for images as it was intended).

The problem is that any blank line is taken as a separator. This works great for images, but not for sereval paragraphs of text.

However, using <br><br> instead of a blank line to separate paragraphs doesn't trigger the creation of additional rows and does actually do what I had tried to do for quite a few hours.

[dragonstyle]

One other trick you could use would be to surround blocks of content you'd like in columns with fenced divs. For example:

:::{layout-ncol=2}

:::{.left}

Content for column 1 here

:::

:::{.right}

Content for column 2 here

:::

:::

(The class names left and right aren't meaningful, but the nested divs need to have class names on them so the start of a nested div can be distinguished from the end of a div).

[prosoitos]

Oh! That's a great trick. Thank you!! 😄

[prosoitos]

Actually, I just realized that my workaround is actually totally part of the documentation (oops).

Implementing the ::: {.columns} as with presentations however, would have the huge advantage of allowing to set the ratio of the various columns. The ::: {layout-ncol=x} div is much more limiting in that all cols are of the same width.

[dragonstyle]

No worries happy to help and the content on more custom layout was a lot further down - I'm glad that you discovered the layout panels!

[prosoitos]

And since we are on the topic of sizing, something else I have looked for everywhere with no avail (but I could have missed it too as apparently I am doing a poor job of going through all the doc) is how to control the size of images.

The only solution I have found, but it is not great is to have various fig-alt set in my css file:

img[alt=100] {
  box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  border-radius: 3px;
  width: 100%;
}

img[alt=60] {
  box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  border-radius: 3px;
  width: 60%;
}

img[alt=50] {
  box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
  border-radius: 3px;
  width: 50%;
}

And then use it with ![](pic.png){fig-alt="100"}.

But of course, it would be a lot nicer to be able to set the value directly in the .qmd than having a ton of presets.

Did I miss something there too?

Thank you very much for your time (and for Quarto which is truly wonderful).

[prosoitos]

Coming from Hugo, I am used to having a ton of shortcodes with xxx="{{ .Get "xxx" }}" that allow to set case specific values everywhere very easily for fine tweaking of documents formatting and I am looking for ways to reproduce some of it with Quarto.

[dragonstyle]

You're in luck! You can specify sizes for images directly, like:

![](file.jpg){ width=50% }

or

![](file.jpg){ width=200px }

Those sizes will generally apply across formats (so whenever possible the size will be respected in the output format using the proper sizing syntax).

TY for the kind words!

[prosoitos]

Oh... It was that simple... Sorry I seem blind to info. I will spend more time in the doc before asking any new question...

Thank you very much for your time. And yes: Quarto is fantastic. I have played with literate programming for years, first with org babel (org-mode), then with poly-markdown, R Markdown, Jupyter, etc. and Quarto is just so smooth!

And its integration with bootstrap and reveal.js are really great for websites and presentations.