Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing document, we actually have HTML elements capable of that. There are a lot of elements that we can use for this process. The main ones we’ll look at are
and custom markup — we can get the same sort of visual tracking changes features as something like Word, Google Docs, or even WordPress.
Different apps have different ways of tracking changes. Let’s start with the
The
CodePen Embed Fallback
Notice how the browser underlines the inserted text for us. It’s nice to have that sort of visual indication, even if it could be mistaken as an underline using the text-decoration property.
Let’s pair the insertion with the
CodePen Embed Fallback
The browser styles
OK, great, so we have these semantic HTML elements and they produce some light visual indicators for content that is either inserted or deleted. But there’s something you might not know about these elements: they accept a cite attribute that can be used to annotate the change.
cite takes a properly formatted URL that provides points somewhere to find the reasons why the change was made. That somewhere could even be an anchor on the existing page.
CodePen Embed Fallback
That’s cool, but one issue is that the citation URL isn’t actually visible or clickable. We could use some CSS magic to display it. But even then, it still won’t take you to the citation when clicked… nor can it be copied.
CodePen Embed Fallback
That said, it does make semantically clear what’s part of the edit and what is not. If we wrap
But! There’s a second attribute that datetime when an edit was made. Again, this is not immediately available to a user, but it keeps semantically clear what is part of the edit and what isn’t.
CodePen Embed Fallback
HTML’s datetime format, as a machine readable date and time, requires precision and can thus be a bit, well, cranky, But it’s general tenants aren’t too hard. It’s worth noting though that, while datetime is used on other elements, such as
We can make things clearer with a little more CSS magic. For example, we can reveal the datetime value on hover:
CodePen Embed Fallback
Checkboxes work too:
CodePen Embed Fallback
But good editing is far more than simply adding and deleting content. It’s asking questions and figuring out what the heck the author intended. (For me personally, it’s also about saving me from embarrassing spellling and grammar mistooks).
So, meet the
CodePen Embed Fallback
If you’re the editor and want to write a note to the writer (let’s name that person Stanley Meagher) with suggestions to make Stanly’s letter more awesome (or less creepy, at the very least) and that note is large enough to warrant flow content (i.e. block level elements), then the note can be an
element.
<aside class="note">Mr. Meagher, I highly recommend you remove this list of preferred cheeses and replace it with things you love about the woman you are writing to. While I'm sure there are many people for whom your list would be interesting if not welcome, that list rarely includes a romantic interest in the midst of your profession of love. Though, honestly, if she is as perfect for you as you believe, it may be the exact thing you need to test that theory.</aside>But often you’ll want to do something inline in order to point something out or make a comment about sentence structure or word choice. Unfortunately there’s no baked in way to do that in HTML, but with a little ingenuity and some CSS you can add a note.
<span class="note">Cheesecake isn't really a "cheese"</span>The
<p>Please, <u>Lura</u> tell me your answer. Will you wear my mathlete letter jacket?</p>As we’ve seen throughout this article, the browser’s default styles for the elements we’ve covered so far are certainly helpful but can also be confusing since they are barely distinguishable from other types of content. If a user does not know that the document is showing edits, then the styling may be misconstrued or misunderstood by the user. I’d therefore suggest some additional or alternate styles to help make it clear what’s going on.
ins {
padding: 0 0.125em;
text-decoration: none;
background-color: lightgreen
}
del {
padding: 0 0.125em;
text-decoration: none;
background-color: pink;
}
mark {
padding: 0 0.125em;
}
.note {
padding: 0 0.125em;
background-color: lightblue;
}
aside.note {
padding: 0.5em 1em;
}
u {
text-decoration: none;
border-bottom: 3px red dashed;
}CodePen Embed Fallback
I ask myself the same question every time I learn something new in HTML: How can I needlessly animate this?
It would be great if we could fade up the changes so that when you clicked a checkbox the edits would fade in as well.
CodePen Embed Fallback
The notes and text in visibility property with a set height and width value of 0 allows the backgrounds to smoothly fade in.
And there you have it: specifications and a few strategies for keeping track of edits on the web (plus an excellent example of how not to write a love letter (or, perhaps, how to write one so perfect that responding positively to it is a sign you’re soulmates).
The post Copyediting with Semantic HTML appeared first on CSS-Tricks .
You can support CSS-Tricks by being an MVP Supporter .
