Styling of <ins> and <del>

UX
1

Would it be possible to add the following styling for <ins> and <del>?

ins { text-decoration: underline; }
del { text-decoration: line-through; }

Example:

But soft, what light through thatyonder window breaks?

Red for deletions and green for insertions are very much conventional. Word processor features, such as Word’s Track Changes, universally use underlining and strikeout, as well. The default stylesheet of my Chrome browser does likewise. But I just see background-colored text on Discourse forums.

I suspect Discourse’s CSS reset may be clobbering it.

6 Likes
2

Relying on color alone is a little rough for red-green colorblind people, so that could help here too… simulated example:

Screen Shot 2021-11-02 at 1.30.56 PM

5 Likes
3

I suppose it’s also worth considering whether the color cue should be background, color, or both.

2 Likes
4

So you are suggesting we use both color and underline / strikeout here? It’s fine with me, @awesomerobot if you want to fold that in it seems like a tiny easy change.

1 Like
5

The norm in law is green text and underline for insertions and red text and strikethrough for deletions. I believe GitHub prose diff does green background and underline for insertions and red background and strikethrough for deletions.

I would strongly recommend combining color and text decoration. I have no strong opinion about whether to color text, background, or both, as long as the approach for insertions and deletions is the same.

It might also be worth thinking about dark mode. I just pulled up a GitHub prose diff, and it’s hard to see the styling on the dark mode background grey.

3 Likes
6

Fine with me, if @awesomerobot is in favor let’s do it!

4 Likes
9

I noticed that GitHub only does underline and strikeout for <ins> and <del> in comments. But I can confirm that I really miss the color. It’s hard to pick out all the changes to a big chunk of content at a glance without the color cues.

4 Likes
10

Still in favor. If @awesomerobot agrees, let’s do it.

2 Likes
11

Would this affect everyone? I use those for highlighting. LOL

4 Likes
12

It would affect everyone, but <mark> also works for highlighting!

I think we should do both color and text styling; we’ll get to it, it’s just low-priority.

3 Likes
13
8 Likes
14

True but the green and red offer more options. Could it be a setting to do highlight only or add text styling?

I’ve used them quite a bit in blogs. It will change them completely.

example:

image
image711×116 18.8 KB

2 Likes
15

Kris will need to confirm 100%, but I’m 99% certain we can quickly override the new underline/strikethrough via a theme component on your site.

3 Likes
16

Yes, definitely! I’ll update your theme so there will be no change!

4 Likes
17

Perhaps @ThunderThighs would like styles for mark.red, mark.green, mark.blue, and so on?

Many friends who use highlighters enjoy having several colors of them.

You might also consider :before and :after content for screen readers if the color coding is important. Otherwise, I understand that many screen readers do not pronounce mark tags, just their contents.

5 Likes