‏neat-annotations: یادداشت دست‌نویس فقط با CSS

صفحهٔ معرفی neat-annotations می‌گه هدفش یه چیز ساده‌ست: روی صفحهٔ وب دقیقاً همون‌طوری که آدم روی کاغذ با ماژیک یه چیزی رو نشون می‌ده، فلش و یادداشت دست‌نویس بکشی. همهٔ کار با CSS انجام می‌شه و هیچ جاوااسکریپتی وسط نیست. نصبش هم یه لینک استایل از jsDelivrه؛ فونت دست‌نویس Shantell Sans اختیاریه و اگه اضافه‌اش نکنی، برچسب‌ها با cursive نوشته می‌شن.

طرز کارش اینه که عنصر inline مورد نظرت رو، یعنی هر تیکه متن یا badge وسط یه خط، با یه span کلاس‌دار می‌پیچی. کلاس ann خود قابلیت رو روشن می‌کنه، یه کلاس جهت مثل ann-n یا ann-nw روی جهت‌های قطب‌نما مشخص می‌کنه فلش از کدوم سمت بیاد، و متن یادداشت توی ویژگی data-note نوشته می‌شه. یعنی خود یادداشت هم توی HTML می‌مونه و جای جدایی برای نگه‌داشتنش لازم نیست.

برای رنگ، پنج رنگ آماده داره (amber، blue، green، red و purple) به‌علاوهٔ یه حالت rainbow متحرک و یه خاکستری گرم به‌عنوان پیش‌فرض. اگه هیچ‌کدوم به تم سایتت نخورد، با متغیر --ann-color هر رنگ CSSی رو مستقیم ست می‌کنی. کلاس ann-no-mark هم اون های‌لایتی که پشت خود عنصر می‌افته رو برمی‌داره، مناسب وقتی که عنصر رنگ خودشو داره.

یه حالت ساده‌تر هم داره: اگه data-note رو اصلاً ننویسی، فلش و برچسب حذف می‌شن و فقط یه های‌لایت مثل ماژیک روی متن می‌مونه.

<p>
  Ship when the
  <span class="ann ann-amber">
    migration guide
  </span>
  is ready.
</p>

دو تا annotation رو هم می‌شه تو هم گذاشت تا از دو طرف به یه چیز اشاره کنن، مثلاً یکی از چپ بگه مسئولش کیه و یکی از راست بگه چه باگیه. برای یادداشت‌های بلند هم متغیر --ann-label-max-width طول خط برچسب رو تعیین می‌کنه و متن خودش می‌شکنه.

نکات کلیدی:

• نصب کامل با یک لینک CSS از jsDelivr، بدون هیچ جاوااسکریپتی
• جهت فلش با کلاس‌های قطب‌نمایی مثل ann-n و ann-nw انتخاب می‌شه و متن یادداشت توی data-note می‌ره
• پنج رنگ آماده، یک حالت rainbow متحرک، و رنگ دلخواه با متغیر --ann-color
• بدون data-note فقط های‌لایت می‌مونه؛ ann-no-mark های‌لایت پشت عنصر رو برمی‌داره
• فونت دست‌نویس Shantell Sans اختیاریه و در نبودش cursive جایگزین می‌شه