---
title: لیستی با حروف ابجد
category: راهنما
tags: [ابجد, css, list-style-type, وب, counter-style, شماره‌گذاری, استیل]
published: True
uuid: 7e35945f-ed23-4e1e-ab83-1aacff21a23b
---
شاید برای شما هم پیش آمده باشد که خواسته باشید لیستی را در وب به سبک و سیاق کشورمان با ارقام فارسی و یا حروف ابجد شماره‌گذاری کنید. در گذشته این کار امکانپذیر نبود. اما خب، امروز هر کار دلمان بخواهد می‌توانیم انجام بدهیم.


## استیل شماره‌گذاری
هدف این پست معرفی [پیشنهاد جدیدی](http://www.w3.org/TR/css-counter-styles-3/) بنام `CSS Counter Styles Level 3` است که توسط کنسرسیوم جهانی وب به 3 CSS اضافه شده است. این پیشنهاد همچنان در دست تکمیل است و نسخه‌های مختلف آن را می‌توان در [سایت اینترنتی](https://drafts.csswg.org/css-counter-styles-3/) گروه کاری[^1] CSS  مشاهده کرد. 

در حالت عادی یک لیست مرتب شده[^2] در HTML اینطور تعریف می‌شود:

~~~html
{% raw %}
<ol>
<li>آیتم اول</li>
<li>آیتم دوم</li>
... الی آخر
</ol>
{% endraw %}
~~~

خروجی پیش‌فرض چنین لیستی چنین خواهد بود:

<ol style="list-style-type:decimal" >
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>سر آیتم
    <ol style="list-style-type:decimal">
        <li>زیر آیتم اول</li>
        <li>زیر آیتم دوم</li>
    </ol>
</li>
</ol>

اولین کاری که دوست داریم بکنیم اینست که ارقام را فارسی کنیم. باید بخاطر داشت که کدهای ارقام فارسی با عربی فرق می‌کند. صفر تا نه را در فارسی اینطور می‌نویسیم: ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ و در عربی اینطور: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ (به ارقام چهار و پنج و شش توجه کنید) تفاوت‌های جزئی دیگری هم هست، مثلا در نوشتن کاف (ك) و ی (ي). هنوز هم روزی نیست که نوشتاری نبینم که بی هیچ گونه توجهی به این نکات ظریف، زشت و غلط نوشته و منتشر شده است.

برگردیم سر فارسی سازی خودمان. با ست کردن ‬یک پراپرتی CSS از تگ `ol` بنام `list-style-type` می‌توان نحوه شماره‌گذاری لیست را تغییر داد. این پراپرتی چیز جدیدی نیست و در CSS نسخه ۲.۱ ‬‬[تعریف شده](http://www.w3.org/TR/CSS2/generate.html#propdef-list-style-type) است و مقادیر مورد قبول آن هم مشخص شده است:

~~~text
'list-style-type'
  Value:  	disc | circle | square | decimal | 
  decimal-leading-zero | lower-roman | upper-roman | 
  lower-greek | lower-latin | upper-latin | armenian | 
  georgian | lower-alpha | upper-alpha | none | inherit
  Initial:  	disc
  Applies to:  	elements with 'display: list-item'
  Inherited:  	yes
  Percentages:  	N/A
  Media:  	visual
  Computed value:  	as specified 
~~~

اما در نسخه سوم CSS طبق توضیحی که در شرح این [پیش‌نویس](https://drafts.csswg.org/css-counter-styles-3) آمده است مقادیر جدیدی برای این پراپرتی پذیرفته می‌شود، منجمله _persian_. بنابراین مقدار این پراپرتی را برابر با _persian_ قرار می‌دهیم تا به نتیجه دلخواه برسیم:

~~~html
{% raw %}
<ol style="list-style-type:persian" >
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>سر آیتم
    <ol style="list-style-type:persian">
        <li>زیر آیتم اول</li>
        <li>زیر آیتم دوم</li>
    </ol>
</li>
</ol>
{% endraw %}
~~~


حالا خروجی ما به شکل زیر در می‌آید که مطلوب ماست:


<ol style="list-style-type:persian" >
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>سر آیتم
    <ol style="list-style-type:persian">
        <li>زیر آیتم اول</li>
        <li>زیر آیتم دوم</li>
    </ol>
</li>
</ol>

این پراپرتی کاربردهای گسترده‌تری می‌تواند داشته باشد که با مطالعه ‎[مقالات سایت توسعه‌دهندگان موزیلا](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)  می‌توانید با آنها بیشتر آشنا بشوید. در ضمن در همین سایت می‌توانید سایر مقادیر ممکن برای این پراپرتی را ببینید و شاید کارهای جالبی به فکرتان برسد که انجام بدهید.

## تعریف استیل‌های دلخواه
اما این همه‌ی ماجرا نیست. به جز افزوده شدن مقادیر مختلف برای پراپرتی `list-style-type`، امکان تعریف مقادیر دلخواه هم فراهم شده است. مقدار این پراپرتی می‌تواند یکی از چهار گزینه زیر باشد:

1. `Symbol()`
2. `none`
3. `<string>`
4. `<custom-ident>`

اولی برای تعریف درون خطی یک مقدار جدید است. دومی یعنی لیست هیچ استیلی نداشته باشد. سومی هم یک رشته دلخواه را برای هر آیتم لیست نمایش می‌دهد. ما با آخری کار داریم. این گزینه یا یکی از شناسه‌های از پیش تعریف شده است که پیش‌تر اشاره کردیم. یا می‌تواند شناسه‌ای باشد که توسط `@counter-style rule` ‬[تعریف](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style) شده باشد. هر `counter-style` (که از اینجا به بعد استیل شماره‌گذاری می‌خوانیمش) یک نام و تعدادی صفت دارد. به کمک این استیل‌های شماره‌گذاری می‌توانیم هر شکل و شمایلی به شماره‌گذاری لیست‌هایمان بدهیم. موزیلا یک [سایت نمایشی](https://mdn.github.io/css-counter-style-demo/) هم دارد که می‌توانید استیل‌های مختلف را تغییر بدهید و هم کد و هم خروجی‌اش را ببینید. روش استاندارد تعریف بدینگونه است:

~~~text
@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}

where 
<counter-style-name> = <custom-ident>
~~~

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

## حروف ابجد
ویکی‌پدیای فارسی [حروف ابجد](https://fa.wikipedia.org/wiki/%D8%A7%D8%A8%D8%AC%D8%AF) را اینطور معرفی می‌کند: «حروف اَبجَد شیوه‌ای برای مرتب‌سازی حروف زبان عربی است که بر پایه الفبای اولیه خط فنیقی مرتب شده‌اند. گاهی این شیوه در شماره‌گذاری موارد یا صفحات به کار می‌رود.»‏‏[^3] امیدوارم که شما از عربی بودن حروف ابجد نترسید! زبانها جزو شگفت‌انگیزترین دستاوردهای انسان هستند. زبانها تنها مدیومی برای انتقال دانش و اطلاعات در بعد مکان و زمان هستند و باید موقع بررسی آنها این نرخ انتقال اطلاعات فاکتور سنجش ما باشد و نه چیز دیگری.


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

به گفته ویکی‌پدیای فارسی (و انگلیسی) ترتیب حروف ابجد اینگونه است:

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


~~~css
@counter-style abjad {
  system: additive;
  range: 1 1000;
  additive-symbols: 1000 "\63A", 900 "\638", 800 "\636",
   700 "\630", 600 "\62E", 500 "\62B", 400 "\62A", 300 "\634",
   200 "\631", 100 "\642", 90 "\635", 80 "\641", 70 "\639",
    60 "\633", 50 "\646", 40 "\645", 30 "\644",
   20 "\6AF", 10 "\649", 9 "\637", 8 "\62D", 7 "\698",
    6 "\648", 5 "\FEEB", 4 "\62F", 3 "\686",
   2 "\67E", 1 "\627";
}
~~~


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

<ol style="list-style-type:abjad" >
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>سر آیتم
    <ol style="list-style-type:abjad">
        <li>زیر آیتم اول</li>
        <li>زیر آیتم دوم</li>
    </ol>
</li>
</ol>


## حُسن خِتام
حسن ختام این مطلب هم اشاره به علت نوشتن این پست است. من با دوست خوبم ‏[لطفی](http://luthfi.idris.web.id/)، که یک وبلاگ‌نویس اندونزیایی است، قرار گذاشته‌ایم که در ماه ژانویه هر هفته یک پست منتشر کنیم. به قولی شده‌ایم `Accountability Partner` یکدیگر. یعنی جویای وبلاگ نویسی یکدیگر می‌شویم و به همدیگر حساب پس می‌دهیم. ابتدا ترس بود از اینکه چه بنویسیم ولی برای من که این وبسایت خودش مطالب خودش را فراهم می‌کند. می‌شود گفت که روزی‌اش را خودش فراهم می‌کند. هربار که می‌خواهم چیزی بنویسم، کارهایی که برای وبسایت کرده‌ام می‌شود بهانه‌ای برای نوشتن یک پست جدید. از جایی که وبسایت هم فنی است خب من هم تنبلی می‌کنم و همانها را به عنوان مقاله می‌نویسم!

[^1]: Working Group
[^2]: Ordered List