‏ترفند @counter-style برای مخفی کردن متن

نویسنده می‌گه at-rule به اسم @counter-style توی CSS کمک می‌کنه که از نشانگرهای پیش‌فرض مرورگر فاصله بگیریم و خودمون تعیین کنیم نشانگر آیتم‌های لیست چه شکلی باشه؛ یعنی به جای گلوله یا عدد، هر گلیف دلخواهی. ولی نکتهٔ اصلی مقاله اینه که کاربرد این قابلیت خیلی فراتر از لیسته و می‌شه ازش برای یه جور شعبده استفاده کرد.

مهم‌ترین توصیفگر (descriptor) که باید بفهمیم system هست؛ همون الگوریتمی که عدد شمارنده رو به رشته تبدیل می‌کنه. مقدار پیش‌فرضش symbolic ـه، که توش کاراکترهای symbols تکرار و چند برابر می‌شن تا عددهای بزرگ‌تر رو نشون بدن. نکتهٔ کلیدی اینه که این رشته رو لازم نیست حتماً کنار آیتم لیست بذاریم؛ با ترکیب counter() و content می‌شه مستقل چاپش کرد.

اولین مثال کاربردی، قایم کردن ۱۲ رقم اول شماره کارت بانکیه. یه counter-style به اسم dot می‌سازیم که سمبلش نقطه‌ست، بعد همون رو سه بار با فاصله روی عدد می‌اندازیم تا سه بلوک چهارتایی نقطه بسازه:

@counter-style dot {
  symbols: '\2022';
}
#number::after {
  counter-set: n 4;
  content: counter(n, dot) " " counter(n, dot) " " counter(n, dot);
}

نویسنده می‌گه یه راه دیگه هم برای ساختن دنباله هست: توصیفگر pad. این یکی حداقل طول رو تعیین می‌کنه و اگه رشته کوتاه‌تر باشه با یه کاراکتر پرش می‌کنه؛ همونی که معمولاً ازش برای تبدیل ۱، ۲، ۳ به ۰۱، ۰۲، ۰۳ استفاده می‌شه. اینجا symbols رو خالی می‌ذاریم و خود کاراکتر (مثلاً ستاره) رو توی pad می‌دیم تا چهار تا ستاره بسازه. توصیفگرهای suffix و prefix هم برای ساختن دنباله به دردت می‌خورن.

بخش جذاب‌تر، ساختن دنباله از کاراکترهای ترکیبیه. سیستم‌های numeric و alphabetic که موقعیتی (positional) هستن، می‌تونن symbols رو با هم ترکیب کنن و رشته‌هایی مثل 231 یا BCA بسازن. فرق‌شون اینه که numeric از نمایش موقعیتی استاندارد استفاده می‌کنه ولی alphabetic از نوع دوسویه (bijective) ـه که توش مقداری برای صفر وجود نداره.

به گفتهٔ نویسنده، با همین alphabetic می‌شه یه دنبالهٔ دلخواه مثل XXYYZZX ساخت تا یه پین‌کد ۷ رقمی رو بپوشونه. کافیه اون دنباله رو به عنوان عدد در مبنای ۳ (چون سه تا کاراکتر داریم) در نظر بگیری و با یه مبدل آنلاین، مقدار دهدهیش رو پیدا کنی و به counter-set بدی. آخر مقاله هم اشاره می‌کنه که این ترفندها برای تولید متن شبه‌تصادفی به درد می‌خورن و توی مقالهٔ بعدی سراغ الگوریتم cyclic برای ساختن چرخانندهٔ کلمه و الگوریتم additive می‌ره.

نکات کلیدی:

• @counter-style فقط برای نشانگر لیست نیست؛ می‌شه باهاش بدون جاوااسکریپت دنباله‌ای از کاراکترها ساخت
• مهم‌ترین توصیفگرش system ـه؛ الگوریتمی که عدد شمارنده رو به رشته تبدیل می‌کنه
• با ترکیب counter() و content می‌شه این رشته رو مستقل از آیتم لیست چاپ کرد
• سیستم‌های numeric و alphabetic کاراکترها رو ترکیب می‌کنن و رشته‌های مرکب می‌سازن
• یه کاربرد عملیش، پوشوندن شماره کارت یا پین‌کد پشت نقطه و ستاره‌ست