Revision
Words added and words struck, inside the sentence they change.
On this page
A revision shows words added and words struck inside the sentence they change: a suggested edit, a tracked change, a correction. It is two classes on two native elements. ins on an <ins> sets inserted words on a wash of the success hue over a fine underline; del on a <del> takes half the ink from deleted words, on a wash of the danger hue under a strike.
Revision
<p class="m(0) max-w(480) mx-auto leading-md">The release is planned for<del class="del">Thursday</del><ins class="ins">Tuesday the 17th</ins>, and it<del class="del">will probably include</del><ins class="ins">includes</ins>the new contracts. Every stylesheet has a contract beside it<ins class="ins">, and the two change together in the same commit</ins>.</p>#Two elements
The meaning is in the elements, not in the classes. <ins> and <del> say what happened to the words to a screen reader, to a search engine and to a browser with no stylesheet, where they are underlined and struck by default. Both take a datetime for when the change was made and a cite for a document that explains it.
The classes give them the wash. Like a mark, a revision carries across line breaks: each line of a long insertion has its own rounded ends.
#Hue and its second sign
Added and removed are a status of the words, so a revision takes the two status hues. A hue never stands alone: an insertion is also underlined and a deletion is also struck, so the two are told apart without color, by a reader who cannot see it and in forced colors, where the washes are dropped and the lines remain.
On a card and on ink
<div class="card w-full max-w(360)"> <p class="m(0)">Ships on <del class="del">Thursday</del> <ins class="ins">Tuesday</ins>, with the contracts.</p></div><div class="sheet sheet-inverse p(20) w-full max-w(360)"> <p class="m(0)">Ships on <del class="del">Thursday</del> <ins class="ins">Tuesday</ins>, with the contracts.</p></div>#Revision or code
A revision changes words in a sentence. When whole lines of code changed, use a code block with code-line-added and code-line-removed, which mark the line and its gutter. Words that are emphasized and not changed are a mark.
#Accessibility
- Use
<ins>and<del>, never a<span>with the class: the class is refused on any other element by the checker, because the elements are what carry the meaning. - Screen readers differ in whether they announce insertions and deletions by default. When the change matters to understanding, say it in the sentence too, or summarize the changes before the text.
- A replacement reads best as the deletion followed by the insertion, with a space between them.
#Classes
| Class | Description |
|---|---|
ins | Inserted words, on an ins element: a wash of the success hue over a fine underline |
del | Deleted words, on a del element: half their ink, on a wash of the danger hue under a strike |