# List formatting is broken

**URL:** https://meta.discourse.org/t/list-formatting-is-broken/309995
**Category:** Bug
**Created:** [May 30, 2024, 4:15pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995 "2024-05-30T16:15:47Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Arnold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arnold/32/389492_2.png) [@Arnold](https://meta.discourse.org/u/Arnold)
#### Post date: [May 30, 2024, 4:15pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/1 "2024-05-30T16:15:47Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/1/1/6/11620db21542942b97bf25f4da59951cbe4bc9c0.png)

Example: `* 1932.`

- 
  1. 

Those are suprisingly working: `* 1917-32.`

- 1917-32.

Im using the newest 3.3.0.beta3-dev without any plugins.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [May 31, 2024, 7:13pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/2 "2024-05-31T19:13:45Z")

</div>

- 
  1. testing

- 
  1. second-line test

Markup used

```md
* 1932. test smth
* 1933. again now then 

```

Yeah, I can see the issue but this doesn’t seem to be valid Markdown markup. I tested the above with another Markdown editor and I see a similar issue:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/9/6/89690c82bb7e56c64dfc0358ee2820d3c30cd96c.png)

You can avoid this by omitting the dot after the number. For example:

- 1932 - testing
- 1933 - second-line test

or by excluding the `*` at the beginning:

1. testing
2. second-line test

```md
1932. testing
1933. second-line test

```

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 31, 2024, 7:21pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/3 "2024-05-31T19:21:13Z")

</div>

> [@pmusaraj](#):
>
> or by excluding the `*` at the beginning:
> 
> 1. testing
> 2. second-line test

But that does only work for consecutive years

1. first
2. second
3. third

```plaintext
2008. first 
2014. second 
2015. third

```

Maybe using HTML instead of Markdown also works as an alternative:

- 1997. first
- 2000. second
- 2015. third

```html
<ul>
  <li> 1997. first</li>
  <li> 2000. second</li>
  <li> 2015. third</li>
</ul>

```

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [May 31, 2024, 7:23pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/4 "2024-05-31T19:23:23Z")

</div>

That’s a Markdown limitation too. Tested Github and a few other Markdown editors, they all default to sequential lists.

---

<div class="post-metadata">

### Author: ![Arnold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arnold/32/389492_2.png) [@Arnold](https://meta.discourse.org/u/Arnold)
#### Post date: [May 31, 2024, 10:14pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/5 "2024-05-31T22:14:03Z")

</div>

Removing this margin with css normalizes it.

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/5/5059c92fdee2dffe7932083983580141b5e933af.png)

```plaintext
li>ul, li>ol, .cooked li>ul, .cooked li>ol, .d-editor-preview li>ul, .d-editor-preview li>ol {
    margin: 0; /* Remove this */
}

```

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 3, 2024, 2:16am UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/6 "2024-06-03T02:16:02Z")

</div>

```plaintext
12983298. one
2. test

```

1. one
2. test

Yeah I have seen this before, we do fancy stuff in CSS that breaks this visually for outlier cases.

I think the reason for this was that it can be abused, perhaps @awesomerobot remembers.

---

<div class="post-metadata">

### Author: ![Ed\_S](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_s/32/134015_2.png) [@Ed\_S](https://meta.discourse.org/u/Ed_S)
#### Post date: [June 3, 2024, 12:33pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/7 "2024-06-03T12:33:06Z")

</div>

hmmm, another test:

```plaintext
- 12983298\. one
- 2\. test

```

- 12983298. one
- 2. test

```plaintext
* 12983298\. one
* 2\. test

```

- 12983298. one
- 2. test

Evidently a number followed by a period, even if not the first token on the line, will be seen as a numeric list.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 4, 2024, 3:01pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/8 "2024-06-04T15:01:24Z")

</div>

> [@Arnold](#):
>
> Example: `* 1932.`

This is because in markdown, when a `.` is placed after a number, it’s assumed that it’s an ordered list.

So by using formatting like `* 1932.` you’re generating the HTML:

```xml
<ul>
  <li>
    <ol start="1932">
      <li><!-- item content --></li>
    </ol>
  </li>
  <li>
    <ol start="1933">
      <li><!-- item content --></li>
    </ol>
  </li>
</ul>

```

Technically valid, but strange and unintended.

> [@Arnold](#):
>
> Those are suprisingly working: `* 1917-32.`

This is because when you introduce a `-`, it’s no longer a sequential number, so it’s not an ordered list and the `.` is disregarded.

To avoid this, ideally you’d either use:

`* 1932` (unordered list if numbers aren’t sequential)

_or_

`1932.` (ordered list if numbers are sequential)

If the `.` is necessary, and it’s not an ordered list, you can escape the `.` with a `\` like this:

`* 1932\.`

> [@sam](#):
>
> 1. one
> 2. test
> 
> Yeah I have seen this before, we do fancy stuff in CSS that breaks this visually for outlier cases.

This is a separate issue, and happens with default browser CSS too:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/2/f/82f777f0cbedf6ac20c7bc81bdc70d410a3824d9.png)

The item marker in an HTML list is a pseudo element that gets placed before the list’s padding/margin are considered, so it always appears outside of the content’s “box”. Even when removing the margin/padding from a list, the markers will overflow.

For example, with the margin/padding removed from the list and `overflow: hidden` on the parent container, you don’t see the list markers at all:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/5/c/35c8604d29637da7a9d2eeb422e6586b85f17da5.png)

So anyway, since the padding applied to the left of the list is a static value, and the list markers are placed in a way that falls within the padding, at some point the numbers will overflow.

Our CSS makes lists a little more horizontally compact than the default, and we have both left margin and padding… but the result is essentially the same:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/1/e/91ee5bebf5b305bc4fa66cb05593e4b66eae6da8.png)

There’s some CSS… `list-style-position: inside` that can override the marker positioning, this puts the marker inside the content box. But this means you’d no longer get nice number alignment:

`list-style-position: outside;` (default):

![image](https://global.discourse-cdn.com/meta/original/4X/5/1/b/51b228993a5cd8430d61a23496cabb3d73f60afe.png)

`list-style-position: inside;` (list marker occupies content space)

![image](https://global.discourse-cdn.com/meta/original/4X/f/c/3/fc376ad0807bb33672bbd75317aeaa3655739ac2.png)

So to properly support ordered lists of _any_ length and avoid impacting content alignment, we’d have to do something like… use JS to detect the number of digits in the marker (start from the first number in the list, then count all the list items to determine length) and apply enough padding to accommodate the highest number.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [June 27, 2024, 1:48pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/12 "2024-06-27T13:48:37Z")

</div>

Thank you for the report. We’ve provided a workaround that we believe should help. Right now, we’re not able to fix every edge case and will close this report for now.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [June 27, 2024, 1:48pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/13 "2024-06-27T13:48:40Z")

</div>


