Reboot doesn't reset all headings

[GPHemsley]

The default browser stylesheet for HTML headings has two parts:
https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings

However, Reboot only resets the first part (the bare h1 through h6); it does not reset the second part (h1 through h6 nested inside certain block elements). This results in heading styling being mismatched depending on where they're used.

In order to also reset the second part, this code:

bootstrap/scss/_reboot.scss

Lines 82 to 126 in deb8e3f

	// Typography
	//
	// 1. Remove top margins from headings
	// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
	// margin for easier control within type scales as it avoids margin collapsing.
	%heading {
	margin-top: 0; // 1
	margin-bottom: $headings-margin-bottom;
	font-family: $headings-font-family;
	font-style: $headings-font-style;
	font-weight: $headings-font-weight;
	line-height: $headings-line-height;
	color: $headings-color;
	}
	h1 {
	@extend %heading;
	@include font-size($h1-font-size);
	}
	h2 {
	@extend %heading;
	@include font-size($h2-font-size);
	}
	h3 {
	@extend %heading;
	@include font-size($h3-font-size);
	}
	h4 {
	@extend %heading;
	@include font-size($h4-font-size);
	}
	h5 {
	@extend %heading;
	@include font-size($h5-font-size);
	}
	h6 {
	@extend %heading;
	@include font-size($h6-font-size);
	}

needs to be supplemented with this code:

:is(article, aside, nav, section) h1 { @extend h2; }
:is(article, aside, nav, section) :is(article, aside, nav, section) h1 { @extend h3; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { @extend h4; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { @extend h5; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 { @extend h6; }

:is(article, aside, nav, section) hgroup > h1 ~ h2 { @extend h3; }
:is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h2 { @extend h4; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h2 { @extend h5; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h2 { @extend h6; }

:is(article, aside, nav, section) hgroup > h1 ~ h3 { @extend h4; }
:is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h3 { @extend h5; }
:is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h3 { @extend h6; }

:is(article, aside, nav, section) hgroup > h1 ~ h4 { @extend h5; }
:is(article, aside, nav, section) :is(article, aside, nav, section) hgroup > h1 ~ h4 { @extend h6; }

:is(article, aside, nav, section) hgroup > h1 ~ h5 { @extend h6; }

[ffoodd]

This is only a set of suggestion to user agents, I'm not sure it makes any sense for us.

Headings levels do not vary depending on where they're used (since the document outline algorithm was abandonned before any implementation) so making their styles vary wouldn't reflect the heading structure—thus lead to potential accessibility issues.

Keeping this open to discussions but IMHO this should not be considered.

[GPHemsley]

This is only a set of suggestion to user agents, I'm not sure it makes any sense for us.

It's stronger than a suggestion to user agents that "support the suggested default rendering". Indeed, both Blink and Gecko have some form of this (minus hgroup, apparently) in their default stylesheet:

• https://github.com/chromium/chromium/blob/fc589e8f32ed450c2b22192e3721b5366c7982d2/third_party/blink/renderer/core/html/resources/html.css#L154
• https://hg.mozilla.org/mozilla-central/file/da44efee8b93dc535742c212967740a736987d27/layout/style/res/html.css#l181

Headings levels do not vary depending on where they're used (since the document outline algorithm was abandonned before any implementation) so making their styles vary wouldn't reflect the heading structure—thus lead to potential accessibility issues.

This was news to me.

Further context for those needing it:

• https://html5accessibility.com/stuff/2021/03/21/a-decade-a-year-of-heading-backwards/
• Add heading-focused outlines and :heading whatwg/html#3499 (comment)
• Suggest adding a warning about outline algorithm whatwg/html#83
• Obsolete <hgroup> whatwg/html#6462

[ffoodd]

This is a suggestion, just read the first paragraph:

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents...

Moreover most of your latest links goes in my way: outline algorithm deprecation and hgroup obsolescence (meaning such styles should not exist).

Would you mind providing a HTML only test case with headings in such situations, to compare rendering in browsers?

[GPHemsley]

This is a suggestion, just read the first paragraph:

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents...

That same paragraph ends:

For the purposes of conformance for user agents designated as supporting the suggested default rendering, the term "expected" in this section has the same conformance implications as "must".

And further down:

The CSS rules given in these subsections are, except where otherwise specified, expected to be used as part of the user-agent level style sheet defaults for all documents that contain HTML elements.

---

Moreover most of your latest links goes in my way: outline algorithm deprecation and hgroup obsolescence (meaning such styles should not exist).

Yes, I was providing the references to support your claim about the document outline never having been implemented, and the follow-on implications of that, since I hadn't been aware of that before.

But that doesn't change the reality of the situation about browsers' default stylesheets, which is really what this issue is about.

---

Would you mind providing a HTML only test case with headings in such situations, to compare rendering in browsers?

https://codepen.io/GPHemsley/pen/YzreZow

[mdo]

Reboot's goal is to normalize styles and set consistent expectations about how HTML elements will be rendered across browsers. I don't see us implementing this as it's not something our users expect from either Reboot or Bootstrap. A core tenant is that these components and elements look and behave as intended in as many places (DOM-wise) as possible.