pull-left with parameters?

[giabaio]

Hi there, This may be a trivial issue, but is there a way to use elements defined in the xaringan css with parameters? To make an easy example, .pull-left and .pull-right are defined to have width: 47% (I think that's the default value, not the one that I have made default...). Anyway, of course one can redefine them globally, eg by setting the width to a different value (but, as I understand it, this applies to all .pull-* elements throughout the slides), or by defining new elements, say .my-pull-* with set widths (different than the default).

But I wonder whether you can do something like I believe is possible in quarto, which mimics LaTeX and defines a general "environment" columns, under which you place suitable column where you can specify the width, eg

::: {.columns}
::: {.column width="20%"}
XXX
:::
::: {.column width="80%"}
YYY
:::
:::

say, something like

.pull-left[XXX]{width="20%"}

or something?

It may well be a trivial thing to do --- I am probably not that good with css to figure out myself...

Thanks for your help! Gianluca

---

By filing an issue to this repo, I promise that

• [X] I have fully read the issue guide at https://yihui.org/issue/.
• [X] I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• [X] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[yihui]

I also wished this feature existed several years ago, but unfortunately remark.js doesn't support it. You can at most define several CSS classes like .pull-left-1, .pull-left-2, etc, and set their widths to 10%, 20%, etc. Or you use raw HTML tags like <div style="float: left; width: 35%;">.

[giabaio]

Thank you @yihui --- I suspected as much... Shame... I suppose I can try and write an R function that pastes the HTML div tag but leaves the width parameter to be possibly changed, something like r column(pull="left",width="20%") --- though I am not sure what the best way would be to include the actual content of the column... As an additional argument to the function? (But then what if the content involves a R chunk?...) Or maybe have a opencolumn and a closecolumn version which open and close the div?...

I'll have a think --- but thanks for your quick reply!

[yihui]

I wouldn't write an R function, but I'd just write <div> directly. The latter is more straightforward. If you generate the tags using R, you probably need to use two functions like https://github.com/rstudio/blogdown/blob/d6191c09004f6af4cc766a747c0cf42bf9281654/R/hugo.R#L795-L805 (one function to open the tag, and one to close it)

[giabaio]

Yeah... I think you're right...