How to create multi-numbered outline

[Dekurage]

How can I create a multi-numbered outline?

I’m trying to create an outline with an numbered list that has multiple numbers like so:

• • 1.1.
  • 1.2.
    • 1.2.1
    • 1.2.2
    • 1.2.3
  • 1.3.
    • 1.3.1
    • 1.3.2

(Without the bullets)

This list should automatically update its numbers when an item is added or removed.

Is this in any way supported? Are there any plug-ins, themes or snippets that solve this?
I couldn’t find anything after a while of searching.
Any help would be appreciated very much!

[holroy]

Some questions trigger me more than others, and especially if they ask for something which I don’t know how to do, but I do believe is doable. Like this one, I was sure I’ve seen something like this, but I’m not that well versed in CSS, so I couldn’t tell how to do it immediately. However, with some googling and playing around I came up with the following CSS-code:

.markdown-preview-section ol>li::marker {
  content: counter(list-item) "\A0"
}

.markdown-preview-section ol>li ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

.markdown-preview-section ol>li ol>li ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

.markdown-preview-section ol>li ol>li ol>li > ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

To get this to work you need to add the CSS code above into its own file, and store it in ..vault../.obsidian/snippets/someName.css, and then go to Obsidian settings > Appearance (and at the end there) > someName and enable that CSS-snippet.

Which produced the following output:

Source editing to the left, and reading view to the right. More care could surely be taken to produce nicer output. (Most of this answer by the way is based upon the following Webmasters Stack Exchange answer: css - Numbered list with subclauses - Webmasters Stack Exchange)

Hope this helps!

[Dekurage]

Oh wow that’s amazing!

That is really helpful, thanks a lot for the work you put in.

Just what I was looking for and that snippet is also very concise, if I want to adjust something I got a good idea on what to change now.

Still feels a bit weird to me that Obsidian has no official support for outlines that use multiple numbers per row, might it be worth to do a feature request for it? Couldn’t find an existing request for it in a quick search.

[macrospect]

This is great! Does anyone know if it’s possible to get this effect to show up in Live Preview mode? Currently it’s only showing up for me in Reading mode.

[Rainforest]

thanks for your solution. It is working on the macOS application. I don’t test windows so far, but the solution isn’t working for iOS.
I can see the .css file in the settings and I can activate it, but the rendering is not changed on iOS. Is there a way to fix this?

[holroy]

Sadly I don’t have any iOS devices capable of running Obsidian, and I don’t know enough of what the differences might be causing it not work on iOS.

Maybe some of the more CSS savvy people having an iOS device can look into it?

[ariehen]

holroy,

Unfortunately it doesn’t seem to be working on iOS for me either (Obsidian 1.4.3 (95)). I’ve seen some folks not able to get snippets working on iOS, but this is the first time for a snippet to work on desktop and straight up not work on mobile (for me anyway).

I tried in restricted mode, default theme, and added .markdown-preview-view {color: blue;} to the snippet to verify the css file was valid and being read (that works). Also quickly tried a combination of .is-mobile, .is-phone, but as expected no success there (these are for targeting/isolating mobile only). Not sure