OJS to CSS doesn't work

[royfrancis]

Description

I have a dummy example here with few different attempts:

---
title: OJS to CSS
---

```{ojs}
viewof text = Inputs.textarea({label: "Text",value: "This is some text"})
viewof size = Inputs.range([1, 2], {value: 1.5, step: 0.1, label: "Font size"})
viewof color = Inputs.color({label: "Color", value: "#ddf1ff"})
```

## Raw

::: {style="font-size: 1.5rem; background-color:#ddf1ff;"}
${text}
:::

## Direct

::: {style="font-size: ${size}rem; background-color: ${color};"}
${text}
:::

## R inline

`r cat("::: {style=\"font-size: ${size}rem; background-color: ${color};\"}\n")`
${text}
:::

## R chunk

```{r}
#| echo: false
#| results: asis
cat("::: {style=\"font-size: ${size}rem; background-color: ${color};\"}\n")
```
${text}
:::

## R chunk html

```{r}
#| echo: false
#| results: asis
cat("<div style=\"font-size: ${size}rem; background-color: ${color};\">\n")
```
${text}
</div>

The "$text" works but the css variables don't work.

quarto 1.4.506

[jimjam-slam]

R chunks are evaluated at document render time, and OJS cells are evaluated continuously when the rendered document is viewed, so you can't use OJS values in R chunks—they aren't defined yet 🙂

(The R inline example is actually just ignoring the part emitted under cat and then emitting the rest in OJS, which is why you see ::: after it.)

[jimjam-slam]

I should also say that I don't think you can inject OJS into the attributes of a Pandoc div (:::), because those get compiled into HTML at document render time.

But you might be able to create the same div using OJS to create the effect you're looking for:

```{ojs}
html`<div style="background-color: ${color}">

${text}

html`</div>`
```

[royfrancis]

Interesting idea! But it didn't quite work for me. I am probably doing something wrong.

```{ojs}
//| echo: false
//| results: asis

html`<div style="font-size: ${size}rem; background-color: ${color};">`
html`${text}`
html`</div>`
```

The html`${text}` part works.