Jump to content

Template talk:Diagonal split color box

Page contents not supported in other languages.
From Wikipedia, the free encyclopedia

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]