Рука на сторінці

Ручний шар для звичайних елементів: стрілка і підпис до будь-якого слова, числа, кнопки чи комірки таблиці. Один файл hand.css, без JavaScript. До цього рука жила лише на канвасі, тому анотувати текст звіту було нічим.

Дозування

• Ручний шар вимкнений за замовчуванням. Він зʼявляється тільки тоді, коли автор просить його.
• Максимум три примітки на екран. Четверта перетворює звіт на чернетку.
• Примітка показує на головне і не повторює те, що вже написано поруч.
• Два-чотири слова в підписі. Довше - це вже абзац, і його місце в тексті.
• У формальних документах Word і PDF руки немає ніколи.

Вісім напрямків

Клас задає, з якого боку стоїть примітка. Стрілка сама дивиться на елемент.

Позначка на елементі

Підкреслення - за замовчуванням: воно тримається правила без плашок і повторюється на перенесених рядках. Обведення - для одного слова. Заливка - виняток для інтерфейсів, де фон уже є.

Кольори

Кораловий - основний колір руки. Решта - серії і статуси, коли примітка вказує на конкретну серію графіка.

У роботі

Розмітка

<link rel="stylesheet" href="hand.css">

<span class="pk-ann pk-ann-n" data-note="перевірити">214</span>
<span class="pk-ann pk-ann-se pk-ann-blue pk-mark-circle" data-note="етап 2">31 хв</span>

Біля краю сторінки обирай напрямок усередину: примітка на заході в лівій колонці обріжеться. Зсув примітки, якщо вона наїхала на сусідній текст: style="--pk-ann-x:8px; --pk-ann-y:-4px". Вимкнути малювання: клас pk-ann-still. Довжина рядка підпису: --pk-ann-label-max.