Textpattern CMS

#25 2018-09-07 17:05:59

Destry

Member

From: Haut-Rhin

Registered: 2004-08-04

Posts: 4,909

Website

Re: [solved] CSS Counters for nested lists and sections

Thank you, Jakob. You’ve captured it perfectly. The points about taking a break and picking up the apples is right. I find I want to do more and more ‘manual’ things. Analog things, if you will. Elbow grease things.

Anyhoo… I’m in home stretch here. One little bugaboo to figure.

Here’s my collective set of CSS so far:

/* ToC 'item' ordering, two levels */
.toc1, .toc2 {list-style: none;}
.toc1 {counter-reset: item -1; padding-left: 0;}
.toc1 li {counter-increment: item;}
.toc1 li::before {content: counter(item, decimal-leading-zero) ' ';}
.toc2 {counter-reset: item;}
.toc2 li::before {content: counters(item, '.') ' ';}

/* Page 'section' ordering in sync with ToC */
.a3 {counter-reset: section -1;}
.a3 h2::before {counter-increment: section; content: counter(section, decimal-leading-zero) ' ';}
/*.a3 h3 {counter-reset: section;}*/
.a3 h3::before {content: counters(section, '.') ' ';}

The top part for the ToC items is working nicely. We can now ignore that from here on. The bottom part which aims to match the ordering on the section headers is almost there, but the next-to-last line is not right (which is why it’s commented out).

Here’s a sample list as wanted:

00 text
01 text
02 text
. . .
04 text
  4.1 text
  4.2 text
  . . .
05 text
06 text
etc

But what I’m getting so far with the CSS above is just this:

00 text
01 text
02 text
. . .
04 text
  4 text
  4 text
  . . .
05 text
. . .

So you can see on the h3 sections, I need the trailing n.1, n.2, etc.

But if I uncomment that line, which I just intuitively pulled from the how the ToC rules work, I get this:

00 text
01 text
02 text
. . .
04 text
  4.0 text
  4.0 text
  . . .
01 text
01 text
  4.0 text
  4.0 text
  . . .
01 text

It seems to break the counter from that point down. All h2 at that point become 01 and all h3 become 4.0.

Now sure how to get the h3s ironed out.

#26 2018-09-08 08:29:29

Destry

Member

From: Haut-Rhin

Registered: 2004-08-04

Posts: 4,909

Website

Re: [solved] CSS Counters for nested lists and sections

Success!

Say what you will about W3Schools.com (the bane of Stardardistas and a tracking scourge like most sites), but it continues to be better and better as a markup reference and tutorial site. I looked high and low on the web for clarity on this problem, and then I found this, which has the exact situation I need under ‘Nesting Counters’ (for sections), and with a couple of adjustments in the testing tool, it spit out these lines, which work perfectly.

/* Page 'section' (h2) and 'subsection' (h3) ordering in sync with ToC */
.a3 {counter-reset: section -1;}
.a3 h2 {counter-reset: subsection;}
.a3 h2:before {
  counter-increment: section; 
  content: counter(section, decimal-leading-zero) ' ';
}
.a3 h3:before {
  counter-increment: subsection; 
  content: counter(section) "." counter(subsection) ' ';
}

Before that resource, I had stumbled on this old tutorial from quite a while back, which seemed to have a similar relevant solution under the ‘Using two or more counters’ section, but it didn’t work at all, and I spent too much time last night trying to understand why not.

I don’t care anymore. W3Schools to the rescue!