List formatting is broken

Contribute Bug
8

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:

<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.

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\.

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

image
image113×116 2.91 KB

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
image226×122 3.85 KB

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
image208×115 3.36 KB

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

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

image

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.

4 Likes