annotate

Kommentieren

Annotieren Sie und veröffentlichen Sie Text im Web! Dieses Projekt wurde für "den (bearbeiteten) Leitschrank -Leitfaden zu Crypto" erstellt, kann jedoch verwendet werden, um jedes Textdokument zu kommentieren.

Sehen Sie sich eine Live -Demo unter https://molly.github.io/annotate/ an.

Wie man benutzt

Kopieren Sie die Dateien index.html , styles.css und annotate.js . Sie sollten nur die Datei index.html bearbeiten müssen, es sei denn, Sie möchten das Verhalten von Styling oder JavaScript ändern. Für dieses Projekt ist das JavaScript nicht erforderlich . Wenn Sie es also weglassen möchten, lassen Sie einfach die Datei annotate.js weg und entfernen Sie das <script src="./annotate.js"></script> Tag aus der HTML -Datei. Der screenshots Ordner verfügt über Screenshots in voller Größe der Indexseite sowohl in den Desktop- ( index-desktop.png ) als auch im mobilen ( index-mobile.png ) Ansichten, sodass Sie sehen können, was die HTML erzeugt.

Jeder Abschnitt des Dokuments folgt dieser Grundstruktur:

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" commenter " > Commenter name </ div >
      Comment text.
    </ div >
  </ div >
</ section >

und produziert:

Details

Jeder Textabschnitt wird in einer Zeile mit linken und rechten Abschnitten erfasst. Das Element <section class="group"> repräsentiert diese Zeile. Jede Seite hat dann eine DIV mit der content und entweder das quote oder die note . quote ist der annotierte Text, note für die Anmerkungen.

Jeder Teil des hervorgehobenen Textes in der ursprünglichen Quelle (linke Seite) ist mit <mark> -Tags markiert. Diese müssen ein eindeutiges aria-details -Attribut haben, das der id der Annotation entspricht, mit der das visuelle Fokus auf Klick hervorgehoben werden kann. Es kann optional auch eine data-annotation-id haben, um die Annotation zu nummerieren, um Annotationen zu unterscheiden, wenn in einem Abschnitt mehrere enthalten sind.

Entsprechend dem <mark> -Tag ist ein Div mit der annotation oder der annotation-group auf der rechten Seite (die ersteren für einzelne Annotationen, letztere für gruppierte Annotationen). Diese müssen role="comment" und eine id , die genau dem einzigartigen aria-details Wert des hervorgehobenen Textes entspricht, dem er entspricht. Wie beim hervorgehobenen Text kann es eine data-annotation-id haben, um die Annotation zu nummerieren.

Gruppierte Anmerkungen

Innerhalb einer Annotationsgruppe wird es mit der annotation eine oder mehrere Divs geben. Diese können einen DIV mit dem commenter enthalten, um den Schriftsteller zu identifizieren, wenn mehrere Annotatoren am Dokument arbeiten. Diese brauchen keine role="comment , data-annotation-id oder id , da sie innerhalb einer annotation-group mit diesen Attributen verschachtelt sind.

Bei mehreren Anmerkungen innerhalb einer Annotationsgruppe können sie direkt gestapelt oder eingefädelt erscheinen (mit zunehmendem Eindrückungsniveau, um anzuzeigen, dass sie gegenseitig Antworten sind). Um Kommentare zu erfassen, geben Sie die thread -Klasse in den zweiten Kommentar an (die erste Antwort). Alle nachfolgenden Antworten sollten mit der thread-x Klasse markiert werden, wobei x die Eindrückungsstufe von 2–10: thread-2 , thread-3 , ..., thread-10 ist. Lassen Sie die thread -Klassen aus, um mehrere Annotationen ohne Eindrückung in einem Stapel zu rendern.

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" annotation " >
        A comment with indented responses.
      </ div >
      < div class =" annotation thread " > 
        A reply
      </ div >
      < div class =" annotation thread-2 " > 
        A second reply
      </ div >
    </ div >
  </ div >
</ section > 

Andere Quellformate

Das ursprüngliche Leitschrank -Leitfadenprojekt wurde mit PUG und SASS erstellt. Wenn Sie lieber damit arbeiten möchten, lebt dieser Quellcode mit meiner Website -Quelle:

• Mopsdatei
• SASS -Datei

Mobiles Display

Auf diese Weise werden die Anmerkungen auf Mobilgeräten angezeigt: