Enhance numbered lists #564

New Issue

Closed

opened 2026-02-04 21:01:54 +03:00 by OVERLORD · 19 comments

OVERLORD commented 2026-02-04 21:01:54 +03:00

Owner

Copy Link

Originally created by @faelz on GitHub (Jan 30, 2018).

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.

Originally created by @faelz on GitHub (Jan 30, 2018). 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.

OVERLORD added the ☕ Open to discussion🎨 Design labels 2026-02-04 21:01:54 +03:00

OVERLORD closed this issue 2026-02-04 21:02:03 +03:00

OVERLORD commented 2026-02-04 21:02:08 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Feb 2, 2018):

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.

@ssddanbrown commented on GitHub (Feb 2, 2018): Thanks @faelz for the suggestion. This can be achieved right away by adding the following to the 'Custom HTML head content' setting: ```html <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.

OVERLORD commented 2026-02-04 21:02:10 +03:00

Author

Owner

Copy Link

@lithium-ap commented on GitHub (Feb 2, 2018):

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.

@lithium-ap commented on GitHub (Feb 2, 2018): 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.

OVERLORD commented 2026-02-04 21:02:17 +03:00

Author

Owner

Copy Link

@faelz commented on GitHub (Feb 5, 2018):

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

@faelz commented on GitHub (Feb 5, 2018): @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.

OVERLORD commented 2026-02-04 21:02:28 +03:00

Author

Owner

Copy Link

@sorvani commented on GitHub (Feb 20, 2018):

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 commented on GitHub (Feb 20, 2018): 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.

OVERLORD commented 2026-02-04 21:02:35 +03:00

Author

Owner

Copy Link

@sorvani commented on GitHub (Feb 21, 2018):

related #564

@sorvani commented on GitHub (Feb 21, 2018): related #564

OVERLORD commented 2026-02-04 21:02:42 +03:00

Author

Owner

Copy Link

@jdrews commented on GitHub (Jul 1, 2018):

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.

@jdrews commented on GitHub (Jul 1, 2018): 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. ```html <style> ol { counter-reset: section; list-style-type: none; } ol li::before { counter-increment: section; content: counters(section, ".") ". "; } </style> ``` <img width="238" alt="chrome_2018-07-01_00-28-46" src="https://user-images.githubusercontent.com/172766/42131042-d74dab58-7cc5-11e8-9327-d4a55160aa87.png"> 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.

OVERLORD commented 2026-02-04 21:02:54 +03:00

Author

Owner

Copy Link

@amo13 commented on GitHub (Mar 27, 2020):

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:

@amo13 commented on GitHub (Mar 27, 2020): 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: 

OVERLORD commented 2026-02-04 21:02:58 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Mar 28, 2020):

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

@ssddanbrown commented on GitHub (Mar 28, 2020): @amo13 Are you on v0.28.3? Some improvements to nested list spacing was added in v0.28.3.

OVERLORD commented 2026-02-04 21:03:01 +03:00

Author

Owner

Copy Link

@amo13 commented on GitHub (Mar 28, 2020):

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

@amo13 commented on GitHub (Mar 28, 2020): Oh no, I am sorry... I actually missed out on that update. Will try, thank you!

OVERLORD commented 2026-02-04 21:03:14 +03:00

Author

Owner

Copy Link

@amo13 commented on GitHub (Mar 28, 2020):

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.

@amo13 commented on GitHub (Mar 28, 2020): 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.

OVERLORD commented 2026-02-04 21:03:18 +03:00

Author

Owner

Copy Link

@gaufde commented on GitHub (Jan 11, 2023):

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>

@gaufde commented on GitHub (Jan 11, 2023): 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: ```CSS <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> ```

OVERLORD commented 2026-02-04 21:03:26 +03:00

Author

Owner

Copy Link

@rgfischerjr commented on GitHub (Jun 25, 2023):

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

I'm using the following in html head:

`<style>
ol {
counter-reset: item;
}

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;
}

</style>`

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

@rgfischerjr commented on GitHub (Jun 25, 2023): This is still showing up.. so I'm adding a comment / question. I'm using the following in html head: `<style> ol { counter-reset: item; } 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; } </style>` 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??

OVERLORD commented 2026-02-04 21:03:34 +03:00

Author

Owner

Copy Link

@richamc01 commented on GitHub (Feb 1, 2024):

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?

@richamc01 commented on GitHub (Feb 1, 2024): I want to modify this: ```html <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?

OVERLORD commented 2026-02-04 21:03:39 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Mar 1, 2024):

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

@ssddanbrown commented on GitHub (Mar 1, 2024): 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: ```html <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".

OVERLORD commented 2026-02-04 21:03:50 +03:00

Author

Owner

Copy Link

@Limerick-gh commented on GitHub (Mar 8, 2024):

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 commented on GitHub (Mar 8, 2024): 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?

OVERLORD commented 2026-02-04 21:03:53 +03:00

Author

Owner

Copy Link

@Limerick-gh commented on GitHub (Mar 8, 2024):

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>

@Limerick-gh commented on GitHub (Mar 8, 2024): 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. <details><summary>Code</summary> <p> ```html <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> ``` </p> </details>

OVERLORD commented 2026-02-04 21:04:04 +03:00

Author

Owner

Copy Link

@A9G-Data-Droid commented on GitHub (Apr 15, 2024):

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

@A9G-Data-Droid commented on GitHub (Apr 15, 2024): This looks like a good candidate for a feature flag. There could be some list settings where this mode could be turned on.

OVERLORD commented 2026-02-04 21:04:08 +03:00

Author

Owner

Copy Link

@sahps commented on GitHub (Jun 20, 2024):

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, ".") ". ";
}

@sahps commented on GitHub (Jun 20, 2024): I've been using these examples, but I have one issue.  How do I start a new list from 1? <details> <summary>Current style</summary> ```CSS ol { counter-reset: section; list-style-type: none; } tbody, details { contain: style; } ol > li::before { font-weight: 700; counter-increment: section; content: counters(section, ".") ". "; } ``` </details>

OVERLORD commented 2026-02-04 21:04:16 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Sep 7, 2025):

I'm going to go ahead and close this off.
I don't really see it worthwhile adding options as there can be quite a bit of variation in regards to what users desire for their instance, so I think this is best suited to simple customizations as shared above.

@ssddanbrown commented on GitHub (Sep 7, 2025): I'm going to go ahead and close this off. I don't really see it worthwhile adding options as there can be quite a bit of variation in regards to what users desire for their instance, so I think this is best suited to simple customizations as shared above.

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

l10n_development

further_theme_development

release

llm_only

vectors

v25-11

docker_env

drawio_rendering

user_permissions

ldap_host_failover

svg_image

prosemirror

captcha_example

fix/video-export

v25.12.3

v25.12.2

v25.12.1

v25.12

v25.11.6

v25.11.5

v25.11.4

v24.11.4

v25.11.3

v25.11.2

v25.11.1

v25.11

v25.07.3

v25.07.2

v25.07.1

v25.07

v25.05.2

v25.05.1

v25.05

v25.02.5

v25.02.4

v25.02.3

v25.02.2

v25.02.1

v25.02

v24.12.1

v24.12

v24.10.3

v24.10.2

v24.10.1

v24.10

v24.05.4

v24.05.3

v24.05.2

v24.05.1

v24.05

v24.02.3

v24.02.2

v24.02.1

v24.02

v23.12.3

v23.12.2

v23.12.1

v23.12

v23.10.4

v23.10.3

v23.10.2

v23.10.1

v23.10

v23.08.3

v23.08.2

v23.08.1

v23.08

v23.06.2

v23.06.1

v23.06

v23.05.2

v23.05.1

v23.05

v23.02.3

v23.02.2

v23.02.1

v23.02

v23.01.1

v23.01

v22.11.1

v22.11

v22.10.2

v22.10.1

v22.10

v22.09.1

v22.09

v22.07.3

v22.07.2

v22.07.1

v22.07

v22.06.2

v22.06.1

v22.06

v22.04.2

v22.04.1

v22.04

v22.03.1

v22.03

v22.02.3

v22.02.2

v22.02.1

v22.02

v21.12.5

v21.12.4

v21.12.3

v21.12.2

v21.12.1

v21.12

v21.11.3

v21.11.2

v21.11.1

v21.11

v21.10.3

v21.10.2

v21.10.1

v21.10

v21.08.6

v21.08.5

v21.08.4

v21.08.3

v21.08.2

v21.08.1

v21.08

v21.05.4

v21.05.3

v21.05.2

v21.05.1

v21.05

v21.04.6

v21.04.5

v21.04.4

v21.04.3

v21.04.2

v21.04.1

v21.04

v0.31.8

v0.31.7

v0.31.6

v0.31.5

v0.31.4

v0.31.3

v0.31.2

v0.31.1

v0.31.0

v0.30.7

v0.30.6

v0.30.5

v0.30.4

v0.30.3

v0.30.2

v0.30.1

v0.30.0

v0.29.3

v0.29.2

v0.29.1

v0.29.0

v0.28.3

v0.28.2

v0.28.1

v0.28.0

v0.27.5

v0.27.4

v0.27.3

v0.27.2

v0.27.1

v0.27

v0.26.4

v0.26.3

v0.26.2

v0.26.1

v0.26.0

v0.25.5

v0.25.4

v0.25.3

v0.25.2

v0.25.1

v0.25.0

v0.24.3

v0.24.2

v0.24.1

v0.24.0

v0.23.2

v0.23.1

v0.23.0

v0.22.0

v0.21.0

v0.20.3

v0.20.2

v0.20.1

v0.20.0

v0.19.0

v0.18.5

v0.18.4

v0.18.3

v0.18.2

v0.18.1

v0.18.0

v0.17.4

v0.17.3

v0.17.2

v0.17.1

v0.17.0

v0.16.3

v0.16.2

v0.16.1

v0.16.0

v0.15.3

v0.15.2

v0.15.1

v0.15.0

v0.14.3

v0.14.2

v0.14.1

v0.14.0

v0.13.1

v0.13.0

v0.12.2

v0.12.1

v0.12.0

v0.11.2

v0.11.1

v0.11.0

v0.10.0

v0.9.3

v0.9.2

v0.9.1

v0.9.0

v0.8.2

v0.8.1

v0.8.0

v0.7.6

v0.7.5

v0.7.4

v0.7.3

0.7.2

v.0.7.1

v0.7.0

v0.6.3

v0.6.2

v0.6.1

v0.6.0

v0.5.0

Labels

Clear labels

🎨 Design

📖 Docs Update

🐛 Bug

🐛 Bug

:cat2:🐈 Possible duplicate

💿 Database

☕ Open to discussion

💻 Front-End

🐕 Support

🚪 Authentication

🌍 Translations

🔌 API Task

🏭 Back-End

⛲ Upstream

🔨 Feature Request

🛠️ Enhancement

🛠️ Enhancement

🛠️ Enhancement

❤️ Happy feedback

🔒 Security

🔍 Pending Validation

💆 UX

📝 WYSIWYG Editor

🌔 Out of scope

🔩 API Request

:octocat: Admin/Meta

🖌️ View Customization

❓ Question

🚀 Priority

🛡️ Blocked

🚚 Export System

♿ A11y

🔧 Maintenance

> Markdown Editor

No Label 🎨 Design ☕ Open to discussion

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

OVERLORD

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#564