Heirarchical Numbered Lists

[taale...@gmail.com]

I know it can be done with <<toc>> (or so google tells me), and I know CSS  can be used too, but I'm afraid my brain is just not able to figure it out. Help?

Within a tiddler, I want to create an outline using hierarchical numbered lists, as follows:

1. header

1.1. subheading

1.1.1. subsubheading

1.2 subheading

1.2.1 subsub

1.2.2 subsub again

...

15.3.72.4 the very bottom of the list

How the heck do I do that? 

I imagine it's a class (which I can then apply with @@.hnl or whatever), but I am afraid defining that class is beyond me.

Thanks,

Aidan

[springer]

Hello Aidan — the community has basically ported to talk.tiddlywiki.org  (which has a more helpful structure for organizing discussions, posting images and code, etc.)

Folks there can see your message, but can't reply without visiting google. 

Here's a link to a demo site with the css and model tiddler for one way to get this result: https://quick-demo.tiddlyhost.com/#numeric%20hierarchical%20lists

[Aidan Grey]

Thank you so much, on both things! SIgned up, and listed up too

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/tiddlywiki/fddc9af9-4342-4067-bd7f-425cb801aacen%40googlegroups.com.

[Aidan Grey]

So had some issues, but with your help and a little StackOverflow got it sorted:

https://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working

final css class definition:

ol.hnl {  counter-reset: item; }
ol.hnl li {  display: block; }
ol.hnl li:before {  
   content: counters(item, ".") ". ";   
   counter-increment: item;  
   font-weight: bold;
}
ol.hnl ol {  counter-reset: item;}
ol.hnl ol>li {  display: block;}
ol.hnl ol>li::before {  
   content: counters(item, ".") " ";  
   counter-increment: item;  
   font-weight: bold;
}