[TW5] What to edit to get numbered Header level

[Philippe Le Toquin]

Hello,

Very new to TW but I am starting to get the hang of it. I have so far been able to get all my answers by searching in this forum or on the web except for this:

I use the header quite a lot and would like them to be numbered. I just can't find how to do it

1 Header1
1.1 Header2
1.1.1 Header3


I could use ordered list but it seems to be the wrong way and it would get confusing when/if I need ordered list under my header.

Is it possible to achieve it? if yes how?

Thanks

[c pa]

The numbering of lists is controlled via style sheets (css)

You can see this with something like this

<style>
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
</style>

# One
## One
## Two
### One
### Two
## Three
#Two
## One
## Two
## Three

to make it work you can embed the stylesheet like I did above, or you can create a tiddler tagged "$:/tags/StyleSheet with the style code

[Danielo Rodríguez]

But that will work for lists, not for headers.. Will it?

[Philippe Le Toquin]

That is my problem. I am happy with the list. I want to have the header doing the same

! H1
!! H2
!!! H3

Is there a way to the adapt the code for the list to the header level?

[Jeremy Ruston]

But that will work for lists, not for headers..  Will it?

Amazingly, modern browsers do allow the CSS list numbering machinery to be applied to any element, including headings:

http://www.2ality.com/2012/01/numbering-headingshtml.html

Best wishes

Jeremy.

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/05403ddd-9146-4a85-b4fd-f3cce9438537%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Philippe Le Toquin]

Hello Jeremy,

I understand that modern browser can do that when you understand CSS but that is my problem. I can't get my head round CSS let alone making something nice out of it.

For example I copied the first code from the link you copied in a new tiddler and gave it the tag "$:/tag/Stylesheet"

And the result is that now all my open tiddler now have a number added in front of the title. I didn't expect that.

And in the content when I used the header level1 (!) then there is no number in front of it. It actually only starts at level 2.

! H1
!!H2
!!H2
! H1
!!H2
!!!H3

gives me

H1
1 H2
2 H2
H1
1 H2
  1.1 H3

I would like H1 to have number one in front as well and preferably not have the title of my tiddler numbered (also I could live with it!)

[c pa]

Phillippe,

After much fiddling. . . here is the stylesheet you want:
div.tc-tiddler-body is the css selector for the tiddler content display area
div.tc-tiddler-preview-preview is the css selector for the preview pane when editing a tiddler

div.tc-tiddler-body, div.tc-tiddler-preview-preview {counter-reset: h1counter;}
div.tc-tiddler-body, div.tc-tiddler-preview-preview h1 {
        counter-increment: h1counter;
        counter-reset: h2counter;
}
div.tc-tiddler-body, div.tc-tiddler-preview-preview h1:before {
        content: counter(h1counter) ".\0000a0\0000a0";
}
div.tc-tiddler-body, div.tc-tiddler-preview-preview h2 {
        counter-increment: h2counter;
        counter-reset: h3counter;
}
div.tc-tiddler-body, div.tc-tiddler-preview-preview h2:before {
        content: counter(h1counter)"."counter(h2counter) ".\0000a0\0000a0";
}
div.tc-tiddler-body, div.tc-tiddler-preview-preview h3:before {
        content: counter(h1counter)"."counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
}

[Philippe Le Toquin]

Brilliant c pa,

There is no way I would have worked that out by myself. The only thing I had to do was to separate the declaration for div.tc-tiddler-body and div.tc-tiddler-preview-preview. If not it would only work for div.tc-tiddler-preview-preview

So here is what I put in my stylesheet tiddler

Is the comma the right to separate the 2 field?

Again thanks a lot It works exactly like I wanted it.

div.tc-tiddler-body {counter-reset: h1counter;}
div.tc-tiddler-body h1 {
        counter-increment: h1counter;
        counter-reset: h2counter;
}
div.tc-tiddler-body h1:before {

        content: counter(h1counter) ".\0000a0\0000a0";
}

div.tc-tiddler-body h2 {
        counter-increment: h2counter;
        counter-reset: h3counter;
}
div.tc-tiddler-body h2:before {

        content: counter(h1counter)"."counter(h2counter) ".\0000a0\0000a0";
}

div.tc-tiddler-body h3:before {

        content: counter(h1counter)"."counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
        counter-increment: h3counter;
}

div.tc-tiddler-preview-preview {counter-reset: h1counter;}

div.tc-tiddler-preview-preview h1 {
        counter-increment: h1counter;
        counter-reset: h2counter;
}

div.tc-tiddler-preview-preview h1:before {
        content: counter(h1counter) ".\0000a0\0000a0";
}

div.tc-tiddler-preview-preview h2 {
        counter-increment: h2counter;
        counter-reset: h3counter;
}

div.tc-tiddler-preview-preview h2:before {
        content: counter(h1counter)"."counter(h2counter) ".\0000a0\0000a0";
}

[Thomas Elmiger]

Very interesting! Here is my variant. I added a class, so titles are only numbered when inside an element with class="nr" (e.g. <div class="nr"> !Title </div>). This does not affect other tiddlers, they keep standard titles. And I made some similar corrections like Philippe mentioned before, I guess.

Thanks a lot and happy numbering!
Thomas

div.tc-tiddler-body .nr, div.tc-tiddler-preview-preview .nr {
   counter-reset: h1counter;
}
div.tc-tiddler-body .nr h1, div.tc-tiddler-preview-preview .nr h1 {
   counter-increment: h1counter;
   counter-reset: h2counter;
}
div.tc-tiddler-body .nr h2, div.tc-tiddler-preview-preview .nr h2 {
   counter-increment: h2counter;
   counter-reset: h3counter;
}
div.tc-tiddler-body .nr h1::before, div.tc-tiddler-preview-preview .nr h1::before {

   content: counter(h1counter) ".\0000a0\0000a0";
}

div.tc-tiddler-body .nr h2::before, div.tc-tiddler-preview-preview .nr h2::before {

   content: counter(h1counter)"."counter(h2counter) ".\0000a0\0000a0";
}

div.tc-tiddler-body .nr h3::before, div.tc-tiddler-preview-preview .nr h3::before {

[Philippe Le Toquin]

I tried your variant Thomas but I am not sure I understand how to use the div in the tiddler.

if I use <div class="nr"> !Title </div> in my tiddler then it gets rendered simply as : !Title
it seems to loose the knowledge it is supposed to be a header.

Edit: after searching on how to use <div> it appears that you need to have an empty after the <div>  and another one before the <div>

<div class="nr">

!Title

</div>

[Thomas Elmiger]

You are right, Philippe, sorry for my incorrect example. You have to use several lines:

<div class="nr">

! Title h1

</div>

2016-09-22 22:00 GMT+02:00 Philippe Le Toquin <phil...@ppmt.org>:

I tried your variant Thomas but I am not sure I understand how to use the div in the tiddler.

if I use <div class="nr"> !Title </div> in my tiddler then it gets rendered simply as : !Title
it seems to loose the knowledge it is supposed to be a header.

On Thursday, 22 September 2016 20:42:30 UTC+1, Thomas Elmiger wrote:

Very interesting! Here is my variant. I added a class, so titles are only numbered when inside an element with class="nr" (e.g. <div class="nr"> !Title </div>). This does not affect other tiddlers, they keep standard titles. And I made some similar corrections like Philippe mentioned before, I guess.

Thanks a lot and happy numbering!
Thomas

div.tc-tiddler-body .nr, div.tc-tiddler-preview-preview .nr {
   counter-reset: h1counter;
}
div.tc-tiddler-body .nr h1, div.tc-tiddler-preview-preview .nr h1 {
   counter-increment: h1counter;
   counter-reset: h2counter;
}
div.tc-tiddler-body .nr h2, div.tc-tiddler-preview-preview .nr h2 {
   counter-increment: h2counter;
   counter-reset: h3counter;
}
div.tc-tiddler-body .nr h1::before, div.tc-tiddler-preview-preview .nr h1::before {
   content: counter(h1counter) ".\0000a0\0000a0";
}
div.tc-tiddler-body .nr h2::before, div.tc-tiddler-preview-preview .nr h2::before {
   content: counter(h1counter)"."counter(h2counter) ".\0000a0\0000a0";
}
div.tc-tiddler-body .nr h3::before, div.tc-tiddler-preview-preview .nr h3::before {
   content: counter(h1counter)"."counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
   counter-increment: h3counter;
}

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/1bnaQU3O3j0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a338b717-dea7-4f18-a30c-d68e8f4b5967%40googlegroups.com.