[tw5] Heirarchical Numbered Lists

Google Group (Read Only)
#1

I know it can be done with <> (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

#2

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: Quick demo — showcasing…

1 Like
#3

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

1 Like
#4

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