`<ins>`と`<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
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
3

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

「いいね！」 2
4

では、ここで両方の色と下線/取り消し線を使用することを提案しますか？ @awesomerobot、もしあなたがそれを折り込むことを望むなら、それは非常に簡単な変更のようです。

「いいね！」 1
5

法律における標準は、挿入には緑色の文字と下線、削除には赤色の文字と取り消し線です。GitHubのプロセスの差分表示は、挿入には緑色の背景と下線、削除には赤色の背景と取り消し線を使用していると思います。

色とテキスト装飾を組み合わせることを強くお勧めします。挿入と削除のアプローチが同じであれば、テキスト、背景、またはその両方を色付けするかどうかについては、特に意見はありません。

ダークモードについても検討する価値があるかもしれません。GitHubのプロセスの差分表示を今確認したのですが、ダークモードのグレーの背景ではスタイルが見えにくいです。

「いいね！」 3
6

構いませんよ。@awesomerobot さんが賛成なら、やりましょう！

「いいね！」 4
9

GitHubはコメント内でのみinsとdelのアンダーラインと打ち消し線のみをサポートしていることに気づきました。しかし、色がないと大きなコンテンツの変更点を一目で把握するのが難しいです。

「いいね！」 4
10

賛成のままです。@awesomerobot が同意すれば、実行しましょう。

「いいね！」 2
11

これは皆に影響しますか？私はそれらをハイライトに使用しています。笑

「いいね！」 4
12

それはすべての人に影響しますが、<mark>は<mark>ハイライト</mark>にも役立ちます！

色とテキストの両方のスタイリングを行うべきだと思います。それはまだですが、優先度が低いだけです。

「いいね！」 3
13
「いいね！」 8
14

しかし、緑と赤はより多くのオプションを提供します。ハイライトのみ、またはテキストスタイルの追加を行う設定にすることはできますか？

ブログでかなり使っています。それらは完全に変わります。

例：

image
image711×116 18.8 KB

「いいね！」 2
15

クリスが100%確認する必要があるが、あなたのサイトのテーマコンポーネントで新しい下線/取り消し線をすぐに上書きできると99%確信している。

「いいね！」 3
16

はい、もちろんです！テーマを更新しますので、何も変更はありません！

「いいね！」 4
17

おそらく @ThunderThighs は mark.red、mark.green、mark.blue などのスタイルを好むのではないでしょうか？

ハイライターを使う友人の多くは、複数の色を好みます。

色分けが重要であれば、スクリーンリーダー用の :before および :after コンテンツも検討するかもしれません。そうでなければ、多くのスクリーンリーダーは mark タグではなく、その内容のみを発声することは理解しています。

「いいね！」 5