annotate

Annoter

Annotez et publiez du texte sur le Web! Ce projet a été créé pour "le guide (édité) latinomer de la crypto", mais peut être utilisé pour annoter n'importe quel document texte.

Consultez une démo en direct sur https://molly.github.io/annotate/.

Comment utiliser

Copiez les fichiers index.html , styles.css et annotate.js sur votre projet. Vous ne devez que modifier le fichier index.html , sauf si vous souhaitez modifier le comportement de style ou de javascript. Ce projet ne nécessite pas le JavaScript, donc si vous voulez le laisser de côté, omettez simplement le fichier annotate.js et supprimez le balise <script src="./annotate.js"></script> du fichier html. Le dossier de screenshots possède des captures d'écran pleine grandeur de la page d'index dans les vues de bureau ( index-desktop.png ) et mobiles ( index-mobile.png ), afin que vous puissiez voir ce que le HTML produit.

Chaque section du document suit cette structure de base:

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

et produit:

Détails

Chaque section de texte est capturée dans une ligne avec des sections gauche et droite. L'élément <section class="group"> représente cette ligne. Chaque côté a ensuite une div avec la classe content et les classes quote ou note . quote est le texte annoté, note est pour les annotations.

Chaque partie du texte en surbrillance dans la source d'origine (côté gauche) est marquée avec des balises <mark> . Ceux-ci doivent avoir un attribut aria-details unique qui correspondra à l' id de l'annotation, ce qui permettra de mettre en évidence la mise en évidence visuelle sur le clic. Il peut également éventuellement avoir un data-annotation-id pour numéroter l'annotation, pour aider à distinguer les annotations lorsqu'il y a plusieurs dans une section.

Correspondant à la balise <mark> sera une div avec la classe annotation ou annotation-group sur le côté droit (le premier pour les annotations uniques, le second pour les annotations groupées). Ceux-ci doivent avoir role="comment" et un id qui correspond exactement à la valeur aria-details unique du texte en surbrillance auquel il correspond. Comme pour le texte en surbrillance, il peut avoir un data-annotation-id pour compter l'annotation.

Annotations groupées

Dans un groupe d'annotation, il y aura un ou plusieurs divs avec la classe annotation . Ceux-ci peuvent contenir un div avec le commenter de classe pour identifier l'écrivain, s'il existe plusieurs annotateurs travaillant sur le document. Ceux-ci n'ont pas besoin role="comment , data-annotation-id ou id car ils sont imbriqués dans un annotation-group avec ces attributs.

Dans le cas de plusieurs annotations au sein d'un groupe d'annotation, ils peuvent apparaître directement empilés ou filetés (rendu avec des niveaux croissants d'indentation, pour indiquer qu'ils sont des réponses les uns aux autres). Pour les commentaires du fil, incluez la classe thread sur le deuxième commentaire (la première réponse). Toutes les réponses ultérieures doivent être marquées avec la classe thread-x , où x est le niveau d'indentation de 2 à 10: thread-2 , thread-3 , ..., thread-10 . Omettez les classes thread pour rendre plusieurs annotations dans une pile sans indentation.

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

Autres formats source

Le projet de guide d'origine Latecomer a été créé à l'aide de PUG et SASS. Si vous préférez travailler avec ceux-ci, ce code source vit avec la source de mon site Web:

• Fichier de carburant
• Fichier SASS

Affichage mobile

C'est ainsi que les annotations s'affichent sur mobile: