Wiki numbering problem

holytrousers · 2023-10-27 10:41:23

The navigation pane (correctly) numbers headers this way :

1
1.1
1.2
1.2.1
1.2.2
2
2.1
2.2
2.2.1
2.2.2

The numbering scheme inside the main document ignores nesting and headers are numbered continuously :

1
1.1
1.2
1.2.1
1.2.2
2
2.3
2.4
2.4.3
2.4.4

Is this a feature or a bug ?

lahwaacz · 2023-10-27 14:01:12

On which page? What is your browser? The numbers in the document are assigned via advanced CSS and there might be some incompatibility.

holytrousers · 2023-10-27 14:25:50

This happens on all webkit based browser (surf, luakit ...)

holytrousers · 2023-10-27 14:32:40

i think adding this to css

h2 { counter-reset: h3-section}
h3 { counter-reset: h4-section}
h4 { counter-reset: h5-section}
h5 { counter-reset: h6-section}
...

could fix that issue.

lahwaacz · 2023-10-27 14:34:10

Then it seems that webkit does not implement counter-set properly.

lahwaacz · 2023-10-27 14:35:41

Note that counter-reset does not work in Chrome and other browsers.

Trilby · 2023-10-27 15:17:56

lahwaacz wrote:

Note that counter-reset does not work in Chrome and other browsers.

The link you provided shows that it does work on all listed browsers in the Browser Compatibility section. Counter-reset certainly works on webengine browsers (qt5/qt6-webengine).

Last edited by Trilby (2023-10-27 15:24:34)

holytrousers · 2023-10-27 15:23:34

counter-reset fixes the issue only on webkit browsers but brakes it for firefox and others ( thay seem to be unable to handle sibling counters )
one solution would be to nest the counters.
Adding some js-code to apply counter-reset for webkit browsers ?
Numbering sections inside the html like the #archnavbar ?

Trilby · 2023-10-27 15:25:59

There is no need to reset sibling counters here. Everything is structured normally in the wiki: each major section should reset the minor section counter(s).

lahwaacz · 2023-10-27 16:04:09

holytrousers wrote:

one solution would be to nest the counters.

Nesting the counters depends on nested HTML elements for sections/subsections in the document, which is not done by MediaWiki.

holytrousers wrote:

Adding some js-code to apply counter-reset for webkit browsers ?

That's unlikely to happen...

holytrousers wrote:

Numbering sections inside the html like the #archnavbar ?

Again, that would mean modifying MediaWiki's HTML formatter. Once upon a time, MediaWiki had autonumbered sections directly in the HTML, but then they removed the feature. See the related discussion.

Last edited by lahwaacz (2023-10-27 16:05:04)

Trilby · 2023-10-27 16:34:33

No nesting is needed, this works as expected in webengine / chromium if the resets are properly placed in the header elements, not in ::before pseudo-elements. E.g., the following works as expected with no actual sections / divs at all to be nested:

<!DOCTYPE html>
<html>
<style>
html { counter-reset: h1-counter; }
h1 { counter-increment: h1-counter; counter-reset: h2-counter; }
h1:before { content: counter(h1-counter) ": "; color: red; }
h2 { counter-increment: h2-counter; counter-reset: h3-counter; }
h2:before { content: counter(h1-counter) "." counter(h2-counter) ": "; color: red; }
h3 { counter-increment: h3-counter; }
h3:before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) ": "; color: red; }
h2 { padding-left: 2em; }
h3 { padding-left: 4em; }
</style>
<body>
<h1>A</h1>
<h2>a</h2>
<h3>alpha</h3>
<h3>bravo</h3>
<h2>b</h2>
<h3>alpha</h3>
<h3>bravo</h3>
<h2>c</h2>
<h1>B</h1>
<h2>a</h2>
<h3>alpha</h3>
<h3>bravo</h3>
<h2>b</h2>
<h3>alpha</h3>
<h3>bravo</h3>
<h2>c</h2>
</body>
</html>

holytrousers · 2023-10-27 18:37:43

I managed to make this work on all browsers :

_::-webkit-full-page-media, _:future, :root h1 { counter-reset: h2-section h3-section h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h2 { counter-reset: h3-section h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h3 { counter-reset: h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h4 { counter-reset: h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h5 { counter-reset: h6-section ; }

the _::-webkit-full-page-media, _:future, :root works only on webkit (safari) browsers causing firefox and chromium etc. to ignore the problematic counter-reset property.
ps: the thread where i found the hack.

Last edited by holytrousers (2023-10-27 18:39:28)

lahwaacz · 2023-10-27 20:26:14

Applying counter-reset on h1-h6 does not work in MediaWiki. Section headings in MediaWiki look like this:

<h2><span class="mw-headline" id="Prerequisites">Prerequisites</span></h2>

At the same time, MediaWiki pages contain other h1-h6 elements where the counters should not reset. The most notable one is h2#mw-toc-heading inside div#toc (in all skins except Vector 2022):

<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading"><input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none">
<div class="toctitle" lang="en" dir="ltr"><h2 id="mw-toc-heading">Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Prerequisites"><span class="tocnumber">1</span> <span class="toctext">Prerequisites</span></a>
...

For this reason, MediaWiki:Common.css in the wiki applies counters on the .mw-headline elements where counter-reset does not work, because the elements are on different level than the headings themselves. You can see this here:

<!DOCTYPE html>
<html>
<style>
html { counter-reset: h1-counter h2-counter h3-counter; }
h1 > .mw-headline { counter-increment: h1-counter; counter-reset: h2-counter; }
h1 > .mw-headline::before { content: counter(h1-counter) ": "; color: red; }
h2 > .mw-headline { counter-increment: h2-counter; counter-reset: h3-counter; }
h2 > .mw-headline::before { content: counter(h1-counter) "." counter(h2-counter) ": "; color: red; }
h3 > .mw-headline { counter-increment: h3-counter; }
h3 > .mw-headline::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) ": "; color: red; }
h2 { padding-left: 2em; }
h3 { padding-left: 4em; }
</style>
<body>
<h1><span class="mw-headline">A</span></h1>
<h2><span class="mw-headline">a</span></h2>
<h3><span class="mw-headline">alpha</span></h3>
<h3><span class="mw-headline">bravo</span></h3>
<h2><span class="mw-headline">b</span></h2>
<h3><span class="mw-headline">alpha</span></h3>
<h3><span class="mw-headline">bravo</span></h3>
<h2><span class="mw-headline">c</span></h2>
<h1><span class="mw-headline">B</span></h1>
<h2><span class="mw-headline">a</span></h2>
<h3><span class="mw-headline">alpha</span></h3>
<h3><span class="mw-headline">bravo</span></h3>
<h2><span class="mw-headline">b</span></h2>
<h3><span class="mw-headline">alpha</span></h3>
<h3><span class="mw-headline">bravo</span></h3>
<h2><span class="mw-headline">c</span></h2>
</body>
</html>

Last edited by lahwaacz (2023-10-27 20:28:19)

holytrousers · 2023-10-29 10:55:11

You're right lahwaacz. How about using the :has() selector to reset counters only on those headers that contain the .mw-headline node.

body { counter-reset: h1-counter h2-counter h3-counter; }
h1:has( > .mw-headline) { counter-increment: h1-counter; }
h2:has( > .mw-headline) { counter-increment: h2-counter; }
h3:has( > .mw-headline) { counter-increment: h3-counter; }
h1:has( > .mw-headline) { counter-reset: h2-counter h3-counter h4-counter h5-counter h6-counter ; } 
h2:has( > .mw-headline) { counter-reset: h3-counter h4-counter h5-counter h6-counter ; } 
h3:has( > .mw-headline) { counter-reset: h4-counter h5-counter h6-counter ; } 
h4:has( > .mw-headline) { counter-reset: h5-counter h6-counter ; } 
h5:has( > .mw-headline) { counter-reset: h6-counter ; } 
h1 > .mw-headline::before { content: counter(h1-counter) ": "; color: red; }
h2 > .mw-headline::before { content: counter(h1-counter) "." counter(h2-counter) ": "; color: red; }
h3 > .mw-headline::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) ": "; color: red; }

:has() works on all major browsers, except on firefox, so combining it with the _::-webkit-full-page-media, _:future, :root selector should make everyone happy :

_::-webkit-full-page-media, _:future, :root h1:has(> .mw-headline) { counter-reset: h2-section h3-section h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h2:has(> .mw-headline) { counter-reset: h3-section h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h3:has(> .mw-headline) { counter-reset: h4-section h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h4:has(> .mw-headline) { counter-reset: h5-section h6-section ; } 
_::-webkit-full-page-media, _:future, :root h5:has(> .mw-headline) { counter-reset: h6-section ; }

lahwaacz · 2023-10-29 11:17:16

Please test it: https://wiki.archlinux.org/index.php?ti … did=791386

holytrousers · 2023-10-29 23:57:27

Works fine now. Thanks !

Arch Linux

#1 2023-10-27 10:41:23

Wiki numbering problem

#2 2023-10-27 14:01:12

Re: Wiki numbering problem

#3 2023-10-27 14:25:50

Re: Wiki numbering problem

#4 2023-10-27 14:32:40

Re: Wiki numbering problem

#5 2023-10-27 14:34:10

Re: Wiki numbering problem

#6 2023-10-27 14:35:41

Re: Wiki numbering problem

#7 2023-10-27 15:17:56

Re: Wiki numbering problem

#8 2023-10-27 15:23:34

Re: Wiki numbering problem

#9 2023-10-27 15:25:59

Re: Wiki numbering problem

#10 2023-10-27 16:04:09

Re: Wiki numbering problem

#11 2023-10-27 16:34:33

Re: Wiki numbering problem

#12 2023-10-27 18:37:43

Re: Wiki numbering problem

#13 2023-10-27 20:26:14

Re: Wiki numbering problem

#14 2023-10-29 10:55:11

Re: Wiki numbering problem

#15 2023-10-29 11:17:16

Re: Wiki numbering problem

#16 2023-10-29 23:57:27

Re: Wiki numbering problem

Board footer