List numbers rendered incorrectly

Contribute Bug

AI-generated summary

The issue of list numbers being rendered incorrectly has been discussed. The problem arises when list numbers exceed 5 digits, causing inconsistent spacing. ljpp attempted to reproduce the issue and found it to be a CSS-related problem. maiki investigated further and suggested a custom theme component to adjust the CSS, proposing to add ol { margin-left: 3em; }. However, this solution may add too much space to shorter lists. jordan-vidrine confirmed that this is a rare issue and recommended creating a custom theme component to modify the CSS directly.

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
Screenshot 2022-04-01 at 12-33-08 Test numbers - Sandbox Discourse Kit636×208 3.67 KB

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