Template talk:Diagonal split color box

Latest comment: 2 years ago by YBG in topic Unexpected features
WikiProject iconArticles for creation Template‑class
WikiProject iconThis template was reviewed by member(s) of WikiProject Articles for creation. The project works to allow users to contribute quality articles and media files to the encyclopedia and track their progress as they are developed. To participate, please visit the project page for more information.
TemplateThis template does not require a rating on Wikipedia's content assessment scale.
Note icon
This template was accepted from this draft on 19 September 2019 by reviewer AngusWOOF (talk · contribs).

Diagonal split color box edit

Discussion at Wikipedia_talk:Manual_of_Style/Accessibility#Diagonal_split_color_box AngusWOOF (barksniff) 15:32, 18 September 2019 (UTC)Reply

Lint errors edit

This template is causing lint errors, which are visible from Template:Diagonal split color box/doc:

{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#000|far-corner=W|far-corner-color=#fff}}

expands to

<div style="display:inline-block;vertical-align:middle;font-family:Lucida Console, monospace;background:linear-gradient(to top right,Yellow 49.5%,#aaa 49.5%,#aaa 50.5%,#999 50.5%);line-height:1;border-top:1px solid #999;border-left:1px solid Yellow;border-right:1px solid #999;border-bottom:1px solid Yellow;font-size:0.7em;"><div style="margin:-2px 0px 0px -1px;text-align:left;"><span style="font-size:0.75em;margin:0px;padding:1px 1px 0px 3px;text-align:left;color:
#000;background-color:
#fff;">B</span></div><div style="text-align:center;line-height:0.85;font-size:0.85em;margin:-1px 2px -3px 2px;color:
#f00;">R</div><div style="margin:0px 0px 0px 1px;text-align:right;"><span style="margin:0px -1px 0px 0px;">  </span><span style="font-size:0.75em;margin:0px;padding:0px 1px 0px 2px;text-align:right;color:
#fff;background-color:
#000;">W</div></div></div>

and the markup

<span style="font-size:0.75em;margin:0px;padding:0px 1px 0px 2px;text-align:right;color: #fff;background-color: #000;">

has no closing tag; also there are 4 <div> and 5 </div>; the final </div> should be removed.

A second line in Template:Diagonal split color box/doc with lint errors is

{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|far-corner=B|far-corner-color=#00f}}

but the other examples are working correctly. —Anomalocaris (talk) 01:42, 25 September 2019 (UTC)Reply

OK, I looked at the code and found the error, but it did not show up in my browser. Thanks. 217.162.112.133 (talk) 22:00, 25 September 2019 (UTC)Reply

Unexpected features edit

I discovered a couple of things that surprised me.

When the left text and right text (|3= & |4=) are the same, they are rendered once at the center along the diagonal
   R
L
{{diagonal split color box|Yellow|#999|L | R}}
   
LR
   
{{diagonal split color box|Yellow|#999|LR|LR}}
It appears that the far color box only appears if parameters 3 and 4 are identical.
   
LR
  2
{{diagonal split color box|Yellow|#999|LR|LR|far-corner=2|far-corner-color=#fff}}
   R
L
{{diagonal split color box|Yellow|#999|L | R|far-corner=2|far-corner-color=#fff}}
This does not affect the near corner.
C
LR
   
{{diagonal split color box|Yellow|#999|LR|LR|corner=C|corner-color=#fff}}
CR
L
{{diagonal split color box|Yellow|#999|L | R|corner=C|corner-color=#fff}}
The same results occur if both corners are specified
C
LR
  C
{{diagonal split color box|Yellow|#999|LR|LR|corner=C|corner-color=#000|far-corner=C|far-corner-color=#fff}}
CR
L
{{diagonal split color box|Yellow|#999|L | R|corner=C|corner-color=#000|far-corner=C|far-corner-color=#fff}}

I don't know if these effects are intentional or not, but there does not appear to be any mention of it in the documentation. YBG (talk) 05:30, 20 September 2021 (UTC)Reply