Multilevel header documents (follow up on the banana cause…)

seth · 2022-09-11 20:38:42

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

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)

lahwaacz · 2022-09-11 20:48:45

seth wrote:

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...

seth · 2022-09-11 21:01:36

Ok, I just went by the unaltered page and assumed (jaja ass u me…) only the index was added.

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.

lahwaacz · 2022-09-12 05:15:06

seth wrote:

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.

Last edited by lahwaacz (2022-09-12 05:15:42)

seth · 2022-09-12 05:25:36

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)

lahwaacz · 2022-09-12 05:32:51

Your post does not seem like an actual proposal. Anyway, I don't see why h4 should be less "bold" or brighter than the following levels and regular bold text. Also underlining h6 and not the previous levels is not an option.

archdub · 2022-09-12 07:10:04

When I am reading long pages on the Arch wiki, I often lose track of where I am in the page, so I go to the top of the page, look at the index, find my whereabouts, and then jump back to where I was. For me personally, smaller improvements in the header size will help little. What I would find more helpful is a two-columns design, where the left narrow column shows the outline of the headings of the document and the main column the text proper.

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/

seth · 2022-09-12 07:16:59

What I would find more helpful is a two-columns design

You mean like https://bbs.archlinux.org/viewtopic.php?id=272718 ?

lahwaacz wrote:

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.

Arch Linux

#1 2022-09-11 20:38:42

Multilevel header documents (follow up on the banana cause…)

#2 2022-09-11 20:48:45

Re: Multilevel header documents (follow up on the banana cause…)

#3 2022-09-11 21:01:36

Re: Multilevel header documents (follow up on the banana cause…)

#4 2022-09-12 05:15:06

Re: Multilevel header documents (follow up on the banana cause…)

#5 2022-09-12 05:25:36

Re: Multilevel header documents (follow up on the banana cause…)

#6 2022-09-12 05:32:51

Re: Multilevel header documents (follow up on the banana cause…)

#7 2022-09-12 07:10:04

Re: Multilevel header documents (follow up on the banana cause…)

#8 2022-09-12 07:16:59

Re: Multilevel header documents (follow up on the banana cause…)

Board footer