The strikethrough icon is intriguing

[wwalc]

Bold, Italic, Underline, Strikethrough = B, I, U, S

T?

Now let's check CKEditor 4...

T is already used for removing formatting.

Even if T is used in some applications for striked text (though I find S to be more common, see. e.g. Google Docs), I believe that having an older editor where T was used for a completely different purpose is quite an important factor we should consider when offering UI to the end users.

[wwalc]

Related: #908

[oleq]

The problem with the letter "S" is that when crossed, it starts looking complex. It's hard to tell what it represents unless the actual shape of the letter is much thicker than the line used to cross it (v4). This, however, is impossible with our current icon styles because a thick line is reserved exclusively for bold.

So in the process of refactoring the theme, we decided to go with "T" which is:

• much simpler as a shape,
• orthogonal to the "crossing line",
• also used in some applications.

[scofalik]

Maybe it is more complex, but on the other hand, it is something that everyone is used to and everyone seeks it.

It's hard to tell what it represents

I don't get it. Everyone knows a crossed letter when they see it. Unless the whole shape starts to look like something else and makes you wonder, like with crossed "T" we have now.

unless the actual shape of the letter is much thicker than the line used to cross it

Maybe, probably yes. Maybe we could add some little spacing between the crossing line and the letter? So the line does not touch the letter.

("T" is) much simpler as a shape

T is not much simpler as a shape. Everything, when crossed, will get "complex". "I" crossed would be quite a simple shape, and still you would have no clue what the heck this "plus symbol" is doing there. It can be complex, as long as it conveys the message. The current solution is less complex but gives you no clue.

Please, let's have a discussion about it, cause I find current button disturbing and it appeared that it's not only me.

[jodator]

I've just checked the LibreOffice:

it looks there's not ideal solution :) But I think that as we go with feature -> icon the expected would be S for strikethrough not the T.

But OTOH I can get that striked S might be uglier then T (but I heaven't seen them).

[scofalik]

I like LibreOffice solution because for every option there's the same letter, so you can deduce the effects by comparing buttons when they are next to each other. I hope you know what I mean.

(Edit: I mean I like it conceptually. It doesn't look good, I mean, it is not beautiful).

[scofalik]

BTW. Google Docs does something in a vein of what I suggested:

But they did spacing above and below the line. I was thinking about spacing on the edges of S letter. Should be more readable.

[wwalc]

In case anyone was curious how remove formatting looks like in Google Docs:

[oleq]

@wwalc Just in case: https://github.com/ckeditor/ckeditor5/issues/908

[wwalc]

@wwalc Just in case: #908

Yeah, I know, I linked to that ticket already: https://github.com/ckeditor/ckeditor5/issues/910#issuecomment-373406783 My intention was to show that Google Docs uses a very similar button for a completely different purpose.

[Reinmar]

We need a decision here and I have to say that the problems with a crossed "T" letter are pretty big. @oleq and @dkonopka, could we see how an "S" would do?

[dkonopka]

It was "S" (not polished at all) before "T": https://github.com/ckeditor/ckeditor5-basic-styles/blob/39cbe97a326ff3157770747a33048d664c4fdec1/theme/icons/strikethrough.svg.

But Szymon good mentioned Google Docs sample, we can try to get rid of the bottom spacing in crossing line, I'll try that and propose something.

[oleq]

The S in the design looks out of place because it belongs to some older design guidelines. Could you make it more up–to–date, @dkonopka?

[dkonopka]

Rounded style, 1,5px of thickness (like all icon set) + 1,5px height of crossing line (same as in underline):

~S~ "single spaced"

~S~ with spacing below and above crossing line

I would keep it simple and go with "single-spaced" icon.

[wwalc]

Love it already, any of the options above.

[scofalik]

Could we try an option that has vertical spacing, not a horizontal one? So the "S" shape is kept together? Though it could look like the strike is "behind" a letter, but maybe it would be more readable?

Also, we could try with less "curvy" S (so together with strikethrough it does not look like 8 or link icon (not our link icon, but with something that could resemble a link icon)).

[dkonopka]

@scofalik Idea of the strike "behind" a letter is good, but the icon is too small to show details and keep spacings. About less curvy S letter - take a look at the proposal, it's not fitting to the current icon set in v5.

Anyway, let's wait for more feedback.

[scofalik]

It seems a bit out of place this way. I imagined it differently. And the spacing would have to be, you know, in a shape of S letter. Now, these are just two dashes. But I don't know if it would be better -- the letter does not look stricken.

[Reinmar]

Love it already, any of the options above.

Agree. Although, IMO the line is a bit too low. In the last proposal (https://github.com/ckeditor/ckeditor5/issues/910#issuecomment-376877029) it seems to be higher.

[dkonopka]

Yep, there was a difference with strike line, so here is 1px higher proposal:

[oleq]

How about something like this:

[Reinmar]

Even better. It's not only clear (although... I think that it's slightly less clear than @dkonopka's proposal above) and well shaped now, but additionally – it looks fresh.

[pjasiun]

How about something like this:

In this icon "S" is above "–". I believe this is not how strikethrough works.

[Reinmar]

In the same way as chain's link doesn't look like a pill with a dash inside from any angle. This is a pictogram and the question is whether S over a line is clear to potential users. I certainly agree that it's further from reality than when a line is "over" the S, though. But, for me, the advantage of Olek's proposal is its lightness and freshness. The question is whether the icon still remains clear enough.

[wwalc]

~Actually with text-decoration-skip-ink striked text may look exactly this way.~

Hmm, actually nope. It looks like it works for underline atm. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink Anyway for me it's acceptable.

[scofalik]

But, for me, the advantage of Olek's proposal is its ( ... ) freshness.

Maybe a vertical line then? $

Just :trollface:. TBH, this is how I've seen it, Olek. I am not sure if it conveys the message, though :(.

[dkonopka]

So to sum up we have two proposals: the modern way and default strikethrough icon. Please give some 👍

Default strikethrough icon

[dkonopka]

Modern strikethrough icon

[scofalik]

I proposed the "modern" on and voted for "default", so I guess it tells a lot :)

[wwalc]

[Reinmar]

I guess we have a winner :D @dkonopka, could you create a PR so we can still close it in this iteration?