Q: CSS 'counter', 'counter-increment', etc.

[phossler]

My little project is really coming togeather; your explainations have really helped a lot

So I tried emulate a numbering style that I've seen many times:

H1's = Section x
H2's = Chapter x

Except that the H2 counter doesn't get reset to 1 when the H1 changes, and the H1's continue to Increment:

Section 1
Chapter 1
Chapter 2
Chapter 3

Section 2
Chapter 4
Chapter 5
Chapter 6

It looks so easy. I have the H2's continuing to increment, but the H1 counter remains 'stuck' at 1.

Can anyone see what I'm doing wrong, or not doing right?

body
{
counter-reset:h1number;
counter-reset:h2number;
}

h1:before 
{
counter-increment:h1number;
content:"Section# " counter(h1number) " – ";
}

h2:before 
{
counter-increment:h2number;
content:"Chapter# " counter(h2number) " – ";
}

Thanks

Paul

[PeterT]

Try this

body {
    counter-reset: h1number;
}
h1:before {
    content: "Section # " counter(h1number) " - ";
    counter-increment: h1number;  
}
h1 {
    counter-reset: h2number;
}
h2:before {
    content: "Chapter# " counter(h2number) " - ";
    counter-increment: h2number;
}

Based on http://www.w3.org/TR/CSS21/generate.html

[phossler]

Thanks, but that's pretty much where I started, before I tried to be clever

Look at the screen shot which has your CSS. The H1's increment, but the H2's reset to 1 when the H1 changes.

I was trying to get the two counters to run 'independently' without the H2 counter reseting to 1 in the h1 { } so that the H1 counter just count up, and the h2 counters also just count up

So I was trying to get an automated numbering like I saw in some books, and I decided to try getting the counter's to give me:

Section 1
Chapter 1
Chapter 2
Chapter 3

Section 2 <------ should be incremented, but remains = 1 in my CSS
Chapter 4 <----- not reset to 1, but just incremented
Chapter 5
Chapter 6

Section 3 <------ should be incremented, but remains = 1 in my CSS
Chapter 7 <----- not reset
Chapter 8
Chapter 9

If all else fails, I'll go back to the outline numbering that I know works

Paul

[PeterT]

All I can say is that when i tried it worked perfectly. Chapters incremented and reset and sections increased.

Sorry to have wasted your time.

[PeterT]

One final idea... Try

body
{
counter-reset:h1number h2number;
}

Also keep in mind this will ONLY work if the entire book is in a single (x)html file. As soon as you have multiples.... it will reset within each file.

[phossler]

All I can say is that when i tried it worked perfectly. Chapters incremented and reset and sections increased.

Could you attach a small epub so I can see how you did it?

In my test doc with your CSS, the H1's increment, but the H2's reset to 1 within each H1

I was trying to have both the H1's and H2's count up independently with out resetting so I'd end up with something like

Section 1
Chapter 1
Chapter 2
Chapter 3

Section 2
Chapter 4
Chapter 5
Chapter 6

Section 3
Chapter 7
Chapter 8
Chapter 9



Paul

[PeterT]

See attached

Section #1 - One
Chapter #1 - One-One
Chapter #2 - One-Two
Section #2 - Two
Chapter #3 - Two-One
Section #3 - Three
Chapter #4 - Three-One
Chapter #5 - Three-Two
Chapter #6 - Three-Three
Section #4 - Four
Chapter #7 - Four-One

[phossler]

Works well

Thanks for your efforts

Paul

[PeterT]

All I changed was to put the two counter-reset's for body in a single CSS statement....

[Hitch]

Originally Posted by PeterT

One final idea... Try

body
{
counter-reset:h1number h2number;
}

Also keep in mind this will ONLY work if the entire book is in a single (x)html file. As soon as you have multiples.... it will reset within each file.

Yes...I just want to say, as clever as this coding is, and it is, (Gods know, I wish it would work for lists that you need to interrupt and restart, across the board) I seriously hope that this is a VERY short book. ;-) I get the squishies thinking about how this will work if it's a really long, dense, single-file ePUB/MOBI. FWIW.

Hitch

[PeterT]

Hitch; I agree totally with you on that! I will admit though all this does pique my interest in learning more about CSS!

[phossler]

@PeterT --

Also keep in mind this will ONLY work if the entire book is in a single (x)html file. As soon as you have multiples.... it will reset within each file.

@Hitch --

I seriously hope that this is a VERY short book. ;-) I get the squishies thinking about how this will work if it's a really long, dense, single-file ePUB/MOBI. FWIW.

Yea, unfortunately the book that I was trying to cleanup and to fix the formatting on (which I hoped to use non-resetting numbering in) is structured with each chapter in a seperate file.

So the technique works well on the single file epubs but not on the multi-file ones (where it would really make life easier) ... darn. That also explains the situation I was seeing with a larger multi-html file test also

Still, there's going to be times when the technique is useful and will save me some grunt work

Paul

[theducks]

Many a time I have wished for a numbering plugin that worked on consecutive-selected files that would Insert/replace or After a specified pattern.

The tool would also allow choice of numbering styles:
1)Arabic, II)Roman, Three)Text
with an optional user supplied Prefix string: eg. Chapter, Part, Section

I just don't trust Calculated on the fly Chapter heading. 1 glitch and the TOC or other reference goes horribly wrong.

<ol>'s are already notoriously erratic