# עיצוב של \<ins\> ו-\<del\>

**URL:** https://meta.discourse.org/t/styling-of-ins-and-del/208017
**Category:** UX
**Created:** [2 בנובמבר,‏ 2021,‏ 5:11pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017 "2021-11-02T17:11:36Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [2 בנובמבר,‏ 2021,‏ 5:11pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/1 "2021-11-02T17:11:37Z")

</div>

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

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

```

Example:

> But soft, what light through ~~that~~ yonder 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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2 בנובמבר,‏ 2021,‏ 5:32pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/2 "2021-11-02T17:32:55Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/f/3/f3a50234fafcb1d6828c96c75742f439aae373d3.png)

---

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [2 בנובמבר,‏ 2021,‏ 5:53pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/3 "2021-11-02T17:53:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [17 בינואר,‏ 2022,‏ 6:35pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/4 "2022-01-17T18:35:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [18 בינואר,‏ 2022,‏ 2:20am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/5 "2022-01-18T02:20:15Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [18 בינואר,‏ 2022,‏ 6:20am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/6 "2022-01-18T06:20:16Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [23 בינואר,‏ 2022,‏ 6:09pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/9 "2022-01-23T18:09:47Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [27 בינואר,‏ 2022,‏ 12:32am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/10 "2022-01-27T00:32:22Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ThunderThighs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thunderthighs/32/492278_2.png) [@ThunderThighs](https://meta.discourse.org/u/ThunderThighs)
#### Post date: [27 בינואר,‏ 2022,‏ 1:09am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/11 "2022-01-27T01:09:16Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 בינואר,‏ 2022,‏ 2:44am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/12 "2022-01-27T02:44:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [27 בינואר,‏ 2022,‏ 3:49am UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/13 "2022-01-27T03:49:34Z")

</div>

[https://github.com/discourse/discourse/pull/15726](https://github.com/discourse/discourse/pull/15726)

---

<div class="post-metadata">

### Author: ![ThunderThighs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thunderthighs/32/492278_2.png) [@ThunderThighs](https://meta.discourse.org/u/ThunderThighs)
#### Post date: [27 בינואר,‏ 2022,‏ 3:16pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/14 "2022-01-27T15:16:31Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/4/2/426cc7c78feb2d4175f5e14d0db04a5a8ff8dee8.png)

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [27 בינואר,‏ 2022,‏ 3:18pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/15 "2022-01-27T15:18:35Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 בינואר,‏ 2022,‏ 3:20pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/16 "2022-01-27T15:20:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kemitchell](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kemitchell/32/119466_2.png) [@kemitchell](https://meta.discourse.org/u/kemitchell)
#### Post date: [27 בינואר,‏ 2022,‏ 3:42pm UTC](https://meta.discourse.org/t/styling-of-ins-and-del/208017/17 "2022-01-27T15:42:27Z")

</div>

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.