‏پنهان‌کردن متن با @counter-style در CSS

نویسنده (Preethi Sam) تو این مقاله یه کاربرد غیرمعمول از at-rule به اسم @counter-style در CSS رو نشون می‌ده. این قابلیت معمولاً برای عوض‌کردن نشانگر (marker) لیست‌ها به کار می‌ره، یعنی همون کاراکترهایی که قبل از هر آیتم لیست میان مثل نقطه یا شماره. ولی نویسنده می‌گه کاربردش فراتر از اینه و ازش برای یه ترفند استفاده می‌کنه: ساختن یه دنباله از کاراکترها برای پنهان‌کردن داده، بدون اینکه لازم باشه دستی اون رشته رو بچینیم.

مهم‌ترین descriptor برای فهمیدن این at-rule، همون system هست؛ یعنی الگوریتمی که عدد شمارنده‌ی صحیح رو به یه رشته تبدیل می‌کنه. مقدار پیش‌فرضش symbolic ـه که توش کاراکترهای symbols تکرار و چند برابر می‌شن تا مقدار رو نشون بدن. نکته‌ی کلیدی اینه که این رشته رو می‌شه مستقل از لیست هم چاپ کرد، با کمک counter() و خاصیت content روی یه pseudo-element، که همین رویکرد پایه‌ی همه‌ی مثال‌هاست.

اولین مثال کاربردی، قایم‌کردن ۱۲ رقم اول شماره‌ی کارت بانکیه. یه شمارنده با مقدار ۴ به چهار تا نقطه تبدیل می‌شه و سه بار با فاصله تکرار می‌شه تا روی سه بلوک چهارتایی بیفته:

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

نویسنده اشاره می‌کنه که با فونت‌های غیرمونواسپیس باید letter-spacing رو تنظیم کنی تا نقطه‌ها یکنواخت روی ارقام بشینن. یه راه جایگزین هم استفاده از descriptor به اسم pad ـه که یه حداقل طول برای کاراکترها تعیین می‌کنه؛ اگه symbols خالی باشه، خود کاراکترِ pad (مثلاً ستاره) فضا رو پر می‌کنه. اینجوری هم می‌شه دنباله‌ی موردنظر رو ساخت.

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

مثال آخر، قایم‌کردن یه پین‌کد ۷ رقمی با دنباله‌ی دلخواهه. نویسنده توضیح می‌ده که چون این سیستم‌ها بر پایه‌ی نمادگذاری موقعیتی کار می‌کنن، می‌شه دنباله‌ی موردنظر رو از مبنای کاراکترها به مبنای ۱۰ تبدیل کرد و همون عدد دهدهی رو به counter-set داد تا CSS خودش اون دنباله رو بسازه. در پایان نویسنده می‌گه این تکنیک‌ها برای تولید متن شبه‌تصادفی هم به درد می‌خورن و قراره تو مقاله‌ی بعدی با الگوریتم‌های cyclic و additive یه چرخونده‌ی کلمه هم بسازه.

نکات کلیدی:

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