Page MenuHomePhabricator

h4, h5, and h6 headers should not have the same styling
Open, Stalled, LowPublic

Description

Currently the h4, h5, and h6 headers are all styled with the same size and weight and subsequent apparent importance, despite being used on the page to designate a hierarchy of sections. As a result, h4-h6 sections can appear as though they belong to the wrong parent section, confusing readers.

Example:
http://wikimediafoundation.org/wiki/Staff_and_contractors?showall=1

'Product Management' is a subset of 'Product', but due to the skin formatting there is no way to tell when using Vector.


Previous Patches:

Details

Reference
bz70004

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:42 AM
bzimport added projects: Vector, Design.
bzimport set Reference to bz70004.
bzimport added a subscriber: Unknown Object (MLST).
Isarra created this task.Aug 25 2014, 10:10 PM

This changed during the [[mw:Typography refresh]].

The lines at fault are in https://git.wikimedia.org/blob/mediawiki%2Fskins%2FVector.git/HEAD/components%2Fcommon.less
specifically:

h4,
h5,
h6 {
    font-size: 100%; /* (reset) */

This makes it impossible to tell the difference between h4, h5, and h6. https://en.wikipedia.org/w/index.php?title=User:Quiddity/sandbox&oldid=626297051

Note: We used to have this, if I read SVN correctly:
h2 { font-size: 150%;}
h3 { font-size: 132%;}
h4 { font-size: 116%;}
h5 { font-size: 100%;}
h6 { font-size: 80%;}
which wasn't perfect, but it was clearer. (See sandbox diff)

Created attachment 16529
screenshot of the staff page and sandbox

A screenshot of the Staff page (mentioned in comment 0) and the sandbox (linked in comment 1). Taken in Firefox32 in Ubuntu.

Attached:

Change 162304 had a related patch set uploaded by Legoktm:
Make h1-6 sizes consistently different

https://gerrit.wikimedia.org/r/162304

H1-H5 are properly affecting the information hierarchy in the TOC, which seems reasonable to me. I'm not sure I see the value in a proliferation of stylistic differences from H1-H5 beyond what is absolutely necessary.

I certainly don't want to see an instance where H5 or any other header element is smaller than body text, as that would be very odd. Additionally with so many Header styles, the balance between the smallest and largest would be very small (nearly indistinguishable if H1 was a reasonable set size and H5 was limited by the body text.

Additionally as humans we're pretty bad at relative sizes, so when these elements are not directly next to each other (which they really are) the difference in size will already be difficult if not impossible to discern.

Jared, please don't change bug statuses when they already accurately reflect the status of the bug.

(In reply to Jared Zimmerman (WMF) from comment #5)

H1-H5 are properly affecting the information hierarchy in the TOC, which
seems reasonable to me. I'm not sure I see the value in a proliferation of
stylistic differences from H1-H5 beyond what is absolutely necessary.

The ToC is not visible in the body of the page in the Vector skin. The headers are the only visible distinction available when reading the content itself.

I certainly don't want to see an instance where H5 or any other header
element is smaller than body text, as that would be very odd. Additionally
with so many Header styles, the balance between the smallest and largest
would be very small (nearly indistinguishable if H1 was a reasonable set
size and H5 was limited by the body text.

This has been addressed in the related patchset.

Additionally as humans we're pretty bad at relative sizes, so when these
elements are not directly next to each other (which they really are) the
difference in size will already be difficult if not impossible to discern.

That doesn't mean the information should be removed entirely. If folks can tell the difference, then it's potentially useful information to them. If they can't, then they're not going to care about this anyway.

I think status is justified.. During the refresh we experimented with various font sizes and purposely made these all the same size. I wrote that code...

Let's discuss this more but we shouldn't be merging a patch for this without further careful discussion.

(In reply to Jon from comment #7)

I think status is justified.. During the refresh we experimented with
various font sizes and purposely made these all the same size. I wrote that
code...

So what was the reason?

Hi Issara, I changed the status, because I don't agree that there is consensus at this point, and as Jon pointed out this is as designed currently

The rational as far as I remember was partly what I enumerated above, the Header levels are correctly being used as a way of structuring data, and that based on frequency of use on wikis the added complexity of visualizing these at different sizes, with a minimum and maximum of our existing H1s (high end) and body text (low end) that the granularity between these becomes at best meaningless, and at worst visual noise.

Jon feel free to add anything I missed or correct me.

So, to clarify, the reasons for making h4-6 the same were the following:

  • Most projects have no use for h4-6 in the first place
  • Having different styles for h4-h6 might confuse people

Is this correct?

Jorm added a comment.Sep 23 2014, 10:53 PM

Let's not forget that individual wikis can (and should) adjust font weights and styles based on their own need in Common.css. This is particularly true for wikis that use non-Latin scripts (Typography refresh is particularly bothersome in Vietnamese, for instance).

I'm not sure its possible for us to build a "one size fits all" model.l

I, personally, am not seeing any issues. This feels to me like a platform/browser/language interaction bug that should be handled on the local wikis.

I'm not certain there is a need to merge this patch.

(In reply to Brandon Harris from comment #12)

Let's not forget that individual wikis [...] should [...] adjust [...]
Common.css. This is particularly true
for wikis that use non-Latin scripts

Simply not true, sorry. EXTREMELY disturbing to read such a fringe opinion presented as universal truth. Maybe Wikimedia Foundation doesn't, dunno; but MediaWiki supports hundreds languages equally.

You're warmly invited not to misguide the public about the i18n features of MediaWiki without appropriate knowledge of them. Thanks.

General note: This was changed in 1.23.

Also still waiting for a confirmation of why it was done.

Note, LESS could be utilised to allow you to style things differently based on the current language. e.g. use a different font

We can also add different css files to different languages.
It's just never been done yet.
If we want to do that rather than Common.css to solve real issues in other languages I am happy to help with getting those patches merged. ResourceLoader and LESS is a powerful thing that we are not making the best use of.

That can be easily done with plain CSS too, we have quite a few language-specific tweaks in shared.css.

Change 162304 had a related patch set uploaded by Bartosz Dziewoński:
Make h1-6 sizes consistently different

https://gerrit.wikimedia.org/r/162304

Change 164712 had a related patch set uploaded by Isarra:
Adjust header sizes to scale apparent size according to header weight

https://gerrit.wikimedia.org/r/164712

Jaredzimmerman-WMF triaged this task as Low priority.Mar 12 2015, 2:46 AM
Jaredzimmerman-WMF moved this task from Incoming to Triaged on the Design board.

The only reason we have styles for 6 heading tags is because there are 6 heading tags in HTML. If there were 20 heading tags would you want to increment each of them by 0.05em? In real life, headings do not appears immediately next to each other, so humans can only distinguish the sizes if they are significantly different. Since h2, h3, and h4 are by far the most common headers, we optimized for differentiating these 3. h5 and h6 are quite rare and less important to differentiate. Creating a slight graduation between all the headers actually makes it harder to figure out the hierarchy in most cases, not easier.

I recommend marking this as Declined.

The only reason we have styles for 6 heading tags is because there are 6 heading tags in HTML. If there were 20 heading tags would you want to increment each of them by 0.05em? In real life, headings do not appears immediately next to each other, so humans can only distinguish the sizes if they are significantly different. Since h2, h3, and h4 are by far the most common headers, we optimized for differentiating these 3. h5 and h6 are quite rare and less important to differentiate. Creating a slight graduation between all the headers actually makes it harder to figure out the hierarchy in most cases, not easier.
I recommend marking this as Declined.

There are 6 heading tags and believe me or not, somewhere on the Wikipedia, all 6 of them are used. It's clear that finding a convenient solution for this is difficult. But first, let us admit that this is an issue.

@Ankit-Maity Use != Justification of Use

Means potential impact of messing with it, and something to worry about
cleaning up, though. Doesn't mean it can't be done, mind you.

Nirzar added a comment.EditedJun 10 2015, 4:47 AM

That's not what it means :) it means, just because something is used, doesn't justify it's usefulness.
Merely pointing out a fallacy.

Ankit-Maity added a comment.EditedJun 10 2015, 7:01 AM

@Ankit-Maity Use != Justification of Use

Okay, so you're saying that h4-h6 should just be deprecated. Because, just because we use it doesn't mean, its use is justified.

In real life, headings do not appears immediately next to each other, so humans can only distinguish the sizes if they are significantly different.

Actually they do appear right next to each other all the time. If a section has subsections, there often isn't any text between the section heading and subsection heading.

Perhaps someone could generate a table with the percentage of en.wiki articles that include at least one h4 tag, at least one h5 tag, and at least one h6 tag. That would give us a better idea of the potential impact of these changes.

I'm working on it, queries are running for h5/h6

There are 9,207 mainspace pages with h5 headers,
and 438 mainspace pages with h6 headers.

Some articles use templates such as {{TOC limit|5}} to limit what is displayed in the ToC, whilst also keeping the hierarchical nature of the information intact. E.g. https://en.wikipedia.org/wiki/List_of_soccer_clubs_in_Canada has 36 h6 headers (and 13 h5 headers), but none are shown in the ToC.

Here are some non-list articles:
https://en.wikipedia.org/wiki/1118
https://en.wikipedia.org/wiki/11th_Infantry_Regiment_%28United_States%29
https://en.wikipedia.org/wiki/Baltimore_Orioles
https://en.wikipedia.org/wiki/Coriolis_effect
https://en.wikipedia.org/wiki/Linguistic_profiling
https://en.wikipedia.org/wiki/Manny_Pacquiao
https://en.wikipedia.org/wiki/Victoria
https://en.wikipedia.org/wiki/Wedding
https://en.wikipedia.org/wiki/World_War_II_German_uniform

and a few lists:
https://en.wikipedia.org/wiki/List_of_Butterflies_of_Jamaica
https://en.wikipedia.org/wiki/List_of_fish_of_Ireland
https://en.wikipedia.org/wiki/List_of_speed_skaters
https://en.wikipedia.org/wiki/List_of_United_States_Presidents_on_currency
https://en.wikipedia.org/wiki/Taxonomy_of_invertebrates_(Brusca_%26_Brusca,_2003)

Finally, here are some non-mainspace pages:
https://en.wikipedia.org/wiki/Help:Displaying_a_formula
https://en.wikipedia.org/wiki/Help:Multilingual_support_%28Indic%29
https://en.wikipedia.org/wiki/Help:Options_to_hide_an_image
https://en.wikipedia.org/wiki/Wikipedia:1,000_core_topics
https://en.wikipedia.org/wiki/Wikipedia:Blocking_policy
https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility
https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Biographies
https://en.wikipedia.org/wiki/Wikipedia:MOSPHYS

Source / full list:
https://docs.google.com/spreadsheets/d/1ga2d6mCBiUlt2N685_9cq4e_mm8cTJbU2IlENKrkDvc/ (Just mainspace, 9,207 rows)
https://docs.google.com/spreadsheets/d/10QB8DgUMTFiLsEf-59ErTQG9XEX15unIbmrmbM2_F0c/ (all results, very large, 32,000 rows. Much pollution from SPI, SCV, CP, and RfA.) (Note: some of these skip h2 or h3 headers, because they are (or were) transcluded into a central page)

Jdlrobson changed the task status from Open to Stalled.Nov 2 2015, 9:39 PM
Jdlrobson added a subscriber: Jdlrobson.
Catrope removed a subscriber: Catrope.Nov 13 2015, 7:43 PM
Isarra moved this task from Backlog to Scary on the Vector board.Apr 7 2016, 1:05 AM
Isarra moved this task from Scary to Backlog on the Vector board.Apr 7 2016, 1:09 AM
Isarra moved this task from Backlog to Typography on the Vector board.Apr 7 2016, 1:25 AM
Krinkle removed a subscriber: Krinkle.Apr 7 2016, 11:50 PM
Izno added a subscriber: Izno.Apr 9 2016, 1:52 PM
Jorm removed a subscriber: Jorm.Jul 5 2016, 8:10 PM
Quiddity removed violetto as the assignee of this task.Nov 23 2016, 10:42 PM
Quiddity edited subscribers, added: violetto; removed: Jaredzimmerman-WMF, wikibugs-l-list.
Krinkle updated the task description. (Show Details)