annotate
1.0.0
Anotasi dan publikasikan teks di web! Proyek ini dibuat untuk "Panduan Latecomer (yang diedit) untuk Crypto", tetapi dapat digunakan untuk memberi anotasi dokumen teks apa pun.
Lihat demo langsung di https://molly.github.io/annotate/.
Salin file index.html , styles.css , dan annotate.js ke proyek Anda. Anda hanya perlu mengedit file index.html , kecuali jika Anda ingin mengubah perilaku gaya atau javascript. Proyek ini tidak memerlukan JavaScript, jadi jika Anda ingin meninggalkannya, cukup hilangkan file annotate.js dan hapus tag <script src="./annotate.js"></script> dari file html. Folder screenshots memiliki tangkapan layar ukuran penuh dari halaman indeks di kedua desktop ( index-desktop.png ) dan tampilan seluler ( index-mobile.png ), sehingga Anda dapat melihat apa yang dihasilkan HTML.
Setiap bagian dokumen mengikuti struktur dasar ini:
< 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 >dan menghasilkan:
Setiap bagian teks ditangkap berturut-turut dengan bagian tangan kiri dan kanan. Elemen <section class="group"> mewakili baris ini. Setiap pihak kemudian memiliki div dengan kelas content dan kelas quote atau note . quote adalah teks yang dijelaskan, note untuk anotasi.
Setiap bagian dari teks yang disorot dalam sumber asli (sisi kiri) ditandai dengan tag <mark> . Ini harus memiliki atribut aria-details yang unik yang akan sesuai dengan id anotasi, yang akan memungkinkan fokus visual menyorot pada klik. Ini juga dapat secara opsional memiliki data-annotation-id untuk memberi nomor anotasi, untuk membantu membedakan anotasi ketika ada beberapa di bagian.
Sesuai dengan tag <mark> akan menjadi div dengan kelas annotation atau annotation-group di sisi kanan (yang pertama untuk anotasi tunggal, yang terakhir untuk anotasi yang dikelompokkan). Ini harus memiliki role="comment" dan id yang persis cocok dengan nilai aria-details unik dari teks yang disorot yang sesuai. Seperti halnya teks yang disorot, ia dapat memiliki data-annotation-id untuk memberi nomor anotasi.
Dalam kelompok anotasi, akan ada satu atau lebih divs dengan kelas annotation . Ini dapat berisi div dengan commenter kelas untuk mengidentifikasi penulis, jika ada beberapa annotator yang mengerjakan dokumen. Ini tidak membutuhkan role="comment , data-annotation-id , atau id karena mereka bersarang dalam annotation-group dengan atribut tersebut.
Dalam kasus beberapa anotasi dalam kelompok anotasi, mereka dapat muncul secara langsung ditumpuk, atau berulir (rendering dengan meningkatnya tingkat indentasi, untuk menunjukkan bahwa mereka saling membalas). Untuk komentar utas, sertakan kelas thread pada komentar kedua (balasan pertama). Setiap balasan selanjutnya harus ditandai dengan kelas thread-x , di mana x adalah tingkat lekukan dari 2-10: thread-2 , thread-3 , ..., thread-10 . Hilangkan kelas thread untuk membuat beberapa anotasi dalam tumpukan tanpa lekukan.
< 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 > 
Proyek Panduan Latecomer asli dibuat menggunakan Pug dan Sass. Jika Anda lebih suka bekerja dengan itu, kode sumber itu hidup dengan sumber situs web saya:
Beginilah penampilan anotasi di ponsel:
