annotateダウンロードannotateソースコードのダウンロード

annotate

ウェブサイトデータ

1.0.0

ダウンロード

注釈

ウェブ上でテキストを注釈付けして公開します！このプロジェクトは、「（編集）Latecomer's Guide to Crypto」用に作成されましたが、テキストドキュメントの注釈に使用できます。

https://molly.github.io/annotate/でライブデモをご覧ください。

使い方

index.html 、 styles.css 、およびannotate.jsファイルをプロジェクトにコピーします。スタイリングまたはJavaScriptの動作を変更する場合を除き、 index.htmlファイルを編集する必要があるはずです。このプロジェクトではjavaScriptを必要としないため、除外したい場合は、 annotate.jsファイルを省略し、 <script src="./annotate.js"></script>タグをHTMLファイルから削除してください。 screenshotsフォルダーには、デスクトップ（ index-desktop.png ）とモバイル（ index-mobile.png ）ビューの両方のインデックスページのフルサイズのスクリーンショットがあるため、HTMLが生成するものを確認できます。

ドキュメントの各セクションは、この基本構造に従います。

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

と生産：

詳細

テキストの各セクションは、左および右側のセクションで連続してキャプチャされます。 <section class="group">要素はこの行を表します。その後、各側には、 contentクラスとquoteまたはnoteクラスのDIVがあります。 quoteとは、注釈が付けられたテキストで、注釈用のnoteです。

元のソース（左側）の強調表示されたテキストの各部分には、 <mark>タグが付いています。これらには、注釈のidに対応する一意のaria-details属性が必要である必要があります。これにより、視覚的なフォーカスがクリックを強調します。また、オプションで、セクションに複数があるときに注釈を区別するために、注釈を番号にするためのdata-annotation-idを持つこともできます。

<mark>タグに対応するのは、右側にannotationまたはannotation-groupクラスのいずれかを備えたDIVになります（前者は単一の注釈の場合、後者はグループ化された注釈の場合は後者）。これらにはrole="comment"と、それが対応する強調表示されたテキストの一意のaria-details値と正確に一致するid必要です。強調表示されたテキストと同様に、注釈を番号にするためのdata-annotation-idを持つことができます。

グループ化された注釈

注釈グループ内では、 annotationクラスに1つ以上のDIVがあります。これらには、ドキュメントに作業している複数のアノテーターがある場合、ライターを特定するためにクラスのcommenterとのDIVを含めることができます。これらは、それらの属性を含むannotation-group内にネストされているためrole="comment 、 data-annotation-id 、またはid必要ありません。

注釈グループ内の複数の注釈の場合、それらは直接積み重ねられている、またはねじ込まれたものに見えることがあります（インデントのレベルが増加してレンダリングして、それらが互いに応答していることを示します）。コメントをスレッドするには、2番目のコメント（最初の返信）にthreadクラスを含めます。後続の応答は、 thread-xクラスでマークする必要があります。ここで、 x 2〜10のインデントのレベルです。 thread-2 、 thread-3 、...、 thread-10 。 threadクラスを省略して、インデントなしでスタックで複数の注釈をレンダリングします。

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