‏سایدنوت با CSS، بدون یک خط جاوااسکریپت

نویسنده می‌گه خودش زیاد از sidenote (یعنی یادداشتی که به‌جای ته صفحه، کنار متن توی حاشیه می‌شینه) استفاده می‌کنه. Tufte CSS این کارو بدون جاوااسکریپت انجام می‌ده ولی فقط محتوای inline قبول می‌کنه. CSS anchor positioning که حالا مرورگرهای جدید پشتیبانیش می‌کنن، جایگزین تمیزتریه: یادداشت می‌تونه چند بلاک داشته باشه و روی صفحه‌ی باریک یا مرورگر قدیمی‌تر می‌افته زیر همون پاراگرافی که بهش ارجاع داده. نویسنده می‌گه ایده‌ش رو از پست «Nuclear Anchored Sidenotes» اریک مایر در ۲۰۲۳ گرفته.

ایده‌ی کلی anchor positioning اینه که یه المان رو نسبت به یه المان دیگه که بهش می‌گن anchor بچینی. اینجا anchor همون شماره‌ی ارجاع داخل متنه. نویسنده شماره رو توی یه تگ sup می‌ذاره و اسم anchor رو با یه data attribute به اسم data-anchor مشخص می‌کنه. خود یادداشت هم یه aside با role="note" و همون data-anchor ـه که بعد از پاراگراف میاد. مزیتش اینه که مرورگر متنی، اسکرین‌ریدر و ریدر مود هم یادداشت رو سر جای درستش می‌بینن.

روی ویوپورت باریک یا مرورگر بدون پشتیبانی، یادداشت همون‌جا زیر پاراگراف می‌مونه و فقط رنگش ملایم‌تر می‌شه. از عرض 72rem به بالا و داخل یه بلاک @supports، می‌ره توی حاشیه‌ی راست:

sup[data-anchor] {
  anchor-name: attr(data-anchor type(<custom-ident>));
}
aside[role="note"][data-anchor] {
  anchor-name: --lf-sidenote;
  position: absolute;
  position-anchor: attr(data-anchor type(<custom-ident>));
  top: max(anchor(top), anchor(--lf-sidenote bottom, -1rlh) + 1rlh);
}

تابع attr() اسم anchor رو از خود data attribute درمیاره. چون type() بهش داده شده، مرورگر مقدار رو به‌جای یه رشته‌ی ساده به‌عنوان شناسه‌ی CSS می‌خونه، پس دیگه لازم نیست برای هر یادداشت inline style بنویسی. اون max() هم جلوی روی‌هم‌افتادن یادداشت‌ها رو می‌گیره: هر یادداشت خودش یه anchor به اسم --lf-sidenote هست، پس اگه یادداشت بعدی بخواد با قبلی تداخل کنه می‌ره یک خط پایین‌تر از ته یادداشت قبلی، وگرنه لبه‌ی بالاش با شماره‌ی ارجاع خودش هم‌تراز می‌شه.

نکات کلیدی:

• روش از پست «Nuclear Anchored Sidenotes» اریک مایر (۲۰۲۳) میاد و یادداشت‌ها می‌تونن هر جای HTML بشینن.
• fallback: زیر 72rem یا روی مرورگر بدون anchor positioning، یادداشت زیر پاراگراف و با رنگ #444 می‌مونه.
• attr(data-anchor type()) اسم anchor رو از data attribute می‌گیره و inline style رو حذف می‌کنه.
• هر یادداشت خودش یه anchor به اسم --lf-sidenote ـه و anchor() با مقدار fallback جلوی تداخل یادداشت‌های پشت‌سرهم رو می‌گیره.
• کل راه‌حل بدون حتی یک خط جاوااسکریپت کار می‌کنه.