Quarto: How to right justify text in PDF *and* HTML

Question

I'm trying to get Quarto to right justify some text when rendered in both PDF and HTML. But I can only get it to do one or the other, not both. Below is a minimal example, with source code and screenshots of PDF and HTML output. You can see the source code uses LaTeX \begin{flushright} successfully for PDF output, and uses ::: {style="text-align: right"} successfully for HTML output, but the two don't play nice together. Is there some other way?

---
title: "How to right justify both html and pdf"
---

Here is some intitial text in usual left-justified format.

::: {style="text-align: right"}
Attempt 1. This text should be right justified.
:::

\begin{flushright}
Attempt 2. This text should be right justified.
\end{flushright}

::: {style="text-align: right"}
\begin{flushright}
Attempt 3. This text should be right justified.
\end{flushright}
:::

\begin{flushright}
::: {style="text-align: right"}
Attempt 4. This text should be right justified.
:::
\end{flushright}

Here is some *more* text in usual left-justified format.

---

HTML output. Notice only Attempt 1 appears (correctly), but the other attempts don't appear at all:

---

PDF output. Notice Attempt 1 does not work:

Answer 1

When Pandoc¹ starts to convert the markdown document to html format generated by Quarto, it scraps off the latex environment (flushright in this case). That's why you are not seeing the texts within the latex environment in the html output.

Now to get the right aligned text for both latex and html, one neat trick to use the Pandoc Divs (i.e. :::). I would recommend reading this whole section on Pandoc Divs syntax and how it works from Rmarkdown Cookbook for details.

To say briefly, the following div will convert

::: {.flushright data-latex=""}
Attempt 1. This text should be right justified.
:::

to latex output as,

\begin{flushright}
Attempt 1. This text should be right justified.
\end{flushright}

and to html output as,

<div class="flushright">
<p>Attempt 1. This text should be right justified.</p>
</div>

And you can define as many CSS properties as you want for the flushright class.

quarto_file.qmd

---
title: "How to right justify both html and pdf"
format: 
  pdf: default
  html: default
---

```{=html}
<style>
.flushright {
   text-align: right;
}
</style>
```

Here is some intitial text in usual left-justified format.

::: {.flushright data-latex=""}
Attempt 1. This text should be right justified.
:::

Here is some *more* text in usual left-justified format.

---

pdf-output

---

html-output

---

¹ Pandoc is used by Quarto for document conversion, just like R-markdown.