Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-09-06 08:53:58

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

[solved] CSS Counters for nested lists and sections

I’m trying to create a two-level TOC in ordered-list fashion. (There will not be a third level in my needs but maybe in your needs, theoretically):

<ol class="toc1">
  <li>...</li>
  <li>...</li>
    <ol class="toc2">
        <li>...</li>
        <li>...</li>
    </ol>
  <li>...</li>
</ol>

The first level, toc1, should lead with a 0 and begin at 00. The second level, toc2, should begin as a decimal at 1 (i.e. n.1), exactly like this:

00 item
01 item
02 item
     2.1 item
     2.2 item
03 item
etc

My scope is limited: toc1 won’t reach 10, let alone 100, so I’m not worried about things like 010 and 0100 happening. And toc2 will never go beyond n.9, so I’m not worried about things like n.10, n.101, etc. And of course there’s no third level so no need to worry about item like n.1.1, etc.

I could easily use list-style-type:decimal-leading-zero; on toc1 except it doesn’t (re)start at 00, and it auto-adds the trailing point (i.e. 01.). Thus I know I’ll need to use counters, including reset and increment, at both levels of the rules, but I can’t get my head around the examples there.

If I understand what the spec is saying about negatives (and I probably don’t), the first ol elements of each level must get the reset value of -1 (=0), so that the first child in each case begins with 1. But maybe I misunderstand that. After that I don’t know what the heck is going on there.

Anyone have experience in this area? I’m looking at examples on Stack Exchange too and they’re no more clear to me than these specs are.

Offline

#2 2018-09-06 09:13:06

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

That said, I never thought about using counters on article chapters and sections before, as they also show in the specs. That’s interesting. So I guess you can apply them to h1 (etc), section, or whatever was expected to be in a series.

Offline

#3 2018-09-06 09:18:00

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

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

How about this example of nested counter on the mozilla developer docs page?

If you open the “codepen” at the end of the article and then modify the css to:

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: "0" counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}
li li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

It does, I think, what you want. Essentially, it’s exactly their example with "0" tacked in front, and then a second CSS directive without the zero for the nested list items.


TXP Builders – finely-crafted code, design and txp

Offline

#4 2018-09-06 09:23:24

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

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

I and short of time to write it up, but see if you can use these old examples.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#5 2018-09-06 09:26:21

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

Quickly testing the MDN one, I only needed to add -1 right here…

ol { counter-reset: section -1;

That handled the numbering perfectly.

I might need to fiddle with spacing. We’ll see.

I’ll look at yours too, phi!

Thanks both.

Offline

#6 2018-09-06 09:52:31

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

This is what I’m using for preference:

/* ToC listing */

/* Reset each ol (section) to '-1' so first child item is '1' */
.toc1, .toc2 {
  counter-reset: section -1;                
  list-style-type: none;
}

.toc1 {padding-left: 0;}

/* Increments toc1 items only and combines digits for each item, separated by a period. */
.toc1 li::before {
  counter-increment: section;
  content: "0" counters(section, ".") " "; 
}

/* Increments toc2 items only and combines digits for each item, separated by a period. */
.toc2 li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

Note you need to specify which list items explicitly with the selector (unlike the MDN example) or all other lists on the page are affected by the increment rules.

Now if I can figure out how to add a selector to the body element for that article only, I could do the same thing for the corresponding numbering on the article headers too.

Offline

#7 2018-09-06 09:56:26

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

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

Destry wrote #313847:

I’m trying to create a two-level TOC in ordered-list fashion. (There will not be a third level in my needs but maybe in your needs, theoretically) […]

Would that help?


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#8 2018-09-06 09:57:56

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

NicolasGraph wrote #313856:

Would that help?

Fashionably late. ;)

Offline

#9 2018-09-06 10:01:27

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

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

Destry wrote #313857:

Fashionably late.

Ok, but with your code above you will have 09, 010 I think; won’t you?


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#10 2018-09-06 10:02:50

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

Oh, maybe. I didn’t check that. My ToC won’t go that high. But that’s a perfectly good thing to be aware of. Thanks!

Offline

#11 2018-09-06 10:04:50

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

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

Destry wrote #313859:

Oh, maybe. I didn’t check that. My ToC won’t go that high. […]

Destry wrote #313847:

My scope is limited: toc1 won’t reach 10 […]

Ah, yes…

Last edited by NicolasGraph (2018-09-06 10:06:32)


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#12 2018-09-06 10:19:01

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,909
Website

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

I’m using your rules, Nicolas. They’re nice and clean. ;)
That trick of adding decimal-leading-zero in the counter is nifty!

Thanks!

Offline

Board footer

Powered by FluxBB