Template talk:Hmbox

Message box standardisation

Here are some useful pages:

{{ambox}} – For article message boxes.
{{cmbox}} – For category message boxes.
{{hmbox}} – For hatnote message boxes.
{{imbox}} – For image page message boxes.
{{mbox}} – Has namespace detection, for message boxes that are used on several types of pages thus need to change style depending on what page they are used on.
{{tmbox}} – For talk page message boxes.
{{ombox}} – For other pages message boxes.

Meta pages:

Wikipedia:Article message boxes – The style guideline for creating article message boxes.
Wikipedia:Template messages – Lists most of the article message boxes.

Needs work

There is an closing </div> somewhere that I can't trace, but is evident on the template page documentation. Also, the image is too big and breaks out of the box. The background color should also match the hue of the image. — Edokter (talk) — 10:55, 14 December 2011 (UTC)[reply]

The div problem was the parser deciding to helpfully close the initial div at the first sniff of a line break as usual. I consider the other points to be very trivial aesthetic issues. Does anyone even notice that the background of {{resolved}} "matches the hue of the image"? On my current LCD the distinction is undetectable except in a direct side-by-side comparison. Likewise with the image: previously this template used a slightly smaller image than the majority of similarly-styled bits of code, but the difference with the {{hmbox}} version is only significant if you're looking for it. Chris Cunningham (user:thumperward) (talk) 11:11, 14 December 2011 (UTC)[reply]

It's hard to miss when the bottom of the image is breaking out of the box. And I can see the hue quite clear. You can match them according to the passed class. — Edokter (talk) — 11:36, 14 December 2011 (UTC)[reply]

If the image is breaking out of the box then that's a padding issue; using a small image is just a hack around that. If you want to try tweaking the layout and adding an override for the background hue based on class then you're very welcome. Chris Cunningham (user:thumperward) (talk) 11:45, 14 December 2011 (UTC)[reply]

It's not padding; images are not constrained by div boundaries, no matter how much padding you add. That is why the images have to roughly match text size. — Edokter (talk) — 11:52, 14 December 2011 (UTC)[reply]

But that means either having to allow for manual image resizing (which is one complication that I'd hoped to remove) or to downsize the images for all the boxes which don't use images which so closely push the boundaries of their sizing. Anyway, adding another couple of pixels of padding does seem to have given the tick an adequate amount of clearance, and hasn't too badly impacted any of the other cases. I've also added an override for the background colour. Thoughts? Chris Cunningham (user:thumperward) (talk) 12:00, 14 December 2011 (UTC)[reply]

I've tweaked it a bit further and added an optional imagesize parameter. — Edokter (talk) — 12:18, 14 December 2011 (UTC)[reply]

Why the new full stop for when no additional text is specified? The majority of transclusions didn't previously include a full stop. Chris Cunningham (user:thumperward) (talk) 13:59, 14 December 2011 (UTC)[reply]

(←)You're right. After looking in the history of {{resolved}}, I see the dot isn't needed. — Edokter (talk) — 14:06, 14 December 2011 (UTC)[reply]

The parameter names need to be much more standardised; {{{text}}} is customary for the main message text, for instance. I really dislike the abuse of {{{class}}} both as a CSS class and as a meta-syntax label; it should probably be {{{type}}} and then the CSS class should either be separate or be the one filled via a switch. Happy‑melon 16:17, 14 December 2011 (UTC)[reply]

I agree. We can still change it. — Edokter (talk) — 16:29, 14 December 2011 (UTC)[reply]

Removing the colon

I'd like to remove the colon that appears in the presence of the extra parameter. I know the colon has been there even before all of the resolution templates were rewritten to use {{hmbox}}, but I'm not sure of its exact purpose. In my opinion, it's unnecessarily distracting, and the reader's eye doesn't need an additional clue to notice that there's some text outside of the box. (Pinging {{hmbox}} contributors Thumperward, Edokter, Frietjes, and Rezonansowy; pinging resolution template contributors SMcCandlish and AGK.) APerson (talk!) 16:17, 7 December 2015 (UTC)[reply]

It's an accessability feature to help screenreaders. Without the colon, screenreaders would blurb out the contents as one sentence instead of articulating the box before reading the extra text. -- [[User:Edokter]] {{talk}} 16:49, 7 December 2015 (UTC)[reply]

Yep. I belongs there, as long as there's content after it. — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼ 21:51, 7 December 2015 (UTC)[reply]

I didn't know that it was an accessibility feature - good to know. Thanks! APerson (talk!) 00:54, 8 December 2015 (UTC)[reply]

I came here hoping to find a way to suppress the colon in {{Moved to}} and other such templates where it can cause confusion due to its frequent proximity to another colon which is doing the vital task of separating name space from page name. Could we make the colon transparent? or grey? or the background color? Cheers. —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 01:39, 15 October 2020 (UTC)[reply]

SMcCandlish, does this idea that I posited last month hold any water? Seems like a win to me, but I've learned by now that the ramifications of template modifications go beyond what I typically see. —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 15:19, 23 November 2020 (UTC)[reply]

@JamesLucas: Wouldn't bother me any, though since {{Moved to}} actually links the, uh, link (and the link is colorful, either fully for most people or at least with a luminosity difference for those with color-blindess), this means that the fact colons which are part of the link are different from the colon separating the link from any |extra= content is pretty obvious (that is, I'm not sure this isn't a solution in search of a problem). Example:

Moved to User talk:SMcCandlish § My cat has 6 legs: This page is not for discussion of extra-fast cats.

However, another approach might be to use a thin-space ( ) between the link and the colon following it. Another option would be using a spaced en dash ( – ) instead of a colon. Yet another would be moving the colon (or dash) to appear outside the box, in front of the |extra= text. I'm not sure if either of these would be better than making the colon pale or invisible, and don't feel strongly about one option or another, as long as we don't inadvertently cause either an accessibly problem for screen readers or a hideousness problem for sighted users. — SMcCandlish ☏ ¢ 😼 15:59, 23 November 2020 (UTC)[reply]

Thanks, SMcCandlish. With regards to your color notes, I think you’re right when the link is unvisited and blue, less so when it’s purple. A mere eight pixels of black is hard (at least for my brain) to quickly differentiate from the default visited-link color. Beyond that issue, though, I think Enterprisey was right that ending a boxed message with a colon is inherently confusing because it implies that more content should be expected within the box rather than launching the eye to what comes next. To that end, I’d find the move-the-colon-outside solution to be a clear improvement, and if invisibility is too risky, I’d gladly take it. —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 18:00, 23 November 2020 (UTC)[reply]

Works for me, at least in theory, though it's worth seeing some sandboxed examples:

A bunch of test cases:

Original version:

Moved to User talk:SMcCandlish § My cat has 6 legs: This page is not for discussion of extra-fast cats.

Thin-spaced colon (looks like full space in some browsers/fonts); looks very "European" (they're often fond of putting spaces in front of colons):

Moved to User talk:SMcCandlish § My cat has 6 legs : This page is not for discussion of extra-fast cats.

Hair-spaced colon (looks like full space in a handful of browsers/fonts):

Moved to User talk:SMcCandlish § My cat has 6 legs : This page is not for discussion of extra-fast cats.

Invisible colon (would actually require some smarts to match the background automatically):

Moved to User talk:SMcCandlih § My cat has 6 legs: This page is not for discussion of extra-fast cats.

Colon outside (could use some spacing closure between box and colon):

Moved to User talk:SMcCandlish § My cat has 6 legs: This page is not for discussion of extra-fast cats.

Spaced en dash:

Moved to User talk:SMcCandlish § My cat has 6 legs – This page is not for discussion of extra-fast cats.

Spaced en dash outside:

Moved to User talk:SMcCandlish § My cat has 6 legs – This page is not for discussion of extra-fast cats.

Whatchathink? I'm partial to the final one (spaced en dash, outside), though spaced colon outside could work if the space between the box and the colon were reduced. — SMcCandlish ☏ ¢ 😼 20:51, 23 November 2020 (UTC)[reply]

Your pick is my pick too, hands down. —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 22:38, 23 November 2020 (UTC)[reply]

Argh, now I have "John Jacob Jingleheimer Schmidt" stuck in my head. — SMcCandlish ☏ ¢ 😼 15:01, 24 November 2020 (UTC)[reply]

Ya da da da da da da!

BTW, I'm not a template editor, so I'll need you to implement the change…whenever you're not too busy running for public office! (Wishing you success on that front.) —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 22:20, 25 November 2020 (UTC)[reply]

Right. I'm leaving it open a bit, in case others think of an objection, and I'm also looking at various templates that depend on this one, in case of unforeseen issues down the line. — SMcCandlish ☏ ¢ 😼 00:48, 27 November 2020 (UTC)[reply]

My preference precisely, and thanks for the experimentation. If your check for templates depending on this one looks good, I figure we could make the change. Enterprisey (talk!) 08:59, 1 December 2020 (UTC)[reply]

Done. @JamesLucas and Enterprisey: I'm not seeing where this would break anything in dependent templates. — SMcCandlish ☏ ¢ 😼 10:05, 1 December 2020 (UTC)[reply]
PS: See first and last examples at Template:Moved discussion to/doc for some application in a frequently used template. — SMcCandlish ☏ ¢ 😼 10:15, 1 December 2020 (UTC)[reply]

Thank you—the internet is now 0.000000001% less confusing! —jameslucas ^{▄▄▄ ▄ ▄▄▄ ▄▄▄ ▄} 23:04, 1 December 2020 (UTC)[reply]

YW. Unfortunately, Shub Internet will balance this out with a 0.666% increase in the the number of new people per day who are saying wrong things on the Web. — SMcCandlish ☏ ¢ 😼 23:31, 1 December 2020 (UTC)[reply]

Multi-line output

The template does not seem to display when the text wraps over more than one line. For example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

On my browser the line below partially covers the line above. Can this be fixed, or is this template not designed for multi-row output? — Martin (MSGJ · talk) 14:30, 11 July 2016 (UTC)[reply]

~~I agree with you that the template should be fixed for multi-row output.~~ I made a few testcases that test multi-row and single-row cases, which should help with the sandbox work. Enterprisey (talk!) _{(formerly APerson)} 01:27, 12 July 2016 (UTC)[reply]

Actually, on second thought, I can't think of any use cases that would really need the multi-line functionality. I can't think of any way that the template would "look right" with multiline text inside the box. Enterprisey (talk!) _{(formerly APerson)} 01:36, 12 July 2016 (UTC)[reply]

Yeah, the main reason for |extra= in the first place is for free-form annotations (e.g. rationales for a particular decision) that might run more than one line. The identifier of action/result type within the box should never be anywhere near that long; this is not the right kind of template for something like that. — SMcCandlish ☏ ¢ 😼 16:03, 23 November 2020 (UTC)[reply]

Derp! I just remembered that {{moved discussion to}} uses this, and it will definitely wrap when there's a long page name plus a long #section name. I've seen it do that (today), and the results aren't that bad. It's still legible. Though ideally there would be a way to improve it. If the text itself is overlapping in some browsers, a tiny bit of CSS padding or margin should fix it. — SMcCandlish ☏ ¢ 😼 00:50, 27 November 2020 (UTC)[reply]

@MSGJ, @Enterprisey, @SMcCandlish: I've fixed this in the sandbox (permalink, testcases) by using an inline div instead of a span. I've styled it so that it should look near identical. What do you think? Tol (talk | contribs) @ 00:34, 24 September 2021 (UTC)[reply]

Huzzah! — SMcCandlish ☏ ¢ 😼 00:54, 24 September 2021 (UTC)[reply]

I like it! Nice work. Enterprisey (talk!) 05:09, 24 September 2021 (UTC)[reply]

Thank you both! I think I'll file an edit request to implement it as long as nobody complains. Tol (talk | contribs) @ 15:39, 24 September 2021 (UTC)[reply]

Template-protected edit request on 24 September 2021

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

Please copy my changes from the sandbox to use an inline div instead of a span:

-From
+To
-<div role="note" style="margin: 1em;" class="{{{class|}}}"><span style="border: 1px solid #aaa; background-color: #{{{{{|safesubst:}}}#switch:{{{class|}}}
+<div role="note" style="margin-left: 1em;" class="{{{class|}}}"><div style="display: inline-block; border: 1px solid #aaa; background-color: #{{{{{|safesubst:}}}#switch:{{{class|}}}
 | resolved   = f9fcf9
 | unresolved = fcf9f9
 | #default   = fcfcf9
-}}; margin-right: 0.5em; padding: 0.5em;">[[File:{{{image|Blank.png}}}|{{{{{|safesubst:}}}#if:{{{imagesize|}}}|{{{imagesize}}}|20x20}}px|link=|alt=]] {{{message|}}}</span>{{{{{|safesubst:}}}#if:{{{extra|}}}| – <span style="font-size: 85%">{{{extra}}}</span>}}</div><noinclude>
+}}; margin-right: 0.5em; padding: 0.3em 0.5em;">[[File:{{{image|Blank.png}}}|{{{{{|safesubst:}}}#if:{{{imagesize|}}}|{{{imagesize}}}|20x20}}px|link=|alt=]] {{{message|}}}</div>{{{{{|safesubst:}}}#if:{{{extra|}}}| – <span style="font-size: 85%">{{{extra}}}</span>}}</div><noinclude>
 {{documentation}}
 <!-- place category and language links on the /doc sub-page, not here -->

Thank you, Tol (talk | contribs) @ 23:49, 24 September 2021 (UTC)[reply]

To editors Tol, Martin, Enterprisey and SMcCandlish:

done. P.I. Ellsworth - ed. ^put'r there 00:30, 25 September 2021 (UTC)[reply]

Thank you! Tol (talk | contribs) @ 00:32, 25 September 2021 (UTC)[reply]

Pleasure! Good work! P.I. Ellsworth - ed. ^put'r there 00:33, 25 September 2021 (UTC)[reply]

Thanks! Tol (talk | contribs) @ 18:23, 25 September 2021 (UTC)[reply]