پشتیبانی از زبان استایل شمارنده CSS: قالب‌بندی بین‌المللی برای مخاطبان جهانی

در دنیای متصل جهانی امروز، توسعه‌دهندگان وب نیاز دارند وب‌سایت‌ها و برنامه‌هایی ایجاد کنند که به مخاطبان متنوع خدمات ارائه دهند. این بدان معناست که نه تنها زبان، بلکه قراردادهای فرهنگی و سیستم‌های شماره‌گذاری مورد استفاده در مناطق مختلف نیز باید در نظر گرفته شوند. استایل‌های شمارنده CSS یک مکانیسم قدرتمند برای قالب‌بندی لیست‌ها و سایر محتوای شماره‌دار به گونه‌ای ارائه می‌دهند که به این تفاوت‌های ظریف فرهنگی احترام بگذارد. این راهنمای جامع قابلیت‌های استایل‌های شمارنده CSS را برای بین‌المللی‌سازی (i18n) بررسی می‌کند و نشان می‌دهد که چگونه به طور مؤثر از آن‌ها استفاده کنیم.

درک استایل‌های شمارنده CSS

شمارنده‌های CSS متغیرهایی هستند که توسط قوانین CSS نگهداری می‌شوند تا تعداد دفعات استفاده از آن‌ها را پیگیری کنند. آن‌ها در درجه اول برای شماره‌گذاری لیست‌ها، سرفصل‌ها و سایر عناصر استفاده می‌شوند. استایل‌های شمارنده CSS این قابلیت را با اجازه دادن به شما برای تعریف سیستم‌های شماره‌گذاری سفارشی فراتر از اعداد استاندارد عربی و رومی گسترش می‌دهند. این برای پشتیبانی از زبان‌ها و ترجیحات فرهنگی مختلف بسیار مهم است.

ویژگی‌های اصلی CSS در استفاده از استایل‌های شمارنده عبارتند از:

• counter-reset: یک شمارنده را با مقدار معینی مقداردهی اولیه یا بازنشانی می‌کند.
• counter-increment: مقدار یک شمارنده را افزایش می‌دهد.
• content: با عناصر شبه ::before یا ::after برای نمایش مقدار شمارنده استفاده می‌شود.
• counter() یا counters(): توابعی که در ویژگی content برای قالب‌بندی مقدار شمارنده استفاده می‌شوند.
• @counter-style: یک استایل شمارنده سفارشی با ویژگی‌های مختلف برای کنترل قالب‌بندی تعریف می‌کند.

قدرت @counter-style

قانون @counter-style قلب بین‌المللی‌سازی استایل شمارنده CSS است. این به شما امکان می‌دهد یک سیستم شماره‌گذاری سفارشی با ویژگی‌های مختلف تعریف کنید که نحوه ارائه مقدار شمارنده را کنترل می‌کنند. بیایید ویژگی‌های کلیدی درون قانون @counter-style را بررسی کنیم:

• system: الگوریتمی را که برای تولید نمایش شمارنده استفاده می‌شود، مشخص می‌کند. مقادیر رایج شامل cyclic، numeric، alphabetic، symbolic، fixed و additive هستند.
• symbols: نمادهای مورد استفاده توسط استایل شمارنده، مانند اعداد، حروف یا کاراکترهای سفارشی را تعریف می‌کند.
• additive-symbols: با سیستم additive برای تعریف نمادها و مقادیر عددی مربوطه آن‌ها استفاده می‌شود.
• suffix: متنی را که بعد از هر نمایش شمارنده اضافه می‌شود (مثلاً یک نقطه یا یک پرانتز بسته) مشخص می‌کند.
• prefix: متنی را که قبل از هر نمایش شمارنده اضافه می‌شود، مشخص می‌کند.
• range: محدوده مقادیری را که استایل شمارنده برای آن‌ها قابل استفاده است، محدود می‌کند.
• pad: حداقل تعداد ارقامی را که باید استفاده شود، مشخص می‌کند و در صورت لزوم با صفرهای ابتدایی پر می‌کند.
• speak-as: نحوه اعلام مقدار شمارنده توسط صفحه‌خوان‌ها را برای دسترسی‌پذیری کنترل می‌کند.
• fallback: یک استایل شمارنده جایگزین را برای استفاده در صورتی که استایل فعلی توسط مرورگر پشتیبانی نشود، مشخص می‌کند.

مثال‌های بین‌المللی‌سازی با @counter-style

اکنون، بیایید برخی از نمونه‌های عملی استفاده از @counter-style برای قالب‌بندی شمارنده‌ها برای زبان‌ها و زمینه‌های فرهنگی مختلف را بررسی کنیم.

1. اعداد عربی با ارقام عربی-هندی

در حالی که اعداد عربی (0-9) به طور گسترده مورد استفاده قرار می‌گیرند، بسیاری از مناطق عربی زبان ترجیح می‌دهند از ارقام عربی-هندی (٠‎-٩‎) استفاده کنند. ما می‌توانیم یک استایل شمارنده برای دستیابی به این هدف ایجاد کنیم:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

این کد یک استایل شمارنده به نام arabic-indic را تعریف می‌کند که از ارقام عربی-هندی به عنوان نماد استفاده می‌کند. ویژگی suffix یک نقطه و یک فاصله بعد از هر عدد اضافه می‌کند. سپس CSS این استایل را به یک لیست مرتب شده (<ol>) اعمال می‌کند تا اعداد را در قالب عربی-هندی نمایش دهد.

2. اعداد رومی (حروف بزرگ و کوچک)

اعداد رومی معمولاً در زمینه‌های مختلف استفاده می‌شوند و استایل‌های شمارنده CSS می‌توانند به راحتی آن‌ها را مدیریت کنند:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

این مثال نشان می‌دهد که چگونه استایل‌های شمارنده اعداد رومی حروف بزرگ (upper-roman) و کوچک (lower-roman) را ایجاد کنید. سپس می‌توانید این استایل‌ها را با استفاده از کلاس‌های CSS (.upper-roman و .lower-roman) به لیست‌های مختلف اعمال کنید. برای مثال:

<ol class="upper-roman">
  <li>آیتم 1</li>
  <li>آیتم 2</li>
  <li>آیتم 3</li>
</ol>

<ol class="lower-roman">
  <li>آیتم 1</li>
  <li>آیتم 2</li>
  <li>آیتم 3</li>
</ol>

3. اعداد گرجی

اعداد گرجی از یک سیستم منحصر به فرد از حروف استفاده می‌کنند. ما می‌توانیم یک استایل شمارنده برای نمایش اعداد در گرجی تعریف کنیم:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

این مثال از سیستم fixed استفاده می‌کند زیرا سیستم شماره‌گذاری گرجی مجموعه محدودی از نمادها را برای 33 عدد اول دارد. ویژگی range استایل شمارنده را به مقادیر بین 1 و 33 محدود می‌کند. برای اعدادی بزرگتر از 33، باید منطق پیچیده‌تری یا سیستم شماره‌گذاری متفاوتی را پیاده‌سازی کنید.

4. اعداد ارمنی

مشابه گرجی، اعداد ارمنی نیز از حروف برای نمایش اعداد استفاده می‌کنند:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

این مثال مشابه مثال گرجی است، با استفاده از سیستم fixed و تعریف حروف ارمنی به عنوان نماد. range روی 1-39 تنظیم شده است که مجموعه اعداد اساسی ارمنی را پوشش می‌دهد.

5. اعداد CJK (چینی، ژاپنی، کره‌ای)

اعداد CJK پیچیدگی بیشتری را ارائه می‌دهند، با اشکال مختلف برای زمینه‌های رسمی و غیررسمی، و سطوح مختلف دانه بندی. بیایید به چینی ساده شده نگاه کنیم:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

توجه داشته باشید که این یک نمایش ساده شده است. پشتیبانی کامل از اعداد CJK، به ویژه برای اعداد بزرگتر، نیاز به پیاده‌سازی پیچیده‌تری دارد که شامل سیستم additive و رسیدگی به مقادیر مکانی (ده‌ها، صدها، هزاران و غیره) است. این کد نمایش اعداد اساسی را نشان می‌دهد.

تکنیک‌ها و ملاحظات پیشرفته

1. ترکیب استایل‌های شمارنده

شما می‌توانید چندین استایل شمارنده را برای ایجاد طرح‌های شماره‌گذاری پیچیده‌تر ترکیب کنید. برای مثال، ممکن است از یک شمارنده اصلی برای فصل‌ها و یک شمارنده ثانویه برای بخش‌ها در هر فصل استفاده کنید.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

این کد یک سیستم شماره‌گذاری سلسله مراتبی ایجاد می‌کند که در آن فصل‌ها به طور متوالی شماره‌گذاری می‌شوند و بخش‌ها در هر فصل شماره‌گذاری می‌شوند (مثلاً 1.1، 1.2، 2.1، 2.2).

2. ملاحظات دسترسی‌پذیری

اطمینان حاصل کنید که استایل‌های شمارنده شما برای کاربران دارای معلولیت قابل دسترسی هستند. از ویژگی speak-as برای کنترل نحوه اعلام مقدار شمارنده توسط صفحه‌خوان‌ها استفاده کنید. برای مثال:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

ویژگی speak-as: numbers; به صفحه‌خوان می‌گوید که مقدار شمارنده را به عنوان یک عدد اعلام کند. گزینه‌های دیگر شامل spell-out (برای نوشتن عدد) و bullets (برای اعلام شمارنده به عنوان نقاط گلوله) است.

علاوه بر این، متن یا توضیحات جایگزین برای هر نماد سفارشی مورد استفاده در استایل‌های شمارنده خود ارائه دهید تا اطمینان حاصل شود که کاربران دارای اختلالات بینایی می‌توانند معنای محتوای شماره‌دار را درک کنند.

3. سازگاری مرورگر

در حالی که استایل‌های شمارنده CSS به طور گسترده توسط مرورگرهای مدرن پشتیبانی می‌شوند، مهم است که نسخه‌های قدیمی‌تر مرورگر را در نظر بگیرید. از ویژگی fallback برای تعیین یک استایل شمارنده جایگزین استفاده کنید که در صورت عدم پشتیبانی مرورگر از استایل اصلی استفاده می‌شود. برای مثال:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

در این مثال، اگر مرورگر از سیستم cyclic یا نمادهای سفارشی پشتیبانی نکند، به استایل لیست disc برمی‌گردد.

4. حساسیت فرهنگی

هنگام پیاده‌سازی استایل‌های شمارنده برای زبان‌ها و فرهنگ‌های مختلف، مراقب حساسیت‌های فرهنگی باشید. در مورد قراردادهای شماره‌گذاری و نمادهای مناسب مورد استفاده در هر منطقه تحقیق کنید. از استفاده از نمادها یا فرمت‌هایی که ممکن است توهین‌آمیز یا نامناسب باشند، خودداری کنید.

برای مثال، برخی از فرهنگ‌ها ممکن است ترجیح دهند از علائم نگارشی یا جداکننده‌های مختلف در سیستم‌های شماره‌گذاری خود استفاده کنند. اطمینان حاصل کنید که استایل‌های شمارنده شما به این ترجیحات احترام می‌گذارند.

کاربردهای عملی و موارد استفاده

استایل‌های شمارنده CSS را می‌توان در طیف گسترده‌ای از سناریوهای توسعه وب استفاده کرد، از جمله:

• تولید فهرست مطالب: به طور خودکار سرفصل‌ها و زیرسرفصل‌ها را در یک فهرست مطالب شماره‌گذاری کنید.
• ایجاد لیست‌های شماره‌دار: لیست‌های شماره‌دار را در زبان‌ها و استایل‌های مختلف قالب‌بندی کنید.
• شماره‌گذاری مراحل در یک آموزش: کاربران را از طریق یک سری مراحل با شماره‌گذاری واضح و از نظر بصری جذاب راهنمایی کنید.
• پیاده‌سازی صفحه‌بندی سفارشی: کنترل‌های صفحه‌بندی سفارشی را با طرح‌های شماره‌گذاری منحصر به فرد ایجاد کنید.
• نمایش لیست‌های رتبه‌بندی شده: رتبه‌بندی‌ها را به روشی بصری جذاب با استفاده از استایل‌های شمارنده مختلف نشان دهید.
• تولید اسناد حقوقی: اسناد حقوقی را با الزامات شماره‌گذاری خاص قالب‌بندی کنید.
• قالب‌بندی مقالات علمی: معادلات، شکل‌ها و جداول را با شماره‌گذاری مناسب نمایش دهید.

بهترین شیوه‌ها برای استفاده از استایل‌های شمارنده CSS

برای اطمینان از اینکه استایل‌های شمارنده CSS شما مؤثر و قابل نگهداری هستند، این بهترین شیوه‌ها را دنبال کنید:

• از نام‌های توصیفی برای استایل‌های شمارنده خود استفاده کنید: نام‌هایی را انتخاب کنید که به وضوح هدف و قالب‌بندی استایل را نشان دهند (مثلاً arabic-indic، upper-roman، georgian).
• استایل‌های شمارنده خود را مدولار نگه دارید: استایل‌های شمارنده جداگانه را برای زبان‌ها و سیستم‌های شماره‌گذاری مختلف تعریف کنید.
• از کلاس‌های CSS برای اعمال استایل‌های شمارنده استفاده کنید: از اعمال استایل‌های شمارنده به طور مستقیم به عناصر خودداری کنید. در عوض، از کلاس‌های CSS برای کنترل قالب‌بندی استفاده کنید.
• استایل‌های شمارنده خود را به طور کامل آزمایش کنید: استایل‌های شمارنده خود را در مرورگرها و دستگاه‌های مختلف آزمایش کنید تا از رندر صحیح آن‌ها اطمینان حاصل کنید.
• استایل‌های شمارنده خود را مستند کنید: مستندات واضحی برای استایل‌های شمارنده خود ارائه دهید، از جمله هدف، قالب‌بندی و نحوه استفاده از آن‌ها.
• دسترسی‌پذیری را در اولویت قرار دهید: همیشه هنگام ایجاد استایل‌های شمارنده دسترسی‌پذیری را در نظر بگیرید و از ویژگی speak-as استفاده کنید تا اطمینان حاصل شود که مقادیر شمارنده به درستی توسط صفحه‌خوان‌ها اعلام می‌شوند.

نتیجه‌گیری

استایل‌های شمارنده CSS یک مکانیسم قدرتمند و انعطاف‌پذیر برای بین‌المللی‌سازی قالب‌بندی محتوای شماره‌دار در وب ارائه می‌دهند. با استفاده از قانون @counter-style و ویژگی‌های مختلف آن، می‌توانید سیستم‌های شماره‌گذاری سفارشی ایجاد کنید که به قراردادهای فرهنگی و تفاوت‌های ظریف زبانی مناطق مختلف احترام می‌گذارند. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید اطمینان حاصل کنید که استایل‌های شمارنده شما مؤثر، قابل نگهداری و برای مخاطبان جهانی قابل دسترسی هستند. با ادامه تکامل توسعه وب، درک و استفاده از استایل‌های شمارنده CSS برای بین‌المللی‌سازی برای ایجاد تجربیات وب واقعاً فراگیر و کاربرپسند اهمیت فزاینده‌ای پیدا می‌کند. قدرت استایل‌های شمارنده CSS را در آغوش بگیرید و وب‌سایت‌هایی ایجاد کنید که با کاربران از تمام گوشه‌های جهان طنین‌انداز شوند.

مطالعه بیشتر

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles