Template talk:Diagonal split header

Accesibility

It' should be noted that this creates an accessibility issue. A user who has to rely on HTML instead of visual information will not be able to interpret this information easily. —TheDJ (talk • contribs) 09:27, 7 July 2017 (UTC)

@TheDJ: Is there an easy solution for this? The best thing I can think of is adding a title attribute for the column header and the row header, as it wouldn't be possible to put the gradient under multiple different cells. Example 2 in the doc looks problematic, as the template isn't actually being used as a header in any of the cells. Jc86035 (talk) Use {{re|Jc86035}}
to reply to me 11:03, 7 July 2017 (UTC)

I have not figured out an easy solution to this so far. title attributes are generally ignored in most situations by screenreaders. Maybe an aria-label can work, but the language is the hard part here. How do you describe this to a person who can't see, using rather generic language ? Take the first example of the Template. You'd now have:

• "To, From. Column 1 of 4" if you navigate to it. And "To, From" when ever you request a column or row header description from a cell that it is the header of.

That's just VoiceOver, and each screenreader might do it differently Now say we put aria-label "Row headers are: From" and "Column headers are: To". You'd get So what do you put in the aria-label (so what sentence do you replace To with), which will describe to someone what it is ? Best i can come up with so far is:

• "column headers indicate "To", row headers indicate "From", Column 1 of 4.

But we will need to apply some HTML stripping etc on the titles, because currently it allows br tags and full template calls, and you cannot put that into an element attribute. —TheDJ (talk • contribs) 13:25, 7 July 2017 (UTC)

Diagonal split color box

Discussion at Wikipedia_talk:Manual_of_Style/Accessibility#Diagonal_split_color_box AngusWOOF (bark • sniff) 21:51, 17 September 2019 (UTC)

Compatibility with legacy browsers

Can you add background: -o-linear-gradient(to top right,{{{3|#EAECF0}}} 49%,#AAA 49.5%,#AAA 50.5%,{{{4|{{{3|#EAECF0}}}}}} 51%); background: -moz-linear-gradient(to top right,{{{3|#EAECF0}}} 49%,#AAA 49.5%,#AAA 50.5%,{{{4|{{{3|#EAECF0}}}}}} 51%); background: -webkit-linear-gradient(to top right,{{{3|#EAECF0}}} 49%,#AAA 49.5%,#AAA 50.5%,{{{4|{{{3|#EAECF0}}}}}} 51%); between background:{{{3|#EAECF0}}}; and background:linear-gradient(… to this template. Chrome 10 to 25 and Safari 5.1 to 6.0 requires -webkit- prefix, Firefox 3.6 to 15 requires -moz- prefix and Opera 11.1 to 12.0 requires -o- prefix for linear gradients. 185.69.144.90 (talk) 09:45, 3 November 2022 (UTC)

 Not done these browsers are too old to justify providing special coding provision. See mw:Browser support. --Redrose64 🌹 (talk) 20:57, 3 November 2022 (UTC)

Alternative technique for consistent line thickness

It has peeved me for a while that the diagonal line produced by this template is somewhat thicker than the table cell border, which is especially visible when the cell is large.

I've come up with an alternative technique, using a SVG background-image to draw the line: Template:Diagonal split header/sandbox

An example of the problem it solves can be seen here: Template:Diagonal split header/testcases#Very large cells result in a thicker line

However, with this approach we can't set separate background colors for the split cell (Template:Diagonal split header#Background colour and non-header cells), because background-images are only allowed in TemplateStyles (not in inline CSS), and there's no way to pass the color as a parameter to TemplateStyles. Unless there's some clever trick I am missing, these would have to keep using the old technique.

It may also have slightly different browser support, although so far it worked on everything I tested. In theory, SVG in CSS backgrounds is supported by more old browser versions than gradients in CSS backgrounds: https://caniuse.com/svg-css https://caniuse.com/css-gradients

Thoughts? Matma Rex talk 16:50, 23 January 2023 (UTC)

---

Thanks, Matma Rex, and nice work! I think the separate background colors feature would be a small proportion of the usage cases but worth keeping, if possible.

The line thickness issue with the existing template is a hard-coded percentage is used for the linear gradient color-stops:

background:linear-gradient(to top right, #EAECF0 49%, #AAA 49.5%, #AAA 50.5%, #EAECF0 51%)

In this case, the diagonal line width is (50.5 − 49.5) = 1.0% of the gradient axis length. This results in a thinner line for small cells and a thicker line for large cells.

Playing around with (or even calculating) the color-stop values could resolve the issue. One way might be to add an extra parameter to control line thickness. The example code below uses a simple switch to select from four pre-canned options (probably good enough for most cell sizes – and with less computational overhead than generating precise numbers):

Partial code

Wiki markup

style="background:#EAECF0;{{#switch: {{{5}}}
|1 = background:linear-gradient(to top right,#EAECF0 49.75%,#AAA 49.90%,#AAA 50.10%,#EAECF0 50.25%);
|2 = background:linear-gradient(to top right,#EAECF0 49.55%,#AAA 49.80%,#AAA 50.20%,#EAECF0 50.45%);
|3 = background:linear-gradient(to top right,#EAECF0 49.20%,#AAA 49.70%,#AAA 50.30%,#EAECF0 50.80%);
|#default = background:linear-gradient(to top right, #EAECF0 48.5%, #AAA 49.5%, #AAA 50.5%, #EAECF0 51.5%);

	A cell
A cell	Diagonal line thickness = 1.0% of gradient axis

	A large cell
A large cell	Diagonal line thickness = 0.6% of gradient axis

	A very, very large cell
A very, very large cell	Diagonal line thickness = 0.4% of gradient axis

	A very, very, very, very, very, very large cell
A very, very, very, very, very, very, very, very, very, very, very large cell	Diagonal line thickness = 0.2% of gradient axis

This might be an option to tweak the existing linear-gradient technique and retain the color functionality? -- Ham105 (talk) 22:31, 23 January 2023 (UTC)

I probably could have added one more option for 0.8% of gradient axis length. -- Ham105 (talk) 22:37, 23 January 2023 (UTC)

This works too, although it's a bit more effort to use. Meanwhile I came up with a way to restore support for backgrounds with the new technique: Template:Diagonal split header/testcases#Background colors. I was quite happy at first, but then I noticed it causes some funniness with the table cell borders on Firefox, so that might not be good enough. Matma Rex talk 09:29, 24 January 2023 (UTC)

I've moved my original version to a separate template: Template:Diagonal split header 2 and updated the documentation. Matma Rex talk 00:53, 24 February 2023 (UTC)

calc()

I was testing calc() in the diagonal split header sandbox and it works consistently across large cells, with consistent line thickness. The calc() property works in all Grade C browsers. Here is a list:

• calc(50% - 0.8px)
• calc(50% - 0.4px)
• calc(50% + 0.4px)
• calc(50% + 0.8px)

Can it be added to the template instead of 49%, 49.5%, 50.5% and 51%? Xeverything11 (talk) 16:13, 3 May 2024 (UTC)

It's not a property, it's a function. All valid CSS declarations have the format property:value (each surrounded by optional whitespace), so in the declaration

background:linear-gradient(to top right,#EAECF0 calc(50% - 0.8px),#AAA calc(50% - 0.4px),#AAA calc(50% + 0.4px),#EAECF0 calc(50% + 0.8px))

background is the property. Anyway, CSS Values and Units Module Level 3 is a W3C Candidate Recommendation Draft (as of 22 March 2024), so it's not yet been accepted as a formal W3C Recommendation, so should not be relied on. --Redrose64 🌹 (talk) 18:22, 3 May 2024 (UTC)