دعم لغات نمط عدادات CSS: تنسيق التدويل للجماهير العالمية

\n\n

في عالم اليوم المتصل عالميًا، يحتاج مطورو الويب إلى إنشاء مواقع وتطبيقات تلبي احتياجات جماهير متنوعة. هذا يعني عدم مراعاة اللغة فحسب، بل أيضًا التقاليد الثقافية وأنظمة الترقيم المستخدمة في المناطق المختلفة. توفر أنماط عدادات CSS آلية قوية لتنسيق القوائم والمحتوى المرقم الآخر بطريقة تحترم هذه الفروق الثقافية الدقيقة. سيستكشف هذا الدليل الشامل قدرات أنماط عدادات CSS للتدويل (i18n) ويوضح كيفية استخدامها بفعالية.

\n\n

فهم أنماط عدادات CSS

\n\n

عدادات CSS هي متغيرات يتم الاحتفاظ بها بواسطة قواعد CSS لتتبع عدد مرات استخدامها. تُستخدم بشكل أساسي لترقيم القوائم والعناوين والعناصر الأخرى. تعمل أنماط عدادات CSS على توسيع هذه الوظيفة من خلال السماح لك بتعريف أنظمة ترقيم مخصصة تتجاوز الأرقام العربية والرومانية القياسية. هذا أمر بالغ الأهمية لدعم اللغات والتفضيلات الثقافية المختلفة.

\n\n

خصائص CSS الأساسية المستخدمة في أنماط العدادات هي:

\n\n

\n
• counter-reset: تهيئة أو إعادة تعيين العداد إلى قيمة محددة.
\n
• counter-increment: زيادة قيمة العداد.
\n
• content: تُستخدم مع العناصر الزائفة ::before أو ::after لعرض قيمة العداد.
\n
• counter() أو counters(): دوال تُستخدم ضمن خاصية content لتنسيق قيمة العداد.
\n
• @counter-style: تُعرف نمط عداد مخصص بخصائص متنوعة للتحكم في التنسيق.
\n

\n\n

قوة @counter-style

\n\n

قاعدة @counter-style هي جوهر تدويل أنماط عدادات CSS. تسمح لك بتعريف نظام ترقيم مخصص بخصائص متنوعة تتحكم في كيفية عرض قيمة العداد. دعنا نفحص الخصائص الرئيسية ضمن قاعدة @counter-style:

\n\n

\n
• system: يحدد الخوارزمية المستخدمة لتوليد تمثيل العداد. تشمل القيم الشائعة cyclic، numeric، alphabetic، symbolic، fixed، و additive.
\n
• symbols: يُعرف الرموز المستخدمة بواسطة نمط العداد، مثل الأرقام أو الحروف أو الأحرف المخصصة.
\n
• additive-symbols: يُستخدم مع نظام additive لتعريف الرموز وقيمها الرقمية المقابلة.
\n
• suffix: يحدد النص الذي يُلحق بعد كل تمثيل للعداد (على سبيل المثال، نقطة أو قوس إغلاق).
\n
• prefix: يحدد النص الذي يُلحق قبل كل تمثيل للعداد.
\n
• range: يقيد نطاق القيم التي ينطبق عليها نمط العداد.
\n
• pad: يحدد الحد الأدنى لعدد الأرقام المراد استخدامها، مع إضافة أصفار بادئة إذا لزم الأمر.
\n
• speak-as: يتحكم في كيفية إعلان قارئات الشاشة لقيمة العداد من أجل سهولة الوصول.
\n
• fallback: يحدد نمط عداد احتياطيًا لاستخدامه إذا كان النمط الحالي غير مدعوم من قبل المتصفح.
\n

\n\n

أمثلة التدويل مع @counter-style

\n\n

الآن، دعنا نستكشف بعض الأمثلة العملية لاستخدام @counter-style لتنسيق العدادات للغات وسياقات ثقافية مختلفة.

\n\n

1. الأرقام العربية بأرقام عربية هندية

\n\n

بينما تُستخدم الأرقام العربية (0-9) على نطاق واسع، تفضل العديد من المناطق الناطقة باللغة العربية استخدام الأرقام العربية الهندية (٠‎-٩‎). يمكننا إنشاء نمط عداد لتحقيق ذلك:

\n\n

\n\n@counter-style arabic-indic {\n  system: numeric;\n  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';\n  suffix: '. ';\n}\n\nol {\n  list-style: none;\n  counter-reset: item;\n}\n\nol li {\n  counter-increment: item;\n}\n\nol li::before {\n  content: counter(item, arabic-indic);\n}\n\n

\n\n

يعرّف هذا الكود نمط عداد يُسمى arabic-indic يستخدم الأرقام العربية الهندية كرموز. تُضيف خاصية suffix نقطة ومسافة بعد كل رقم. ثم تُطبق CSS هذا النمط على قائمة مرتبة (<ol>) لعرض الأرقام بتنسيق عربي هندي.

\n\n

2. الأرقام الرومانية (الأحرف الكبيرة والصغيرة)

\n\n

تُستخدم الأرقام الرومانية بشكل شائع في سياقات مختلفة، ويمكن لأنماط عدادات CSS التعامل معها بسهولة:

\n\n

\n\n@counter-style upper-roman {\n  system: upper-roman;\n}\n\n@counter-style lower-roman {\n  system: lower-roman;\n}\n\nol.upper-roman {\n  list-style: none;\n  counter-reset: item;\n}\n\nol.upper-roman li {\n  counter-increment: item;\n}\n\nol.upper-roman li::before {\n  content: counter(item, upper-roman) '. ';\n}\n\nol.lower-roman {\n  list-style: none;\n  counter-reset: item;\n}\n\nol.lower-roman li {\n  counter-increment: item;\n}\n\nol.lower-roman li::before {\n  content: counter(item, lower-roman) '. ';\n}\n\n

\n\n

يوضح هذا المثال كيفية إنشاء أنماط عداد للأرقام الرومانية بالأحرف الكبيرة (upper-roman) والصغيرة (lower-roman). يمكنك بعد ذلك تطبيق هذه الأنماط على قوائم مختلفة باستخدام فئات CSS (.upper-roman و .lower-roman). على سبيل المثال:

\n\n

\n\n<ol class="upper-roman">\n  <li>العنصر 1</li>\n  <li>العنصر 2</li>\n  <li>العنصر 3</li>\n</ol>\n\n<ol class="lower-roman">\n  <li>العنصر 1</li>\n  <li>العنصر 2</li>\n  <li>العنصر 3</li>\n</ol>\n\n

\n\n

3. الأرقام الجورجية

\n\n

تستخدم الأرقام الجورجية نظامًا فريدًا من الحروف. يمكننا تعريف نمط عداد لتمثيل الأرقام باللغة الجورجية:

\n\n

\n\n@counter-style georgian {\n  system: fixed;\n  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';\n  suffix: '. ';\n  range: 1 33;\n}\n\nol.georgian {\n  list-style: none;\n  counter-reset: item;\n}\n\nol.georgian li {\n  counter-increment: item;\n}\n\nol.georgian li::before {\n  content: counter(item, georgian);\n}\n\n

\n\n

يستخدم هذا المثال نظام fixed لأن نظام الترقيم الجورجي يحتوي على مجموعة محدودة من الرموز للأرقام الـ 33 الأولى. تحدد خاصية range نمط العداد للقيم بين 1 و 33. بالنسبة للأرقام الأكبر من 33، ستحتاج إلى تطبيق منطق أكثر تعقيدًا أو نظام ترقيم مختلف.

\n\n

4. الأرقام الأرمنية

\n\n

على غرار الجورجية، تستخدم الأرقام الأرمنية أيضًا الحروف لتمثيل الأرقام:

\n\n

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

\n\n

هذا المثال مشابه للمثال الجورجي، حيث يستخدم نظام fixed ويعرف الحروف الأرمنية كرموز. تم تعيين range على 1-39، لتغطية مجموعة الأرقام الأرمنية الأساسية.

\n\n

5. أرقام CJK (الصينية، اليابانية، الكورية)

\n\n

تقدم أرقام CJK تعقيدًا أكبر، مع أشكال مختلفة للسياقات الرسمية وغير الرسمية، ومستويات متفاوتة من التفاصيل. دعنا نلقي نظرة على الصينية المبسطة:

\n\n

\n\n@counter-style simplified-chinese {\n  system: numeric;\n  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';\n  suffix: '';\n}\n\n@counter-style simplified-chinese-formal {\n  system: fixed;\n  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';\n  suffix: '';\n}\n\nol.simplified-chinese {\n  list-style: none;\n  counter-reset: item;\n}\n\nol.simplified-chinese li {\n  counter-increment: item;\n}\n\nol.simplified-chinese li::before {\n  content: counter(item, simplified-chinese) '،';\n}\n\nol.simplified-chinese-formal {\n  list-style: none;\n  counter-reset: item;\n}\n\nol.simplified-chinese-formal li {\n  counter-increment: item;\n}\n\nol.simplified-chinese-formal li::before {\n  content: counter(item, simplified-chinese-formal) '،';\n}\n\n

\n\n

لاحظ أن هذا تمثيل مبسط. يتطلب الدعم الكامل لأرقام CJK، خاصة للأعداد الكبيرة، تطبيقًا أكثر تعقيدًا يتضمن نظام additive والتعامل مع قيم المنازل (العشرات، المئات، الآلاف، إلخ). يوضح هذا الكود تمثيلًا رقميًا أساسيًا.

\n\n

تقنيات واعتبارات متقدمة

\n\n

1. دمج أنماط العدادات

\n\n

يمكنك دمج أنماط عداد متعددة لإنشاء مخططات ترقيم أكثر تعقيدًا. على سبيل المثال، قد تستخدم عدادًا أساسيًا للفصول وعدادًا ثانويًا للأقسام داخل كل فصل.

\n\n

\n\nbody {\n  counter-reset: chapter section;\n}\n\nh1 {\n  counter-increment: chapter;\n  counter-reset: section;\n}\n\nh2 {\n  counter-increment: section;\n}\n\nh1::before {\n  content: counter(chapter) '. '; \n}\n\nh2::before {\n  content: counter(chapter) '.' counter(section) '. '; \n}\n\n

\n\n

ينشئ هذا الكود نظام ترقيم هرمي حيث يتم ترقيم الفصول بالتسلسل، ويتم ترقيم الأقسام داخل كل فصل (على سبيل المثال، 1.1، 1.2، 2.1، 2.2).

\n\n

2. اعتبارات سهولة الوصول

\n\n

تأكد من أن أنماط العدادات الخاصة بك سهلة الوصول للمستخدمين ذوي الإعاقة. استخدم خاصية speak-as للتحكم في كيفية إعلان قارئات الشاشة لقيمة العداد. على سبيل المثال:

\n\n

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

\n\n

تخبر خاصية speak-as: numbers; قارئ الشاشة بإعلان قيمة العداد كعدد. تشمل الخيارات الأخرى spell-out (لتهجئة الرقم) و bullets (لإعلان العداد كنقاط تعداد نقطي).

\n\n

بالإضافة إلى ذلك، قدم نصًا بديلاً أو أوصافًا لأي رموز مخصصة مستخدمة في أنماط العدادات الخاصة بك لضمان أن المستخدمين ضعاف البصر يمكنهم فهم معنى المحتوى المرقم.

\n\n

3. توافق المتصفح

\n\n

بينما تدعم المتصفحات الحديثة أنماط عدادات CSS على نطاق واسع، من الضروري مراعاة إصدارات المتصفحات القديمة. استخدم خاصية fallback لتحديد نمط عداد احتياطي سيتم استخدامه إذا كان المتصفح لا يدعم النمط الأساسي. على سبيل المثال:

\n\n

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

\n\n

في هذا المثال، إذا لم يدعم المتصفح نظام cyclic أو الرموز المخصصة، فسيعود إلى نمط قائمة disc.

\n\n

4. الحساسية الثقافية

\n\n

عند تنفيذ أنماط العدادات للغات والثقافات المختلفة، كن واعيًا للحساسيات الثقافية. ابحث عن اصطلاحات الترقيم والرموز المناسبة المستخدمة في كل منطقة. تجنب استخدام رموز أو تنسيقات قد تكون مسيئة أو غير مناسبة.

\n\n

على سبيل المثال، قد تفضل بعض الثقافات استخدام علامات ترقيم أو فواصل مختلفة في أنظمة الترقيم الخاصة بها. تأكد من أن أنماط العدادات الخاصة بك تحترم هذه التفضيلات.

\n\n

التطبيقات العملية وحالات الاستخدام

\n\n

يمكن استخدام أنماط عدادات CSS في مجموعة واسعة من سيناريوهات تطوير الويب، بما في ذلك:

\n\n

\n
• إنشاء جدول المحتويات: ترقيم العناوين والعناوين الفرعية تلقائيًا في جدول المحتويات.
\n
• إنشاء قوائم مرقمة: تنسيق القوائم المرقمة بلغات وأنماط مختلفة.
\n
• ترقيم الخطوات في برنامج تعليمي: توجيه المستخدمين عبر سلسلة من الخطوات بترقيم واضح وجذاب بصريًا.
\n
• تنفيذ ترقيم الصفحات المخصص: إنشاء عناصر تحكم ترقيم صفحات مخصصة بأنظمة ترقيم فريدة.
\n
• عرض القوائم المصنفة: إظهار التصنيفات بطريقة جذابة بصريًا باستخدام أنماط عدادات مختلفة.
\n
• إنشاء مستندات قانونية: تنسيق المستندات القانونية بمتطلبات ترقيم محددة.
\n
• تنسيق الأوراق العلمية: عرض المعادلات والأشكال والجداول بترقيم مناسب.
\n

\n\n

أفضل الممارسات لاستخدام أنماط عدادات CSS

\n\n

لضمان فعالية أنماط عدادات CSS وسهولة صيانتها، اتبع أفضل الممارسات التالية:

\n\n

\n
• استخدم أسماء وصفية لأنماط العدادات الخاصة بك: اختر أسماء تشير بوضوح إلى الغرض والتنسيق للنمط (مثل arabic-indic، upper-roman، georgian).
\n
• حافظ على أنماط العدادات الخاصة بك معيارية: عرّف أنماط عدادات منفصلة للغات وأنظمة الترقيم المختلفة.
\n
• استخدم فئات CSS لتطبيق أنماط العدادات: تجنب تطبيق أنماط العدادات مباشرة على العناصر؛ بدلاً من ذلك، استخدم فئات CSS للتحكم في التنسيق.
\n
• اختبر أنماط العدادات الخاصة بك بدقة: اختبر أنماط العدادات الخاصة بك في متصفحات وأجهزة مختلفة لضمان عرضها بشكل صحيح.
\n
• وثّق أنماط العدادات الخاصة بك: قدم وثائق واضحة لأنماط العدادات الخاصة بك، بما في ذلك الغرض منها، وتنسيقها، واستخدامها.
\n
• إعطاء الأولوية لإمكانية الوصول: ضع دائمًا في اعتبارك إمكانية الوصول عند إنشاء أنماط عدادات واستخدم خاصية speak-as لضمان إعلان قيم العدادات بشكل صحيح بواسطة قارئات الشاشة.
\n

\n\n

الخلاصة

\n\n

توفر أنماط عدادات CSS آلية قوية ومرنة لتدويل تنسيق المحتوى المرقم على الويب. من خلال الاستفادة من قاعدة @counter-style وخصائصها المختلفة، يمكنك إنشاء أنظمة ترقيم مخصصة تحترم التقاليد الثقافية والفروق اللغوية الدقيقة للمناطق المختلفة. باتباع أفضل الممارسات الموضحة في هذا الدليل، يمكنك ضمان أن أنماط العدادات الخاصة بك فعالة، قابلة للصيانة، وسهلة الوصول لجمهور عالمي. مع استمرار تطور تطوير الويب، سيصبح فهم واستخدام أنماط عدادات CSS للتدويل ذا أهمية متزايدة لإنشاء تجارب ويب شاملة حقًا وسهلة الاستخدام. احتضن قوة أنماط عدادات CSS وأنشئ مواقع ويب يتردد صداها لدى المستخدمين من جميع أنحاء العالم.

\n\n

قراءات إضافية

\n\n

\n
• وثائق MDN Web: @counter-style
\n
• مستوي 3 لأنماط عدادات CSS
\n
• دليل شامل لأنماط عدادات CSS
\n