Copyediting mit semantischem HTML

Das Nachverfolgen von Änderungen ist eine wesentliche Funktion beim Copyediting, um Versionen von Inhalten zu vergleichen. Während wir es gewohnt sind, Änderungen in einem Textverarbeitungsdokument zu verfolgen, gibt es tatsächlich HTML-Elemente, die dazu in der Lage sind. Es gibt viele Elemente, die wir für diesen Prozess verwenden können. Die wichtigsten, die wir uns ansehen werden, sind <del>, <ins> und <mark>. Aber, wie wir sehen werden, können wir durch die Kombination mit anderen Elementen – einschließlich <u>, <aside> und benutzerdefinierten Markierungen – ähnliche visuelle Änderungsverfolgungsfunktionen wie bei Word, Google Docs oder sogar WordPress erzielen.

Beginnen wir mit dem <ins>-Element.

Das <ins>-Tag bezeichnet Text, der eingefügt werden sollte oder wurde. Die Zeitform ist hier etwas seltsam, denn während das <ins>-Tag eine Bearbeitung vorschlägt, muss es per Definition bereits eingefügt worden sein, um im <ins>-Tag zu stehen. Es ist so ähnlich wie zu sagen: „Hey, füge diese Dinge ein, die technisch gesehen schon da sind.“

Beachten Sie, wie der Browser den eingefügten Text für uns unterstreicht. Es ist schön, eine solche visuelle Anzeige zu haben, auch wenn sie mit einer Unterstreichung, die das <u>-Element verwendet, einem Link oder der CSS-Eigenschaft text-decoration verwechselt werden könnte.

Kombinieren wir die Einfügung mit dem <del>-Element, das Text bezeichnet, der gelöscht werden sollte oder wurde.

Der Browser formatiert <del> wie ein Element mit durchgestrichenem Text (<s>), aber sie bedeuten unterschiedliche Dinge. <del> ist für Inhalte gedacht, die entfernt/bearbeitet werden sollen (wie dieser gruselig wirkende Abschnitt oben), während <s> für Inhalte gedacht ist, die nicht mehr wahr oder ungenau sind (wie der Glaube des Briefschreibers, dass dieser Abschnitt liebenswert wäre).

Okay, großartig, wir haben also diese semantischen HTML-Elemente und sie erzeugen einige leichte visuelle Hinweise für Inhalte, die entweder eingefügt oder gelöscht wurden. Aber es gibt etwas, das Sie vielleicht nicht über diese Elemente wissen: Sie akzeptieren ein cite-Attribut, das verwendet werden kann, um die Änderung zu kommentieren.

cite nimmt eine korrekt formatierte URL entgegen, die irgendwohin verweist, um die Gründe für die Änderung zu finden. Dieses „irgendwo“ könnte sogar ein Anker auf der bestehenden Seite sein.

Das ist cool, aber ein Problem ist, dass die Zitier-URL nicht wirklich sichtbar oder klickbar ist. Wir könnten etwas CSS-Magie verwenden, um sie anzuzeigen. Aber selbst dann würde sie beim Klicken immer noch nicht zum Zitat führen … und sie kann auch nicht kopiert werden. 

Dennoch macht es semantisch klar, was Teil der Bearbeitung ist und was nicht. Wenn wir <ins> und <del> in einen Link packen (oder sogar umgekehrt), ist es immer noch nicht klar, ob der Link Teil des bearbeiteten Inhalts sein soll oder nicht.

Aber! Es gibt ein zweites Attribut, das <ins> und <del> beide teilen: datetime. Und damit können wir angeben, *wann* eine Änderung vorgenommen wurde. Auch hier ist dies einem Benutzer nicht sofort verfügbar, aber es bleibt semantisch klar, was Teil der Bearbeitung ist und was nicht. 

Das datetime-Format von HTML erfordert als maschinenlesbares Datum und Uhrzeit Präzision und kann daher, nun ja, mühsam sein. Aber die allgemeinen Grundsätze sind nicht allzu schwer. Es ist erwähnenswert, dass, obwohl datetime auch auf anderen Elementen wie <time> verwendet wird, die Formatierung des Wertes auf <ins> und <del>, die nicht mindestens einen spezifischen Tag, Monat und Jahr enthält, problematisch wäre und das Datum und die Uhrzeit einer Änderung eher verschleiern als Klarheit schaffen würde.

Wir können die Dinge mit etwas mehr CSS-Magie klarer machen. Zum Beispiel können wir den datetime-Wert beim Hover anzeigen lassen.

Kontrollkästchen funktionieren auch.

Aber gutes Copyediting ist weit mehr als nur das Hinzufügen und Löschen von Inhalten. Es geht darum, Fragen zu stellen und herauszufinden, was der Autor eigentlich beabsichtigt hat. (Für mich persönlich geht es auch darum, mich vor peinlichen Rechtschreib- und Grammatikfehlern zu bewahren).

Lernen Sie also das <mark>-Element kennen.

<mark> hebt Text hervor, der für den Leser von besonderem Interesse ist. Es wird normalerweise als gelber Hintergrund hinter dem Inhalt gerendert. 

Wenn Sie der Redakteur sind und eine Notiz an den Autor schreiben möchten (nennen wir diese Person Stanley Meagher) mit Vorschlägen, Stanleys Brief großartiger (oder zumindest weniger gruselig) zu gestalten, und diese Notiz groß genug ist, um Fließtext (d. h. Blockelemente) zu rechtfertigen, dann kann die Notiz ein <aside>-Element sein.

<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>

Aber oft möchten Sie etwas Inline tun, um etwas hervorzuheben oder einen Kommentar zur Satzstruktur oder Wortwahl abzugeben. Leider gibt es dafür in HTML keine integrierte Möglichkeit, aber mit etwas Einfallsreichtum und etwas CSS können Sie eine Notiz hinzufügen.

<span class="note">Cheesecake isn't really a "cheese"</span>

Das <u>-Element – lange ein Ärgernis für Webentwickler aus Angst vor Verwechslung mit einem Link – hat tatsächlich einen Nutzen (ich weiß, ich war auch überrascht). Es kann verwendet werden, um ein falsch geschriebenes Wort hervorzuheben (anscheinend sind gezackte und rote Unterstreichungen keine Standard-Browserdarstellungsfunktion). Es sollte immer noch nicht dort verwendet werden, wo es mit einem tatsächlichen Link verwechselt werden könnte, und wenn es verwendet wird, sollte es definitiv eine Farbe verwenden, die es von Links unterscheidet. Die rote Farbe kann geeignet sein, um einen Fehler anzuzeigen. 

<p>Please, <u>Lura</u> tell me your answer. Will you wear my mathlete letter jacket?</p>

Wie wir in diesem Artikel gesehen haben, sind die Standardstile des Browsers für die bisher behandelten Elemente zwar hilfreich, können aber auch verwirrend sein, da sie sich kaum von anderen Inhaltstypen unterscheiden. Wenn ein Benutzer nicht weiß, dass das Dokument Änderungen anzeigt, können die Stile vom Benutzer missverstanden werden. Ich würde daher zusätzliche oder alternative Stile vorschlagen, um klarzustellen, was vor sich geht.

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;
}

Ich stelle mir jedes Mal dieselbe Frage, wenn ich etwas Neues in HTML lerne: Wie kann ich das unnötig animieren?

Es wäre großartig, wenn wir die Änderungen einblenden könnten, so dass beim Klicken auf ein Kontrollkästchen die Bearbeitungen auch eingeblendet würden.

Die Notizen und der Text in <del>-Tags können mit CSS nicht auf die gleiche Weise ausgeblendet werden wie Hintergrundfarben und Abstände. Außerdem führt display: none zu überhaupt keiner Einblendung. Alles springt wieder an seinen Platz, einschließlich der Hintergründe. Aber durch die Kombination der CSS-Eigenschaft visibility mit einem gesetzten height und width Wert von 0 können die Hintergründe sanft eingeblendet werden.

---

Und da haben Sie es: Spezifikationen und einige Strategien, um Änderungen im Web zu verfolgen (plus ein hervorragendes Beispiel dafür, wie man *keinen* Liebesbrief schreibt (oder vielleicht einen so perfekten, dass eine positive Antwort darauf ein Zeichen dafür ist, dass Sie Seelenverwandte sind)).

Bearbeitung: Adrian Roselli fügt in den Kommentaren einige ausgezeichnete Barrierefreiheitsinformationen hinzu. Bevor Sie diese Ideen in der Produktion umsetzen, sollten Sie diese Vorschläge unbedingt berücksichtigen.