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

neat-annotations یه پروژهٔ متن‌باز با مجوز MIT ـه که کارش یه چیز مشخصه: کنار هر بخشی از صفحه فلش دست‌کشیده و برچسب دست‌نویس می‌ذاره، همون کاری که با ماژیک روی یه اسکرین‌شات می‌کنی. کل چیزی که لازم داری یه فایل CSS مستقله؛ نه جاوااسکریپت می‌خواد، نه build step (یعنی مرحلهٔ ساخت و کامپایل پروژه).

کار کردن باهاش ساده‌ست. فایل رو از jsDelivr لینک می‌کنی یا خودت میزبانیش می‌کنی، بعد المنتی که می‌خوای علامت بزنی رو با کلاس ann می‌پیچی و متن برچسب رو تو ویژگی data-note می‌نویسی:

<span class="ann ann-n ann-amber" data-note="no refresh needed">in real time</span>

کلاس ann-n یعنی فلش به سمت شمال (بالا) نشونه می‌ره و برچسب زیر المنت می‌شینه. هشت جهت از ann-n تا ann-nw داری، پس می‌تونی از هر طرفی به یه چیز اشاره کنی؛ حتی می‌شه annotationها رو تو هم گذاشت تا چند فلش از چند سمت به یک هدف برسن.

برای رنگ، حالت پیش‌فرض یه خاکستری گرمه که خودشو با تم تنظیم می‌کنه و شش کلاس آماده هم هست: ann-amber، ann-blue، ann-green، ann-red، ann-purple و ann-rainbow. هر کلاس رنگ فلش، برچسب و هایلایت خود المنت رو با هم عوض می‌کنه و ann-rainbow بین رنگ‌ها انیمیشن می‌ده ولی prefers-reduced-motion رو رعایت می‌کنه. رنگ دلخواهتو هم مستقیم با متغیر --ann-color می‌دی.

تنظیمات ریزتر رو هم همه با متغیرهای CSS روی خود المنت می‌دی: --ann-font برای فونت برچسب (پیش‌فرض Shantell Sans و در نبودش یه فونت cursive)، --ann-target-gap با مقدار ۵ پیکسل برای فاصلهٔ فلش تا المنت، --ann-label-max-width با ۱۵۰ پیکسل برای عرض برچسب قبل از شکستن خط، و --ann-rotate با منفی ۴ درجه برای کجی برچسب. اگه data-note و کلاس جهت رو برداری، فقط هایلایت متن می‌مونه بدون فلش.

دوتا نکتهٔ عملی هم تو مستندات هست. اول اینکه این فلش‌ها بیرون از المنت هدف می‌شینن و هیچ فضایی برای خودشون رزرو نمی‌کنن، پس باید دور خط‌هایی که علامت می‌زنی حاشیهٔ کافی بذاری وگرنه روی بقیهٔ محتوا می‌افتن. دوم اینکه سازنده تأکید کرده این‌ها فقط یه افزودنی بصری‌ان؛ نباید تنها جای نمایش اطلاعات ضروری مثل وضعیت یا پیام خطا باشن و همون محتوا باید تو HTML قابل‌دسترس هم بیاد یا با aria-describedby به هدف وصل شه.

نکات کلیدی:

• یه فایل CSS مستقل با مجوز MIT، بدون جاوااسکریپت و بدون build step.
• کلاس پایه ann، هشت جهت از ann-n تا ann-nw، و متن برچسب تو data-note.
• شش رنگ آماده (amber، blue، green، red، purple، rainbow) با پشتیبانی از تم روشن و تاریک.
• تنظیم با متغیرهای CSS مثل --ann-color و --ann-label-max-width با پیش‌فرض ۱۵۰ پیکسل.
• فلش‌ها فضا رزرو نمی‌کنن و نباید تنها حامل اطلاعات ضروری باشن.