How to apply text alignment in different formats like pdf and html?

[luifrancgom]

Description

Description

I want to apply text alignment in different formats like pdf and html.

Minimal reproducible example

I tried the following:

---
title: "Text alignment"
format: 
    html:
        embed-resources: true
    pdf: default
engine: knitr
---

```{css}
#| echo: false

.signature p {
  text-align: right;
}
```

::: {.content-visible when-format="pdf"}
\begin{flushright}
Some text align to the right in pdf
\end{flushright}
:::

::: {.signature .content-visible when-format="html"}
Some text align to the right in html
:::

I get the expected behavior in pdf but I am not able to do the same in html. I don't know if I am not doing it in a correct way or if there is an alternative way to specify multiple classes in html for Quarto in a div to align the text and that works for multiple formats.

Additional information

• Quarto version: 1.8.14
• OS: Windows 11

[mcanouil]

Nest the divs.
.content-visible when-format="html" is special. It's not attributes to the content, it's special markup for Quarto.

[luifrancgom]

Thank you. For someone who needs more information check out Div:

---
title: "Text alignment"
format: 
    html:
        embed-resources: true
    pdf: default
engine: knitr
---

```{css}
#| echo: false

.signature p {
  text-align: right;
}
```

::: {.content-visible when-format="pdf"}
\begin{flushright}
Some text align to the right in pdf
\end{flushright}
:::

:::::: {.content-visible when-format="html"} 
::: {.signature}
Some text align to the right in html
:::
::::::

[NixImagery]

I am using Koma script document class scrbook. The following way to align right in both pdf and html outputs in quarto uses quarto/pandoc fenced block attributes.

In _quarto.yaml:

format:
  html:
    css: styles.css
  pdf:
    include-in-header:
      - text: |
          \usepackage{ragged2e}

in styles.css:

.flushright {
  text-align: right;
}

and in the document:

:::{.flushright data-latex=""}
This text is right-aligned in HTML and PDF.
:::

data-latex="" causes pandoc to pass the flushright through to latex -- without it, quarto regards the fenced block as html only and discards the flushright information.