annotate

Аннотировать

Аннотируйте и публикуйте текст в Интернете! Этот проект был создан для «(отредактированного) Руководства Лакетеров по крипто», но может использоваться для аннотирования любого текстового документа.

Посмотреть живую демонстрацию на https://molly.github.io/annotate/.

Как использовать

Скопируйте файлы index.html , styles.css и annotate.js в ваш проект. Вам нужно только отредактировать файл index.html , если вы не хотите изменить стиль или поведение JavaScript. Этот проект не требует 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"> представляет эту строку. Каждая сторона затем имеет div с классом content и классы quote или note . quote - это текст, который аннотируется, note для аннотаций.

Каждая часть выделенного текста в исходном источнике (левая сторона) отмечена тегами <mark> . У них должен быть уникальный атрибут aria-details , который будет соответствовать id аннотации, что позволит подсвечить визуальную фокусировку на клике. Он также может иметь возможность иметь data-annotation-id , чтобы числа аннотацию, чтобы помочь различить аннотации, когда есть несколько в разделе.

В соответствии с тегом <mark> будет Div с классом annotation или annotation-group с правой стороны (первый для отдельных аннотаций, последний для сгруппированных аннотаций). У них должен быть role="comment" и id , который точно соответствует уникальному значению aria-details выделенного текста, с которым он соответствует. Как и в случае выделенного текста, он может иметь data-annotation-id для числа аннотации.

Сгруппированные аннотации

В группе аннотации будет один или несколько DOV с классом annotation . Они могут содержать Div с commenter класса для идентификации автора, если над документом работают несколько аннотаторов. Они не нуждаются role="comment , data-annotation-id или id , поскольку они вложены в annotation-group с этими атрибутами.

В случае множественных аннотаций в группе аннотации они могут показаться непосредственно сложенными или резьщими (рендеринг с увеличением уровней отступления, чтобы указать, что они являются ответами друг другу). Чтобы поток комментариев, включите класс 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 > 

Другие форматы источника

Оригинальный проект Leatecomer был создан с использованием Pug и Sass. Если вы предпочитаете работать с ними, этот исходный код живет с источником моего веб -сайта:

• Файл мопса
• Sass file

Мобильный дисплей

Так отображаются аннотации на мобильном телефоне: