Formatting the TOC in a book with CSS

[mickmcq]

Description

I'm trying to format the TOC in a book with CSS but I can't figure out how.

I have chapter numbers left aligned in the sidebar but I would like them to be "decimal" aligned. That is, when I reach chapter 10, I want the 1 to stick out on the left side, rather than being aligned with the single digits above. I tried changing ol to decimal alignment but that simply added a numbered list outside the chapter number box. I also tried to add padding to the chapter number but that seemed to have no effect.

I also would like the chapter titles in the sidebar to have a hanging indent, so that a long title that extends to a second line, aligns with the above text rather than aligning with the above chapter number.

I tried to examine using the inspector, but found it indecipherable. I realize that I need to learn more to get more precise results, but would appreciate help on these two items as a stopgap.

[mcanouil]

Your best chance is to use your favourite browser "inspect/developer mode" and fiddle with CSS.
As this is not really about Quarto, you'll also have better chances asking this on a platform more dedicated to HTML/CSS.

[mickmcq]

Thanks for your reply. I have to admit that I tried to use "inspect/developer mode" and fiddle with CSS as I mentioned in the original issue, but without success.

I understand your concern that this might be a HTML/CSS issue, but I feel that it is a Quarto issue because this is the default format for Quarto HTML books. This default format looks kind of amateurish compared to, say, LaTeX/PDF default formats that do decimal align numbers and offer a fairly easy way to hang indent list items. It would be wonderful, for instance, to have an option like sidebar-hang-indent that I could set in the _quarto.yml file.

[mcanouil]

Do you have an actual example to work with?

[mickmcq]

Thank you for your reply. I would love to add a minimal reproducible example, but I'm not sure what I would need to include. The actual book I'm working on is available on the web at https://mickmcquaid.com/cli and is on github at https://github.com/conpackverse/modules. But the behavior I'm talking about is the default behavior for all Quarto books, so really any book with numbered chapters will exhibit it, as far as I know.

[mcanouil]

From my understanding you need 10+ chapters, which is not the default so it's way easier to work with something that already exist.

[mickmcq]

Okay, so my _quarto.yml file looks like this:

project:
  type: book

book:
  title: "Welcome to the Command Line"
  author: "Mick McQuaid"
  date: today
  chapters:
    - index.qmd
    - macSetupIntelFull.qmd
    - macSetupIntelMinimal.qmd
    - macSetupM1Full.qmd
    - macSetupM1Minimal.qmd
    - whyCLI.qmd
    - whyVIM.qmd
    - unixNature.qmd
    - man.qmd
    - terminal.qmd
    - macGeneral/iTerm.qmd
    - bash.qmd
    - tmux.qmd
    - bearings.qmd
    - fileIO.qmd
    - fileManipulation.qmd
    - textManipulation.qmd
    - vim.qmd
    - macGeneral/macDotFiles.qmd
    - macGeneral/macVim.qmd
    - references.qmd
format:
  html:
    theme: cosmo
    grid:
      sidebar-width: 350px
bibliography: master.bib
mainfont: Tex Gyre Schola
monofont: JetBrainsMono Nerd Font
mathfont: Tex Gyre Schola Math

Do you want to see the text in the associated .qmd files? I'm really not sure what would constitute a minimal reproducible example here.

As I mentioned, all the files are on github at https://github.com/conpackverse/modules

[dragonstyle]

I see how a sidebar like yours would like nice with this treatment.

Imagining the sidebar in your project with properly decimal aligned chapters and a hanging indent - would you expect the 'preface' and 'references' heading to align with the chapter titles (not the chapter numbers)?

[mickmcq]

I didn't think of that but it would certainly look nicer to have the preface and references align with the titles!

[dragonstyle]

I was tinkering a bit with CSS and that was one of the issue I ran into.

This got it in the neighborhood, though there still needs to be some tweaking. I was just including this in the format key of my _quarto.yml file to make hacking easy:

format:
  html:
    include-in-header:
     text: |
        <style>
        #quarto-sidebar .menu-text {
          display: flex;
        }
        #quarto-sidebar .chapter-number {
          display: block;
          width: 1em;
          text-align: right;
        }
        #quarto-sidebar .chapter-title {
          display: block;
          padding-left: 10px;
          text-indent: -10px;
          width: 100%;
        }
        </style>

[mickmcq]

Thank you so much! I applied this with slightly different numbers and it gets me most of the way there. I still have to figure out why the chapter titles are of differing widths, but I think that is a minor issue.