Centering callout contents and/or titles

[cgadal]

By default, the content of callouts, and their titles, are aligned to the left.

How should I proceed to have:

• left-aligned titles, and centered content ?
• centered titles and left-aligned content ?
• both centered ?

Thanks !

[mcanouil]

For html format, you can tweak the CSS.
Depending on what you want you have to modify different CSS classes.

Below I set everything centered for any kind of callout.

---
title: "Untitled"
format: html
include-in-header:
  - text: |
      <style>
      .callout.callout-style-default {
        text-align: center;
      }
      </style>
---

::: {.callout-important}
Something important
:::

If you want to do more custom things, render your document, open it with your favourite browser and use its developper mode (usually, right click and "inspect" menu is available).
See an example

For pdf format, you can add keep-tex: true in your YAML, then open the intermediary tex file.
From there, you'll have to search on the internet what you need from LaTeX to do what you want.
You might need to do the processing with a Lua filter.
There is documentation about Lua in Quarto's documentation and elsewhere on the internet.

[mcanouil]

Thus for revealjs the only way is the "inspect" approach I described in my original reply.
(That's usually my approach even if there are "easier" ways/shortcuts in Quarto)

[cgadal]

After some investigation, I found a few things:

• For some reason simple callout div as rendered as flex container, while default callouts are not, hence the difference in behaviour:

    .callout.callout-style-simple {
      padding: 0em 0.5em;
      border-left: solid #acacac .3rem;
      border-right: solid 1px silver;
      border-top: solid 1px silver;
      border-bottom: solid 1px silver;
      display: flex;  <-------- HERE
    }

    .callout.callout-style-default {
      border-left: solid #acacac .3rem;
      border-right: solid 1px silver;
      border-top: solid 1px silver;
      border-bottom: solid 1px silver;
    }

Commenting display: flex; of .callout.callout-style-simple makes them behave the same way.

Should this be fixed ?
Also rendering in format: html does not lead to display: flex.

I am still unsure of why the titles are not centered though

[cgadal]

@cscheid @mcanouil I'd like to re-open this issue since I think this has not been fixed ?

Also, building on my previous answer, I am not sure how to override the default behavior:

---
format:
  revealjs:
    theme: [black]
    include-in-header:
      - text: |
          <style>
          .callout.callout-style-simple {
            text-align: center;
            display: inline-flexbox;
          }
          </style>
---

## test

::: {style='text-align:center;'}
:::{.callout-note appearance='minimal'}
##### Title

content

:::
:::

::: {style='text-align:center;'}
:::{.callout-note}
##### Title

content

:::
:::

does not change the fact that simple callouts have display:flex.

[mcanouil]

The following should do it:

---
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
          .callout.callout-style-simple {
            display: block;
          }
          </style>
---

## Callouts

:::: {layout-ncol="2"}

::::: {}

::: {.callout-important}
### Title

:::: {style="text-align: center;"}
Content
::::
:::

::: {.callout-important style="text-align: center;"}
### Title

Content
:::

:::: {style="text-align: center;"}

::: {.callout-important}
### Title

Content
:::
::::

:::::

::::: {}

::: {.callout-important appearance="minimal"}
### Title

:::: {style="text-align: center;"}
Content
::::
:::

::: {.callout-important appearance="minimal" style="text-align: center;"}
### Title

Content
:::

:::: {style="text-align: center;"}

::: {.callout-important appearance="minimal"}
### Title

Content
:::
::::

:::::
::::::

@cderv do you think there is a change to be made in revealjs css as the one above?

[cderv]

Regarding previous reported issue

For some reason simple callout div as rendered as flex container, while default callouts are not, hence the difference in behaviour:

I don't know why this is display: flex for simple style callout and not others.

Also rendering in format: html does not lead to display: flex.

Callout CSS for revealjs is specific because it does not have a bootstrap dependency whereas for format: html callouts leverages bootstrap style.

does not change the fact that simple callouts have display:flex.

is display: inline-flexbox; valid ? My devtools console says it is not and I can find it on MZN . Probably using a valid value will work like in @mcanouil example

do you think there is a change to be made in revealjs css as the one above?

If we think this display: flex has indeed no specific meaning for simple callout, then yes we could remove it. I don't know why this style is set... 🤔