Enhance numbered lists

[faelz]

Desired Feature: subitems in numbered lists should display better.

Expected Behavior

1. Item 1
    1.1 Sutitem 1
        1.1.1 Subsubitem 1
    1.2 Subitem 2
        1.2.1 Subsubitem 1
        1.2.2 Subsubitem 2
2. Item 2
    2.1 Sutitem 1
        2.1.1 Subsubitem 1
    2.2 Subitem 2
        2.2.1 Subsubitem 1
        2.2.2 Subsubitem 2

Current Behavior

1. Item 1
    1. Sutitem 1
        1. Subsubitem 1
    2. Subitem 2
        1. Subsubitem 1
        2. Subsubitem 2
2. Item 2
    1. Sutitem 1
        1. Subsubitem 1
    2. Subitem 2
        1. Subsubitem 1
        2. Subsubitem 2

Steps to Reproduce

Select text. Click on numbered list. Increase ident for subitems.

[ssddanbrown]

Thanks @faelz for the suggestion.

This can be achieved right away by adding the following to the 'Custom HTML head content' setting:

<style>
	ol {
		counter-reset: section;
		list-style-type: none;
	}
	ol li::before {
		counter-increment: section;
		content: counters(section, ".") " ";
	}
</style>

I feel like this is a preference though so not sure if it should be build into BookStack itself. Will mark as 'Open to discussion' and see if anyone has objections. If not, I'll merge it in at some point.

[lithium-ap]

I think it cleaner the way it currently is, my preference tho. Maybe add and make highly visible in the (a) 'customizing bookstackapp' doc area.

[faelz]

@lithium-ap That's a good point. Maybe suboptions for this menu item could solve this issue. Or else doing a doc area for customizing the editor functions.

[sorvani]

I prefer the way it currently is. This suggested method is not something I use with numbered lists. My boss likes the suggested style though. It is certainly a preference thing.

[sorvani]

related #564

[jdrews]

I was able to use "Custom HTML head content" and the snippet @ssddanbrown provided to get this working. However I made a small change so that top level list items have a period (".") at the end of the number.

<style>
	ol {
		counter-reset: section;
		list-style-type: none;
	}
	ol li::before {
		counter-increment: section;
		content: counters(section, ".") ". ";
	}
</style>

Something odd I'm noticing though is that there's a space between a lower level and a top level (upon Shift+Tab to de-indent). This happens regardless of whether custom HTML head content is applied (or if my period fix is applied). Strange.

[amo13]

I also just noticed the odd space added below a numbered list (markdown editor). I tried different arrangements of the numbered and bullet items, but there is always whitespace added below the numbered list or item. What I also noticed here is that the numbered items and the bullet items are not indented the same way. They have different distances from the left margin even though they should belong to the same (sub)level of indentation. See this picture:

[ssddanbrown]

@amo13 Are you on v0.28.3? Some improvements to nested list spacing was added in v0.28.3.

[amo13]

Oh no, I am sorry... I actually missed out on that update. Will try, thank you!

[amo13]

Awesome! The update to v0.28.3 solved the issue with the space below the numbered list.

The only thing left in that regards appears to be the indentation mismatch between unnumbered and numbered lists of the same level. But that is really just a detail ;) I think you can close this issue.

[gaufde]

This shows up in google searches, so I'm going to add another improvement. Using the code above works great, except that lists inside tables and collapsible blocks start at weird numbers if there is a list above the table or collapsible block. Here is a snippet that fixes this:

<style>
	ol {
      		counter-reset: section;
		list-style-type: none;
	}
  	tbody, details {
      		contain: style;
	}
	ol > li::before {
      		font-weight: 700;
		counter-increment: section;
		content: counters(section, ".") ". ";
	}
</style>

[rgfischerjr]

This is still showing up.. so I'm adding a comment / question.

I'm using the following in html head:

`

li {
  display: block;
  content: counters(item, ".") ".\00a0 ";
}

ol li::before {
  content: counters(item, ".") ".\00a0 ";
  counter-increment: item;
}

ol ol li::before {
  content: counters(item, ".") ".\00a0  ";
  counter-increment: item;
}

ol ol ol li::before {
  content: counters(item, ".") ".\00a0  ";
  counter-increment: item;
}

`

The list numbers correctly however when there is a graphic or unnumbered paragraph inserted, the list number restarts at 1. Is it possible to continue the previous numbering after the graphic or paragraph??

[richamc01]

I want to modify this:

<style>
	ol {
      		counter-reset: section;
		list-style-type: none;
	}
  	tbody, details {
      		contain: style;
	}
	ol > li::before {
      		font-weight: 700;
		counter-increment: section;
		content: counters(section, ".") ". ";
	}
</style>

so that the list starts with a number on the first level, then goes to a letter on the second level, and then a bullet on the third level. How would I go about accomplishing this?

[ssddanbrown]

Just sharing this alternate solution I created for someone, which sets nested lists to use alpha characters, but only when the page is tagged in a certain way:

<style>
	.tag-pair-lists-numericalpha .page-content ol { list-style: decimal; }
	.tag-pair-lists-numericalpha .page-content ol ol { list-style: lower-alpha; }
</style>

This can then be used on a per-page basis by adding a tag with name "Lists" and value "numeric alpha".

[Limerick-gh]

Having all these samples is great, especially to have top level number on the sublevels.

Where I am failing is to continue the numbered list if a common paragraph is inserted in between. Like @rgfischerjr was asking for above.

Final use case would be continuous numbering within a table in the first column across the different rows.

Trying to setup a template for step-by-step guides, having numbered instructions in the first column and screenshots in the second column. I thought a table might give a good grid for this, or is there a better approach that someone can recommend?

[Limerick-gh]

I guess I found a way to get it done. At least it's working in my instance. Numbered list counters are reset on table level but do continue within a table across the rows. Probably there are simpler procedures to get it done, since my knowledge on css is quite limited.

Code

<style>
table {
      counter-reset: section;
}

ol {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-left: 0px;
    /*padding-inline-start: 40px;*/
    list-style-type: none;
}
 
 
ol li {
    counter-increment: section;
}
 
ol li::before {
    content: counters(section, ".") ". ";
}
 
/* Reset the counter for nested lists */
ol ol {
    counter-reset: subsection; /* Reset the counter for the second level */
}
 
ol ol li {
    counter-increment: subsection; /* Increment the counter for the second level */
}
 
ol ol li::before {
    content: counters(section, ".") "." counters(subsection, ".") " ";
}
 
li > ol {
  padding-left: 12px;
  }
</style>

[A9G-Data-Droid]

This looks like a good candidate for a feature flag. There could be some list settings where this mode could be turned on.

[sahps]

I've been using these examples, but I have one issue.

How do I start a new list from 1?

Current style

ol {
    counter-reset: section;
    list-style-type: none;
}
tbody, details {
        contain: style;
}
ol > li::before {
    font-weight: 700;
    counter-increment: section;
    content: counters(section, ".") ". ";
}