What I would find more helpful is a two-columns design
You mean like https://bbs.archlinux.org/viewtopic.php?id=272718 ?
I don't see why h4 should be less "bold" or brighter than the following levels and regular bold text
Becuse it's still a bigger font. Stop thinking of text and see the text as black bars on white ground.
The amount of dark pixels indicates the layer. Making pixels gray is like dithering and allows to create intermediate steps.
As an example, of what I mean, this [1] is what the FreeBSD handbook looked for many years. It is a single column design. Sometime last year (or the year before) the handbook was changed to a three column format. This is the current look [2]. I am not a huge fan of the new design because it has three columns, I think they overdid it, I would prefer if it had just the left and middle columns. This is what I suggest for the Arch wiki.
I never use the FreeBSD site (or the Arch wiki) on mobile phones, so I have no idea what they look like. Moreover I cannot contribute to get the work done as I don't have the required knowledge. I am just proposing something as an user. :-) Anyway, I love the Arch wiki and will say the obvious that it is the best Linux wiki on the net, so many thanks to the wiki writers and admins!
[1] https://www.freebsdhandbook.com/x11
[2] https://docs.freebsd.org/en/books/handbook/x11/
coloring them like a rainbow
Did you actually read the post? Or try the changes.
The color in the above proposal is a stand-in for the black/white ratio, to imitate changes in font weight in case a semi-bold variant isn't feasible (because it relies on a usable font family) or deemed sufficient.
Oviously don't play clownshow with the hue (strolling in a random uninspired taco-color for the index btw. falls into that category)
]]>The size difference (alone) h3-h6 is too small to be meaningful (10% of 1 em is closing in on a single point) and you need to add a change in a second attribute to make them practically distinguishable.
That's why the auto-numbering was added. Obviously we could highlight the headings differently, e.g. by coloring them like a rainbow, but I guess many people would find that "distracting"...
That said, if you have a better idea, feel free to propose actual changes.
]]>h4/6 being equal is obviously a worse condition, but the same conditions apply:
The size difference (alone) h3-h6 is too small to be meaningful (10% of 1 em is closing in on a single point) and you need to add a change in a second attribute to make them practically distinguishable.
So afaiu from what I understood the original problem is that the header styles become increasinly indistinguishable, as exampled in eg. https://wiki.archlinux.org/title/PipeWi … Wire_sinks
Counting the header sections mostly serves as an indentation to assist the visual structure and is not meant to support the navigation. (?)Status quo ante:
h1: 180%; #222, bottom-border, regular h2: 150%; #222, bottom-border, regular h3: 128%; #222, bold h4: 116%; #222, bold h5: 108%; #222, bold h6: 100%; #222, bold
That's quite wrong, this is the current style and not the original. Without our custom CSS, MediaWiki had 100% font size for all h4-h6...
]]>Status quo ante:
h1: 180%; #222, bottom-border, regular
h2: 150%; #222, bottom-border, regular
h3: 128%; #222, bold
h4: 116%; #222, bold
h5: 108%; #222, bold
h6: 100%; #222, bold
We'll ignore the h1/h2 situation (this isn't perceived as a problem and isn't because there's a 17% drop in font size, 1/3 of the regular font height and also h1 has a special location)
h2 and h3 are very easily distinguishable, because of the different weight and the underline and the size drop is still 15%, 1/4 of the regular font height
h3, h4, h5 & h6 are the troublesomes, because color and weight are equal and the height difference drops below 10% and 1/10 of the regular font height - what is unreliable as visual separator.
=> Adjustments to other attributes must be made, namely weight and color.
Set h4 to semi-bold and so create a visual separation between h3/h4 and h4/h5:
/* h4 semi-bold */
h4 { font-weight:600 !important; }
The size drop between h3/h5 is then sufficient w/ 15% and 1/5 of the regular font height .
This can be stressed by also adjusting the color, eg.
/* h4 semi-bold & brighter*/
h4 {
font-weight:600 !important;
color:#333 !important;
}
Since semi-bold fonts might not be properly rendered on all clilents, alternatively a mere color adjustment (making it lighter) can achieve a similar effect in pixel-darkness-density
/* h4 only, but significantly brighter */
h4 {
font-weight:bold !important; /*this is the default already*/
color:#555 !important;
}
I'm not aware of an h6 case, but the good old true and tested underline might emerge from the days of typewriters to come to the rescue:
h6 { font-weight:normal !important; text-decoration-line:underline !important; text-decoration-color: rgb(162, 169, 177) !important; }
("rgb(162, 169, 177)" picks up the underline color of h1/h2)
]]>