CSS काउंटर स्टाइल भाषा समर्थन: वैश्विक दर्शकों के लिए अंतर्राष्ट्रीयकरण स्वरूपण

आज की वैश्विक रूप से जुड़ी दुनिया में, वेब डेवलपर्स को ऐसी वेबसाइटें और एप्लिकेशन बनाने की ज़रूरत है जो विविध दर्शकों की ज़रूरतों को पूरा करें। इसका मतलब न केवल भाषा पर विचार करना है, बल्कि विभिन्न क्षेत्रों में उपयोग की जाने वाली सांस्कृतिक परंपराओं और संख्या प्रणालियों पर भी ध्यान देना है। CSS काउंटर स्टाइल सूचियों और अन्य क्रमांकित सामग्री को इस तरह से प्रारूपित करने के लिए एक शक्तिशाली तंत्र प्रदान करते हैं जो इन सांस्कृतिक बारीकियों का सम्मान करता है। यह व्यापक गाइड अंतर्राष्ट्रीयकरण (i18n) के लिए CSS काउंटर स्टाइल की क्षमताओं का पता लगाएगा और दिखाएगा कि उनका प्रभावी ढंग से उपयोग कैसे किया जाए।

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 काउंटर स्टाइल की शक्ति को अपनाएं और ऐसी वेबसाइटें बनाएं जो दुनिया के सभी कोनों के उपयोगकर्ताओं के साथ प्रतिध्वनित हों।

अग्रिम पठन

• एमडीएन वेब डॉक्स: @counter-style
• सीएसएस काउंटर स्टाइल्स लेवल 3
• सीएसएस काउंटर स्टाइल्स के लिए एक संपूर्ण गाइड