Template talk:Strikethrough color

Artificial limitations due to outdated use of CSS

The documentation claims,

This template is implemented using CSS. There is no way to have the text be "the default text color" (the current style or skin of the adjacent text). The text color is always set explicitly, either to black or to a passed specific color.

That may have been true when this template was first created back in 2017, but (since right about the same time) it's no longer the case.

The current template code uses a pair of <span>...</span> tags, nested one inside the other. The outer one sets text-decoration:line-through and also sets color: (linecolor). The inner span then sets color again, to either a supplied {{{textcolor}}} or black, to prevent the {{{linecolor}}} from being inherited as the text color inside the span(s).

The problems with coloring text-decoration markup using the foreground color did not go unnoticed, so text-decoration was made a shorthand CSS property that sets various parameters of the text decoration which can also be configured individually. Among them are text-decoration-line (which gets the line-through setting from the shorthand) and text-decoration-color, which allows setting the color of the decoration without affecting the text color.

This means that there are two options for implementing this template which don't require setting an explicit text color, and will permit it to be inherited in the absence of an explicit override.

Option 1: Use the shorthand

A CSS color value can be included in the text-decoration value along with the line-type parameter, and will only affect the color of the decoration itself, not the decorated text.

For example,

<span style="text-decoration:red line-through">Some red-lined text.</span>

which produces: Some red-lined text

Option 2: Set explicit text-decoration-color property

An equivalent syntax involves explicitly assigning the {{{linecolor}}} explicitly to text-decoration-color, leaving the foreground color alone.

For example,

<span style="text-decoration-color:red; text-decoration-line:line-through">More red-lined text.</span>

which similarly produces: More red-lined text.

Either version produces text which inherits the current body-text color, so that it will react properly to dark mode and other theme color selections.

Because there are many consumers of this template which do use an explicit |textcolor= parameter to adjust the body text, we should continue to support that use by also including style="color:{{{textcolor}}}" on the <span>...</span>... but only when explicitly specified. Something like:

<span style="text-decoration-color:{{{linecolor|red}}}; text-decoration-line:line-through; {{#if:{{{textcolor|}}}|color:{{{textcolor}}} }}">{{{1}}}</span>

FeRDNYC (talk) 05:08, 25 October 2024 (UTC)

I've installed the code above into the {{Strikethrough color/sandbox}}, and added some testcases that demonstrate how, while the live template text is unreadable in dark mode unless |textcolor= is specified (because it defaults to black), the sandbox version instead properly renders the text in white by default. I'll transfer those changes over to the live template now, so that readers visiting articles that use this template will no longer be faced with unreadable-text issues due to the default forced-black text coloring. FeRDNYC (talk) 05:20, 25 October 2024 (UTC)