Toggle headings numbering

memophen · 1 March 2020 15:47

Do you really want to toggle, like seeing section numbers on working days and not seeing them in the weekends? If you want to make a once-only decision per note, you can easily do it with a class reference in the note you want to decorate with numbers.

Here's my experiment. I conceived a class n- and applied it this way in the style definitions:

body {
  counter-reset: h2counter h3counter h4counter h5counter h6counter;
}

h1 { counter-reset: h2counter h3counter h4counter h5counter h6counter;}
h2 { counter-reset: h3counter h4counter h5counter h6counter;}
h3 { counter-reset: h4counter h5counter h6counter;}
h4 { counter-reset: h5counter h6counter;}
h5 { counter-reset: h6counter;}
h6 {}

.n- h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\A0\A0\A0";
}

.n- h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) "\A0\A0\A0\A0\A0";
}

.n- h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "\A0\A0\A0\A0\A0";
}

.n- h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "\A0\A0\A0\A0\A0";
}

.n- h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) "\A0\A0\A0\A0\A0";
}

(I excluded the H1 level from being numbered, as I use that one as the title of the note.)

My note looks like this:

Numbered headers
================
<div class="n-">

## Level Two
### Level Three
### Nivo Trije
#### Level Four
##### Level Five
###### Level Six
Hello, world!
## Nivo Twa
### Niveau Drie
Hallo, wrâld!

# Nûmere kopteksten
## Niveau Twee
###### Nivo seis
Hallo, wereld!
## Ebene Zwei
###### Niveau Zes
Hallo, welt!
###### Vlak Ses
Hallo, wêreld!

</div>

###### Niveau Six

You can even decide within the note which parts have to be numbered and which parts not (I left "Niveau Six" at the bottom out).

In the future it might even be supported on per header basis:

##### Niveau Cinq {.n-}

tessus · 1 March 2020 18:58

Haha, good one. No, but rather depending on the note. So your approach is a great workaround. Thank you. However, I'd rather use the opposite direction (turning off, instead of turning on).

memophen · 1 March 2020 21:19

That’s simple. Remove all the prefixing .n- selectors from my example above and define an nn (not numbered) class that wipes the numbers out:

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;
}

Now you can (selectively) suppress the numbering in the note by <div class="nn-"> ... </div>.

tessus · 1 March 2020 21:20

Thx. Btw, is there a reason why you use a dash? Namespace thing?

memophen · 1 March 2020 21:22

Exactly. I changed my mind and prefer a single dash suffix now above a prefix that would take at least two characters.

Edit:
I’ve reported my whim here.

tessus · 1 March 2020 22:17

Hmm, I don’t get it to work.

memophen · 2 March 2020 10:22

I built the whole thing in a note yesterday, i.e. with all specific CSS included:

Unnumbered headers
==================
<div class="nn-">

## Level Two
### Level Three
### Nivo Trije
#### Level Four
##### Level Five
###### Level Six
Hello, world!
## Nivo Twa
### Niveau Drie
Hallo, wrâld!

# Nûmere kopteksten
## Niveau Twee
###### Nivo seis
Hallo, wereld!
## Ebene Zwei
###### Niveau Zes
Hallo, welt!
###### Vlak Ses
Hallo, wêreld!

</div>

###### Niveau Six

<style>

body {
  counter-reset: h2counter h3counter h4counter h5counter h6counter;
}

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;
}

h1 { counter-reset: h2counter h3counter h4counter h5counter h6counter;}
h2 { counter-reset: h3counter h4counter h5counter h6counter;}
h3 { counter-reset: h4counter h5counter h6counter;}
h4 { counter-reset: h5counter h6counter;}
h5 { counter-reset: h6counter;}

h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\A0\A0\A0";
}

h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) "\A0\A0\A0\A0\A0";
}

h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "\A0\A0\A0\A0\A0";
}

h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "\A0\A0\A0\A0\A0";
}

h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) "\A0\A0\A0\A0\A0";
}

</style>

And this was the result:

Can you copy my MD to a new note and see if you get the same (no)numbering as in my snapshot? If you have already some (no)numbering CSS in userstyle.css, you should comment that out to avoid interference (or simply temporarily rename userstyle.css).

tessus · 2 March 2020 13:44

Nope, unfortunaetly not (I renamed my userstyle.css). The strange thing is that I get numbering with your code. All my other notes don’t have numbering (since I renamed my userstyle.css):

memophen · 2 March 2020 15:05

I’m puzzled as well. At my side none of the H2…H6 headers are numbered except for the last one, ###### Niveau Six. Both on Windows and macOS, even with userstyle.css renamed. Is the last section ###### Niveau Six at your side numbered?

In fact, my CSS does not switch the numbering for H2…H6 off. It just makes it invisible by the content: none; property. You could try if content: ""; helps (gives the same result at my side). And otherwise you could move the block

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;    /* or content: ""; */
}

to the end of the style specs.

Edit:
Here’s a little experiment to show who wins: the last definition or the most specific one:

Who wins?
=========

##### H5
###### H6

<div class="different">

##### H5
###### H6

</div>

<style>
  .different h5 { color: lightgreen; }
  h5 { color: orange; }
  h6 { color: orange; }
  .different h6 { color: lightgreen; }
</style>

In my case: the first H5/H6 pair is orange, and the second pair green. The most specific has won.

tessus · 2 March 2020 15:29

I moved this to a new topic. We can add the solution to the other topic later.

Yes.

Nope, didn't help.

Hmm, and do you see the < at the end? I'm very confused.

memophen · 2 March 2020 15:33

What if you put the entire <style> block on top of the note?

Edit:
If that does not help (I’m curious if you still see some sharp angle anywhere), add some whitespace between the <style> tags and the content of the CSS block.

In case of failure again, I’m running out of ideas for Joplin. We could try to find a common ground outside Joplin, by trying this HTML file in your browser:

<html>
  <head>
    <style>
      .different h5 { color: lightgreen; }
      h5 { color: orange; }
      h6 { color: orange; }
      .different h6 { color: lightgreen; }
    </style>
  </head>

  <body>

    <h1>Who wins?</h1>

      <h5>H5</h5>
      <h6>H6</h6>

      <div class="different">
        <h5>H5</h5>
        <h6>H6</h6>
      </div>
  
  </body>
</html>

Still 2 × orange + 2 × green here.

tessus · 2 March 2020 15:43

Same output. No change.

tessus · 3 March 2020 20:21

TL;TR

This can’t work. The commonmark specs are quite clear on that.

Joplin apparently allowed some things in the past, which didn’t follow the specs. I’m using git master, you probably 1.0.179.

Explanation

tessus · 3 March 2020 22:43

This is the only way to remove headings numbering on a per-note basis:

<style>
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {content: none;}
</style>

memophen · 4 March 2020 10:16

I don’t want to interfere in the current discussion on Github, but Joplin 1.0.187 certainly behaves different from the CommonMark Spec.

CommonMark:

Joplin 1.0.187:

(Surprising that the <pre> tag does comply, in contrast with other tags.)

BTW, the <details> construction also still works in CommonMark.

tessus · 4 March 2020 17:29

You should. I've added a link to this comment on gh. Things like that should be disseminated.
Btw, a link to the commonmark demo/live editor would be great.

memophen · 4 March 2020 19:44

Oh,that was simple (not overcoming my shyness , but finding the test page). I just clicked on one of the Try It buttons on the specs page. But this is the main entrance.

Topic		Replies	Views
Automated heading number css Lounge	3	979	12 February 2022
[Feature proposal] Numbered titles in MD preview pane? Features	8	2604	22 January 2020
Feature Suggestion for Userstyle CSS Features	3	1294	24 March 2020
Is there a list of css property names? Support	17	2655	14 March 2020
"New to-do" over three lines Support	4	569	1 July 2019

Toggle headings numbering

TL;TR

Explanation

Related topics