CSS Counter Style Language Support: Global auditoriya uchun xalqarolashtirish formatlash

Bugungi kunda global miqyosda bog'langan dunyoda veb-dasturchilar turli auditoriyalarga mos keladigan veb-saytlar va dasturlarni yaratishlari kerak. Bu nafaqat tilni, balki turli mintaqalarda ishlatiladigan madaniy konventsiyalar va raqamlash tizimlarini ham hisobga olish kerak degan ma'noni anglatadi. CSS counter style-lari ro'yxatlarni va boshqa raqamlangan kontentni ushbu madaniy nozikliklarni hurmat qiladigan tarzda formatlash uchun kuchli mexanizmni ta'minlaydi. Ushbu keng qamrovli qo'llanma xalqarolashtirish (i18n) uchun CSS counter style-larining imkoniyatlarini o'rganadi va ulardan qanday qilib samarali foydalanishni namoyish etadi.

CSS Counter Style-larini tushunish

CSS counter-lari ulardan qancha marta foydalanilganligini kuzatish uchun CSS qoidalari tomonidan saqlanadigan o'zgaruvchilardir. Ular asosan ro'yxatlar, sarlavhalar va boshqa elementlarni raqamlash uchun ishlatiladi. CSS counter style-lari standart arab va Rim raqamlaridan tashqari maxsus raqamlash tizimlarini belgilash imkonini berish orqali ushbu funksionallikni kengaytiradi. Bu turli tillar va madaniy afzalliklarni qo'llab-quvvatlash uchun juda muhimdir.

Counter style-laridan foydalanishda ishtirok etadigan asosiy CSS xususiyatlari:

• counter-reset: Counter-ni ma'lum bir qiymatga ishga tushiradi yoki qayta o'rnatadi.
• counter-increment: Counter qiymatini oshiradi.
• content: Counter qiymatini ko'rsatish uchun ::before yoki ::after psevdo-elementlari bilan birga ishlatiladi.
• counter() yoki counters(): Counter qiymatini formatlash uchun content xususiyati ichida ishlatiladigan funktsiyalar.
• @counter-style: Formatlashni boshqarish uchun turli xil xususiyatlarga ega maxsus counter style-ni belgilaydi.

@counter-style kuchi

@counter-style qoidasi CSS counter style xalqarolashtirishning markazidir. U counter qiymati qanday ko'rsatilishini boshqaradigan turli xil xususiyatlarga ega maxsus raqamlash tizimini belgilash imkonini beradi. Keling, @counter-style qoidasi ichidagi asosiy xususiyatlarni ko'rib chiqaylik:

• system: Counter taqdimotini yaratish uchun ishlatiladigan algoritmni belgilaydi. Umumiy qiymatlarga cyclic, numeric, alphabetic, symbolic, fixed va additive kiradi.
• symbols: Counter style tomonidan ishlatiladigan belgilarni, masalan, raqamlar, harflar yoki maxsus belgilarni belgilaydi.
• additive-symbols: Belgilarni va ularning tegishli son qiymatlarini belgilash uchun additive tizimi bilan birga ishlatiladi.
• suffix: Har bir counter taqdimotidan keyin qo'shiladigan matnni belgilaydi (masalan, nuqta yoki yopuvchi qavs).
• prefix: Har bir counter taqdimotidan oldin qo'shiladigan matnni belgilaydi.
• range: Counter style qo'llaniladigan qiymatlar diapazonini cheklaydi.
• pad: Foydalanish uchun minimal raqamlar sonini belgilaydi, zarur bo'lganda boshlang'ich nollar bilan to'ldiradi.
• speak-as: Qulaylik uchun ekran o'quvchilari tomonidan counter qiymati qanday e'lon qilinishini boshqaradi.
• fallback: Agar joriy style brauzer tomonidan qo'llab-quvvatlanmasa, foydalanish uchun fallback counter style-ni belgilaydi.

@counter-style bilan xalqarolashtirish misollari

Endi turli tillar va madaniy kontekstlar uchun counter-larni formatlash uchun @counter-style dan foydalanishning amaliy misollarini ko'rib chiqaylik.

1. Arab-Hind raqamlari bilan arab raqamlari

Arab raqamlari (0-9) keng qo'llanilgan bo'lsa-da, ko'plab arab tilida so'zlashuvchi mintaqalar arab-hind raqamlaridan (٠‎-٩‎) foydalanishni afzal ko'rishadi. Bunga erishish uchun counter style-ni yaratishimiz mumkin:

@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);
}

Ushbu kod arab-hind raqamlarini belgilar sifatida ishlatadigan arabic-indic nomli counter style-ni belgilaydi. suffix xususiyati har bir raqamdan keyin nuqta va bo'sh joy qo'shadi. Keyin CSS ushbu style-ni tartiblangan ro'yxatga (<ol>) arab-hind formatida raqamlarni ko'rsatish uchun qo'llaydi.

2. Rim raqamlari (katta va kichik harflar)

Rim raqamlari turli xil kontekstlarda keng qo'llaniladi va CSS counter style-lari ularni osongina boshqarishi mumkin:

@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) '. ';
}

Ushbu misol katta (upper-roman) va kichik (lower-roman) Rim raqamli counter style-larini qanday yaratishni ko'rsatadi. Keyin ushbu style-larni CSS sinflari (.upper-roman va .lower-roman) yordamida turli ro'yxatlarga qo'llashingiz mumkin. Masalan:

<ol class="upper-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

<ol class="lower-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

3. Gruzin raqamlari

Gruzin raqamlari harflarning noyob tizimidan foydalanadi. Biz Gruzin tilida raqamlarni ifodalash uchun counter style-ni belgilashimiz mumkin:

@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);
}

Ushbu misol fixed tizimidan foydalanadi, chunki Gruzin raqamlash tizimi dastlabki 33 ta raqam uchun cheklangan belgilarga ega. range xususiyati counter style-ni 1 dan 33 gacha bo'lgan qiymatlar bilan cheklaydi. 33 dan katta raqamlar uchun siz yanada murakkab mantiqni yoki boshqa raqamlash tizimini amalga oshirishingiz kerak bo'ladi.

4. Arman raqamlari

Gruzin tiliga o'xshab, arman raqamlari ham raqamlarni ifodalash uchun harflardan foydalanadi:

@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);
}

Ushbu misol Gruzin misoliga o'xshaydi, fixed tizimidan foydalanadi va arman harflarini belgilar sifatida belgilaydi. range 1-39 ga o'rnatilgan, asosiy arman raqamlar to'plamini qamrab oladi.

5. CJK raqamlari (xitoy, yapon, koreys)

CJK raqamlari ko'proq murakkablikni taklif etadi, rasmiy va norasmiy kontekstlar uchun turli xil shakllar va turli darajadagi granulalar bilan. Keling, soddalashtirilgan xitoy tilini ko'rib chiqaylik:

@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) '、';
}

Shuni yodda tutingki, bu soddalashtirilgan taqdimot. To'liq CJK raqamlarini qo'llab-quvvatlash, ayniqsa katta raqamlar uchun, additive tizimini o'z ichiga olgan va joy qiymatlarini (o'nlar, yuzlar, minglar va hokazo) boshqarishni o'z ichiga olgan yanada murakkab amalga oshirishni talab qiladi. Ushbu kod asosiy raqamlar taqdimotini ko'rsatadi.

Murakkab usullar va mulohazalar

1. Counter style-larni birlashtirish

Yanada murakkab raqamlash sxemalarini yaratish uchun bir nechta counter style-larni birlashtira olasiz. Masalan, siz boblar uchun asosiy counter va har bir bob ichidagi bo'limlar uchun ikkilamchi counterdan foydalanishingiz mumkin.

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) '. ';
}

Ushbu kod ierarxik raqamlash tizimini yaratadi, bunda boblar ketma-ket raqamlanadi va bo'limlar har bir bob ichida raqamlanadi (masalan, 1.1, 1.2, 2.1, 2.2).

2. Qulaylik masalalari

Counter style-laringiz nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lishini ta'minlang. Counter qiymati ekran o'quvchilari tomonidan qanday e'lon qilinishini boshqarish uchun speak-as xususiyatidan foydalaning. Masalan:

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

speak-as: numbers; xususiyati ekran o'quvchisiga counter qiymatini raqam sifatida e'lon qilishni aytadi. Boshqa variantlarga spell-out (raqamni yozish uchun) va bullets (counter-ni marker nuqtalari sifatida e'lon qilish uchun) kiradi.

Bundan tashqari, counter style-laringizda ishlatiladigan har qanday maxsus belgilar uchun muqobil matn yoki tavsiflar taqdim eting, shunda ko'rish qobiliyati cheklangan foydalanuvchilar raqamlangan kontentning ma'nosini tushunishlari mumkin.

3. Brauzer mosligi

CSS counter style-lari zamonaviy brauzerlar tomonidan keng qo'llab-quvvatlangan bo'lsa-da, eski brauzer versiyalarini hisobga olish muhim. Agar brauzer asosiy style-ni qo'llab-quvvatlamasa, ishlatiladigan fallback counter style-ni belgilash uchun fallback xususiyatidan foydalaning. Masalan:

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

Ushbu misolda, agar brauzer cyclic tizimini yoki maxsus belgilarni qo'llab-quvvatlamasa, u disc ro'yxat style-ga qaytadi.

4. Madaniy sezgirlik

Turli tillar va madaniyatlar uchun counter style-larni amalga oshirishda madaniy sezgirlikdan xabardor bo'ling. Har bir mintaqada ishlatiladigan tegishli raqamlash konventsiyalari va belgilarni o'rganing. Haqoratli yoki noo'rin bo'lishi mumkin bo'lgan belgilarni yoki formatlardan foydalanishdan saqlaning.

Masalan, ba'zi madaniyatlar o'zlarining raqamlash tizimlarida turli xil tinish belgilari yoki ajratuvchilardan foydalanishni afzal ko'rishlari mumkin. Counter style-laringiz ushbu afzalliklarni hurmat qilishini ta'minlang.

Amaliy ilovalar va foydalanish holatlari

CSS counter style-lari veb-ishlab chiqish ssenariylarining keng doirasida ishlatilishi mumkin, jumladan:

• Tarkib jadvalini yaratish: Tarkib jadvalidagi sarlavhalar va kichik sarlavhalarni avtomatik ravishda raqamlash.
• Raqamlangan ro'yxatlarni yaratish: Raqamlangan ro'yxatlarni turli tillar va style-larda formatlash.
• O'quv qo'llanmasidagi qadamlarni raqamlash: Foydalanuvchilarga aniq va vizual jozibali raqamlash bilan bir qator qadamlar orqali yo'l ko'rsating.
• Maxsus sahifalashni amalga oshirish: Noyob raqamlash sxemalariga ega maxsus sahifalash elementlarini yaratish.
• Reyting ro'yxatlarini ko'rsatish: Turli counter style-lardan foydalanib, reytinglarni vizual tarzda jalb qiluvchi tarzda ko'rsatish.
• Huquqiy hujjatlarni yaratish: Maxsus raqamlash talablari bilan huquqiy hujjatlarni formatlash.
• Ilmiy maqolalarni formatlash: Tenglamalar, rasmlar va jadvallarni tegishli raqamlash bilan ko'rsatish.

CSS Counter Style-lardan foydalanish uchun eng yaxshi amaliyotlar

CSS counter style-laringiz samarali va saqlanib turishini ta'minlash uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Counter style-laringiz uchun tavsiflovchi nomlardan foydalaning: Style-ning maqsadi va formatlashini aniq ko'rsatadigan nomlarni tanlang (masalan, arabic-indic, upper-roman, georgian).
• Counter style-laringizni modulli saqlang: Turli tillar va raqamlash tizimlari uchun alohida counter style-larni belgilang.
• Counter style-larni qo'llash uchun CSS sinflaridan foydalaning: Counter style-larni to'g'ridan-to'g'ri elementlarga qo'llashdan saqlaning; buning o'rniga formatlashni boshqarish uchun CSS sinflaridan foydalaning.
• Counter style-laringizni yaxshilab sinab ko'ring: Ularning to'g'ri ko'rsatilishini ta'minlash uchun counter style-laringizni turli brauzerlar va qurilmalarda sinab ko'ring.
• Counter style-laringizni hujjatlashtiring: Ularning maqsadi, formatlashi va ishlatilishi, shu jumladan counter style-laringiz uchun aniq hujjatlarni taqdim eting.
• Qulaylikni birinchi o'ringa qo'ying: Counter style-larni yaratishda har doim qulaylikni hisobga oling va counter qiymatlari ekran o'quvchilari tomonidan to'g'ri e'lon qilinishini ta'minlash uchun speak-as xususiyatidan foydalaning.

Xulosa

CSS counter style-lari veb-dagi raqamlangan kontentni formatlashni xalqarolashtirish uchun kuchli va moslashuvchan mexanizmni ta'minlaydi. @counter-style qoidasi va uning turli xususiyatlaridan foydalanib, siz turli mintaqalarning madaniy konventsiyalari va lingvistik nozikliklarini hurmat qiladigan maxsus raqamlash tizimlarini yaratishingiz mumkin. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilib, siz counter style-laringizning samarali, saqlanib turadigan va global auditoriya uchun qulay bo'lishini ta'minlashingiz mumkin. Veb-ishlab chiqish rivojlanishda davom etar ekan, xalqarolashtirish uchun CSS counter style-larini tushunish va ulardan foydalanish chinakam inklyuziv va foydalanuvchilar uchun qulay veb-tajribalarni yaratish uchun tobora muhim ahamiyat kasb etadi. CSS counter style-larining kuchini qabul qiling va dunyoning barcha burchaklaridan kelgan foydalanuvchilar bilan rezonanslashadigan veb-saytlarni yarating.

Qo'shimcha o'qish

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• CSS Counter Styles uchun to'liq qo'llanma