List numbers rendered incorrectly

Bug
1

Was I able to repro here?

Edit: Yes I was. The first line contains:

12345678.
7 Likes
3

I’m going to render the same list, increasing the start attribute by a place value for each subsequent one:

1. Betsy
1. Tacy
1. Tib
1. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

I’m able to reproduce. It is a CSS issue, in that the default space around ordered lists (<ol>) is normally set to accommodate lower numbers.

I noticed the same lists render differently per theme, so I created a theme component that just added:

ol {
  margin-left: 3em;
}

On the other hand, this also applies to all lists, and when the item is not a large 5+ digit number, the ordered lists look like they have too much space…

Screenshot 2022-04-01 at 12-33-08 Test numbers - Sandbox Discourse Kit

My suggestion: apply a component that matches your use of ordered lists on your site; I think it is rare to excerpt the middle of a very long list of items, and I can’t imagine someone posting lists with 10,000 items without running into character limits. :slight_smile:

I thought maybe there was a way to style it so a given list would always fit, but the numbering in ordered lists is applied as psuedo-element (::marker), and I’m not sure how to do CSS math on those… :thinking:

3 Likes
8

Hey there,

Sorry that you are having an issue with this.

After looking further into it, we have found that this specific issue is a bit of a rarer one so we think that your best solution will be a custom theme-component to modify the css on your site directly.

2 Likes