scrollable revealjs slides with Numbered lists <10 are slightly cut off due to indentation

[judgelord]

In Quarto ‘1.9.37’, numbered lists <10, some numbers are still slightly cut off on the left side, with both the global option scrollable: true and for one {.scrollable} slide when viewed in Safari.

Related to #5500, this happens in Safari, but not Firefox or Chrome EDIT for the default theme fonts

EDIT: This same issue happens in Chrome and Firefox with other fonts. Adding to the example below, theme: night or an scss file with just $font-family-sans-serif: 'Nunito Sans'; will produce this issue in Chrome and Firefox.

This also seems related to the fix in #4285 because lists >9 are now indented, and I don't recall seeing this before this issue fix (not sure why this altered the indent for lists <10)

Not sure if this is the same bug or a new one introduced by the fix, but numbered lists with <9 items are now cut off.

Minimal example:

---
format:
    revealjs:
        scrollable: true
---

Renders Incorrect

1. 1
1. 2
1. 3
1. 4
1. 5
1. 6
1. 7
1. 8
1. 9


## 

Renders correctly

1. 1
1. 2
1. 3
1. 4
1. 5
1. 6
1. 7
1. 8
1. 9
1. 10

The second slide renders correctly, but the first has most numbers partially cut off on the left.

Quarto Version 1.5.57

Originally posted by @judgelord in #4283

[mcanouil]

Thanks.
In the future, please use the template: https://github.com/quarto-dev/quarto-cli/issues/new?template=bug_report.yml

[mcanouil]

As you mentioned, the issue is the CSS rule added:

• quarto-cli/src/resources/formats/revealjs/quarto.scss

  Lines 826 to 840 in 23bb687

  	/*
  	https://github.com/quarto-dev/quarto-cli/issues/4283
  	The trick itself is from here:
  	https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has
  	*/
  	.reveal .scrollable ol li:first-child:nth-last-child(n + 10),
  	.reveal .scrollable ol li:first-child:nth-last-child(n + 10) ~ li {
  	margin-left: 1em;
  	}

The intent of the rule is to accommodate the extra width of two-digit list markers (10, 11, ...) so that numbers do not overlap the item text.
For single-digit lists (< 10 items), no compensation is applied, which causes the marker to crowd the text in Safari (Safari renders list padding more tightly than Chrome/Firefox).

As a workaround, you can apply the following rules:

/* replaement rule */
.reveal .scrollable ol {
  padding-inline-start: 2em;
}

/* override current rule in Quarto */
.reveal .scrollable ol li:first-child:nth-last-child(n+10),
.reveal .scrollable ol li:first-child:nth-last-child(n+10) ~ li {
  margin-left: 0;
}

[cscheid]

I think we won't be able to perfectly solve this, in general. The fix we had before was more than a bit of a hack; we don't really know how much extra margin we need to add because that depends on the fonts.

We should probably make it so that the margin we use is defined by a CSS variable that users can override in specific cases.

[mcanouil]

Replacing the complex rule with:

.reveal .scrollable ol {
  padding-inline-start: 2em;
}

Where 2em would be a variable would be the ideal.