1424001 - Font size of h1 and h2 inside section article or sidebar are the same

Status: RESOLVED WONTFIX

(Core :: CSS Parsing and Computation, defect)

Description

[John King]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce:

include h1 and h2 tags inside a section


Actual results:

the font-size of both h1 and h2 are the same


Expected results:

h1 should be rendered slightly larger

Comment 1

[jscher2000]

The rule that makes section>h1 the same size as section>h2:

h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css#184
https://dxr.mozilla.org/mozilla-release/source/layout/style/res/html.css#184
https://dxr.mozilla.org/mozilla-esr52/source/layout/style/res/html.css#179

It's unclear why h1 alone is singled out for shrinkage because it can become smaller than h2 with a second level of nesting:

h3,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

https://developer.mozilla.org/docs/Web/CSS/:any

Comment 2

[John King]

The aim probably was to have h1- h6 inside a section (etc) slightly smaller. That makes sense. The problem is that this should be done for all <h?> not only for h1:

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}
h2,
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

/* h3 == (h2 in section) == (h1 in nested section) */
h3,
:-moz-any(article, aside, nav, section)
h2,
:-moz-any(article, aside, nav, section)
:-moz-any(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/* and similar for all other headers */

Comment 3

[Jonathan Kew [:jfkthame]]

FWIW, I see similar behavior in Chrome and Safari.

As far as Firefox is concerned, these rules were added in bug 562835, based on the Sections and Headings section in the HTML rendering spec.[1] Looking at those rules, it appears the headers <h2> etc will only be reduced within a <section> (aside, article, etc) if they're contained (together with the initial <h1>) by an <hgroup>, not if they occur directly within the <section> element.

Currently, we don't seem to have the block of rules involving <hgroup> in the default stylesheet. (Perhaps they're a more recent addition to the spec?) Maybe dbaron can comment on whether we should be including them at this point.

[1] https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Include rules to reduce header sizes when used within an <hgroup> element nested in <article>, <nav>, <aside> etc., as per HTML rendering spec section 14.3.7

This seems to work as expected (simple test is included); should we add these rules to the default stylesheet, or is there a reason we've left them out?

Comment 5

[Jonathan Kew [:jfkthame]]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=9b36052645edaf3963c516c074a127c4a55e0490

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm a little concerned about making changes that would (If I'm interpreting the comments correctly) make our behavior less compatible with that of other browsers.  Do any other engines implement this?  If not, have we talked to them about planning to do so?  (Do they have bugs on file?)

Comment 7

[John King]

Interestingly this behavior is found in Edge, Internet Explorer, Opera as well as Chrome.

W3C defines sections (in https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#headings-and-sections) as constructs that do not extend semantic. Example 28 shows two possible document structures one with and one without section that are both the same. Replacing section with article in the same Example 28 yields the same result. 
And citing https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html :

"Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements (sic), or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content."

(this suggestion is rather confusing as Example 28 applies h2 tags inside sections)

So I guess the jest is that sections and articles share the same properties as the main-tag which only adds an explicit hierarchy where implicitly it is already there. The main-tag was introduce much later in the html5 spec, btw and one can live without it.

Long story short: I suggest to change the status of this issue to wontfix as it complies with one of the more convoluted standards of html5 as it is.

Comment 8

[Jonathan Kew [:jfkthame]]

Yes, after looking into the background further -- in particular, the decision to drop <hgroup> from HTML5 -- I think we should just WONTFIX this.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Jonathan Kew (:jfkthame) from comment #8)
> Yes, after looking into the background further -- in particular, the
> decision to drop <hgroup> from HTML5 -- I think we should just WONTFIX this.

Are you referring to https://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html ?  I'd tend to believe the whatwg spec more than the W3C one, so I think if we think hgroup isn't going anywhere, we should at least file an issue on that spec (if there isn't one already -- but I don't see one based on summaries).