ordered list always centered in custom float

[JoFAM]

Bug description

If I make a custom float, (ordered) lists are always centered (they inherit from quarto-figure-centered for some reason). Tried to overwrite this centering with different css tags, but they all get ignored.

Steps to reproduce

Example qmd:

---
title: "Bug report"
format: 
  html:
    css: doesntwork.css
crossref:
  custom:
    - kind: float
      reference-prefix: Exercises
      key: exercises
      caption-location: top 
---

## An example

make exercises @exercises-exercises-1

:::{.exerc #exercises-exercises-1}
1. A first exercise.
2. A second exercise.
:::

WIth the following css:

.exerc{
  background-color: rgb(247, 247, 247);
  align-items: left;
  text-align: left;
  align-content: left;
  align-self: left;
}

The background color shows, but all the rest is doing nothing.

Expected behavior

The ordered list in exercises should be left aligned

Actual behavior

The ordered list in exercises is centered

Your environment

RStudio 2023.06.1+524 "Mountain Hydrangea" Release (547dcf861cac0253a8abb52c135e44e02ba407a1, 2023-07-07) for windows Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.06.1+524 Chrome/110.0.5481.208 Electron/23.3.0 Safari/537.36

Edition Windows 10 Enterprise Version 22H2 OS build 19045.4894 Experience Windows Feature Experience Pack 1000.19060.1000.0

Quarto check output

Quarto 1.5.57 [>] Checking versions of quarto binary dependencies... Pandoc version 3.2.0: OK Dart Sass version 1.70.0: OK Deno version 1.41.0: OK Typst version 0.11.0: OK [>] Checking versions of quarto dependencies......OK [>] Checking Quarto installation......OK Version: 1.5.57 Path: C:\Users\jfmeys\AppData\Local\Programs\Quarto\bin CodePage: 1252

[>] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed)

[>] Checking LaTeX....................OK Tex: (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

  Unable to locate an installed version of Python 3.
  Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK Version: 4.3.3 Path: C:/PROGRA~1/R/R-43~1.3 LibPaths:

• C:/Users/jfmeys/AppData/Local/R/win-library/4.3
• C:/Program Files/R/R-4.3.3/library knitr: 1.46 rmarkdown: 2.26

[>] Checking Knitr engine render......OK

[mcanouil]

When working with HTML, you need to use your favourite browser inspect/developer mode to understand the structure of your document and how to change/apply CSS rules.

Below is only one syntax.

---
title: "Bug report"
format:
  html:
    include-in-header:
      - text: |
          <style>
          .exerc {
            background-color: rgb(247, 247, 247);
            &.quarto-figure-center>figure>div {
              text-align: left;
            }
          }
          </style>
crossref:
  custom:
    - kind: float
      reference-prefix: Exercises
      key: exercises
      caption-location: top 
---

## An example

make exercises @exercises-exercises-1

::: {#exercises-exercises-1 .exerc}
1. A first exercise.
2. A second exercise.
:::

The following would also work but !important is usually to be avoided.

.exerc {
  background-color: rgb(247, 247, 247);
}
.exerc ol {
  text-align: left !important;
}

[JoFAM]

@mcanouil thank you. It does work, but I'm not sure whether that's the intended way to do it. If so, I will close the bug.

[mcanouil]

It is always the way to "fix" CSS. Not succeeding to override some rules does not mean there is a bug.

This being said, changing the default rule here has some implications which I did not investigate, so it might be changed in the future but no guarantees there, meaning for the time being, you're only choice is to understand CSS and override the rule.

[JoFAM]

Fair enough. For reference: I played a bit further with CSS and selections, and found that the following also works consistently to define the alignment of all list items and other text in custom float environments:

.exerc{
  background-color: rgb(247, 247, 247);
  & li,p {
    text-align: left;
  }
}

Hence the bug here is my lack of in-depth knowledge of CSS, so I close this again. That said, having more options than float for crossrefs would be really, really nice...

[mcanouil]

Please let the maintainers close if they deem there is nothing to be done.

Regarding CSS, there are many ways to do things as I said, I only suggested one directly inspired from the inspect/developer mode of my browser.

[cscheid]

The bug here is that our CSS shouldn't be centering text at all; we should be using automatic left and right margins instead. This issue is, more or less, the same bug as htmlwidgets having unexpected centered text. I'm not going to close this one because they manifest very differently, but the underlying source is the same.

With that said, it's not an easy fix because we will almost certainly break existing documents when we change the CSS, so we need to do some research and design the fix carefully.