Template talk:Heading

Selection of a default

Adam,

Thanks for taking this on; it was not only long overdue but will be increasingly important in the coming months. Getting it "right" from the outset is kind of important and the reason I'm posting this now. What I had thought (until just now) was you already had the whole user-settings to font-size/line-height thing well in hand and was surprised to learn "we" are not nearly on the same page.

First off -- silly me didn't realize H4 is not the [so-called] default here until today but H3 is. I can only assume you concluded that is most logical choice based on the way wikitext/wiki mark-up/etc. has "defined" these heading elements over the years or something. Well -- with few exceptions over the years -- H4 has always been the pseudo-official "default" heading... or failsafe heading or fails gracefully heading.... since [at least in theory if not lore], it's the only heading that "arrives" with both defined & calculated values for font-size as the BODY element's baseline for text should have (see http://w3c.github.io/html-reference/h4.html#h4-display note H4 is the only one without a "font-size" cause it inherits [what should] be the baseline or default value).

This that whole 1.000 em = 16px = font-size: = 1rem = line-height: ≃ 100% thingy I mentioned [poorly] a few days ago. Font-wise, the main difference between typical or baseline Paragraph text and H4's rendered text is H4's text is bold by default; P's is not. Other than that nuance, all that other font-jazz about alignment, decoration and the like are semantics or academic at best. Their respective top & bottom margins, however, do become a concern for us here since the mw markup has trained us all to believe that these heading elements should be "margin crippled" so WP articles are more readable.... and that brings the line-height setting(s) into sharper focus in the process.

That said - can we please agree to use the following <ignoring wiki-mark-up for now>

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }

as the foundation font-size and margin values while moving forward? -- George Orwell III (talk) 03:13, 14 March 2015 (UTC)

That's perfectly fine. I was thinking of changing the default to h2 to, as you say, mimic the headings used as standard for Wikimedia projects, but h4 is good. I've actually spent most of my experimenting time trying to work out what the MediaWiki software is going to do to each of the headings. It was only by accident that I found out the transclusion method makes a difference (I had been looking through the MobileFrontend documentation to see if anything there was the cause). To get back to your point, however, I agree with setting the defaults as you have laid them out here. - AdamBMorgan (talk) 20:42, 14 March 2015 (UTC)

In practical terms: do you think a {{#switch:}} placed before the user-defined formatting would be a good way to set these defaults? I'm not sure what the MediaWiki software is going to be adjusting at every level (or if these are already represented in MediaWiki). I looked for some documentation on that at mw: but have not found anything yet. - AdamBMorgan (talk) 20:47, 14 March 2015 (UTC)

@AdamBMorgan: To be clear... we're looking to make H4 the default in terms of establishing a baseline, having it gracefully render when User: inputs are wrong/missing and the like -- not so much what we expect the most-common usage/values that are likely going to be when folks start using it; that will come later. But thanks! I had hoped you would be rational if not reasonable on that point as I've come to know you to be by now.

In all honesty, all we should be "doing" right now is stripping all 6 of [at least] any auto-underlining taking place as well as the Bold font-weight before coming up with the best approach for how to let User:s "in" past that. Bold & Italics is what the Wikimedia mark-up is good at so let them play and leave those out of all this. Plus, my experience has been the opposite to what one would think; folks don't want to be "locked-in" when it comes to font-weight since not all font-families in use out there render 'somewhat bold' or 'bold & fat' at the same points on the scale of increasing font sizes. I think Margins-to-Line-Height will be where we can be the most proactive and make a ton of predefined settings. The rest is all math for 6 elements and calc() will be useful (ie. width: calc((100% - 50%)/2); gets perfectly centered text with equally impressive L & R margins; try it out)

The other thing I can see taking shape will be the use of .css in some way, shape or form -- if not for anything more than to help in defeating the seeming endless .css blatherings already preset for H1 thru H6 by X developers over the years still coming down from the wmf Core. I had hoped Template:P usage would have evolved enough by now to aid with such .css formulations (wishful thinking). So the biggest hurdle remains; Wikimedia itself and those Users still not willing to part with MonoBook & Co. of skins the way I see it.

More later... -- George Orwell III (talk) 23:01, 14 March 2015 (UTC)

Examples

<h1 class="hdng">Heading level 1</h1>
<h2 class="hdng">Heading level 2</h2>
<h3 class="hdng">Heading level 3</h3>
<h4 class="hdng">Heading level 4</h4>
<h5 class="hdng">Heading level 5</h5>
<h6 class="hdng">Heading level 6</h6>

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 6

---

Note: The result of the font keywords is browser dependant.

<p style="font: caption">The browser font used in captioned controls.</p>
<p style="font: icon">The browser font used in icon labels.</p>
<p style="font: menu">The browser font used in dropdown menus.</p>
<p style="font: message-box">The browser font used in dialog boxes.</p>
<p style="font: small-caption">A smaller version of the caption font.</p>
<p style="font: status-bar">The browser font used in the status bar.</p>

The browser font used in captioned controls.

The browser font used in icon labels.

The browser font used in dropdown menus.

The browser font used in dialog boxes.

A smaller version of the caption font.

The browser font used in the status bar.

---

Something broken

Would the designers of this template please look to fix it. If you look at Page:Amicus brief - Stoneridge v Scientific-Atlanta - California State Teachers’ Retirement System.pdf/24 you will see that it is trying to call

• Template:Heading/Sandbox2/parse based on {{heading|IV.<br />CONCLUSION|n|c|b|lg}}

Thanks — billinghurst sDrewth 06:30, 29 September 2015 (UTC)

Fixed. Fair warning however -- this template never should have given the impression it was ready for "prime time". Without Adam around to work with, development kinda stalled. -- George Orwell III (talk) 23:42, 3 October 2015 (UTC)

CSS removed from Common.css

The following CSS has been removed from MediaWiki:Common.css. I believe it was originally something to do with this template via the hdng class, so I'll leave it here in case it's useful in future.

@media screen {
.mw-body .mw-body-content .hdng { background: none; line-height: normal; margin: 0; padding: 0; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; overflow: hidden; }
.mw-body .mw-body-content h1.hdng { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
.mw-body .mw-body-content h2.hdng { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
.mw-body .mw-body-content h3.hdng { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
.mw-body .mw-body-content h4.hdng { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
.mw-body .mw-body-content h5.hdng { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
.mw-body .mw-body-content h6.hdng { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; border-bottom: medium none currentColor; font-weight: 400; text-decoration: none; font-family: "Linux Libertine",Georgia,Times,serif; }
}

These days, TemplateStyles would allow to inject this CSS without needing to modify side-wide CSS. Inductiveload—talk/contribs 20:55, 11 July 2020 (UTC)