CSS skaitiklių stilių kalbos palaikymas: internacionalizavimo formatavimas pasaulinei auditorijai

Šiuolaikiniame globaliai susietame pasaulyje interneto kūrėjai turi kurti svetaines ir programas, kurios atitiktų įvairių auditorijų poreikius. Tai reiškia, kad reikia atsižvelgti ne tik į kalbą, bet ir į kultūrines konvencijas bei numeravimo sistemas, naudojamas skirtinguose regionuose. CSS skaitiklių stiliai suteikia galingą mechanizmą, skirtą sąrašams ir kitam numeruotam turiniui formatuoti taip, kad būtų paisoma šių kultūrinių niuansų. Šis išsamus vadovas išnagrinės CSS skaitiklių stilių galimybes internacionalizavimui (i18n) ir parodys, kaip juos efektyviai naudoti.

Kas yra CSS skaitiklių stiliai

CSS skaitikliai yra kintamieji, kuriuos palaiko CSS taisyklės, skirtos sekti, kiek kartų jie buvo panaudoti. Jie pirmiausia naudojami sąrašams, antraštėms ir kitiems elementams numeruoti. CSS skaitiklių stiliai praplečia šią funkcionalumą, leidžiant apibrėžti pasirinktines numeravimo sistemas, be standartinių arabiškų ir romėniškų skaitmenų. Tai yra labai svarbu palaikant skirtingas kalbas ir kultūrines preferencijas.

Pagrindinės CSS savybės, susijusios su skaitiklių stilių naudojimu, yra:

• counter-reset: Inicializuoja arba atstato skaitiklį iki tam tikros vertės.
• counter-increment: Padidina skaitiklio vertę.
• content: Naudojama su ::before arba ::after pseudoelementais, siekiant parodyti skaitiklio vertę.
• counter() arba counters(): Funkcijos, naudojamos content savybėje, skirtos formatuoti skaitiklio vertę.
• @counter-style: Apibrėžia pasirinktinį skaitiklio stilių su įvairiomis savybėmis, skirtomis valdyti formatavimą.

@counter-style galia

@counter-style taisyklė yra CSS skaitiklių stilių internacionalizavimo širdis. Ji leidžia apibrėžti pasirinktinę numeravimo sistemą su įvairiomis savybėmis, kurios valdo, kaip rodoma skaitiklio vertė. Panagrinėkime pagrindines @counter-style taisyklės savybes:

• system: Nurodo algoritmą, naudojamą skaitiklio atvaizdavimui generuoti. Dažnos reikšmės apima cyclic, numeric, alphabetic, symbolic, fixed ir additive.
• symbols: Apibrėžia skaitiklio stiliaus naudojamus simbolius, tokius kaip skaitmenys, raidės ar pasirinktiniai simboliai.
• additive-symbols: Naudojamas su additive sistema apibrėžti simbolius ir jų atitinkamas skaitines vertes.
• suffix: Nurodo tekstą, pridedamą po kiekvieno skaitiklio atvaizdavimo (pvz., taškas arba uždarantis skliaustas).
• prefix: Nurodo tekstą, pridedamą prieš kiekvieną skaitiklio atvaizdavimą.
• range: Apriboja reikšmių diapazoną, kurioms skaitiklio stilius yra taikomas.
• pad: Nurodo minimalų skaitmenų skaičių, kurį reikia naudoti, prireikus užpildant nuliais priekyje.
• speak-as: Kontroliuoja, kaip skaitiklio vertė pranešama ekrano skaitytuvų, siekiant užtikrinti prieinamumą.
• fallback: Nurodo atsarginį skaitiklio stilių, kuris bus naudojamas, jei dabartinio stiliaus naršyklė nepalaiko.

Internacionalizavimo pavyzdžiai naudojant @counter-style

Dabar panagrinėkime keletą praktinių @counter-style naudojimo pavyzdžių, skirtų skaitikliams formatuoti skirtingoms kalboms ir kultūrinėms aplinkybėms.

1. Arabiški skaitmenys su arabiškais-indiškais skaitmenimis

Nors arabiški skaitmenys (0-9) yra plačiai naudojami, daugelis arabų kalba kalbančių regionų mieliau naudoja arabiškus-indiškus skaitmenis (٠‎-٩‎). Galime sukurti skaitiklio stilių, kad tai pasiektume:

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

Šis kodas apibrėžia skaitiklio stilių, pavadintą arabic-indic, kuris naudoja arabiškus-indiškus skaitmenis kaip simbolius. suffix savybė prideda tašką ir tarpą po kiekvieno skaičiaus. Tada CSS taiko šį stilių numeruotam sąrašui (<ol>), kad būtų rodomi skaičiai arabišku-indišku formatu.

2. Romėniški skaitmenys (didžiosios ir mažosios raidės)

Romėniški skaitmenys dažnai naudojami įvairiose aplinkose, o CSS skaitiklių stiliai gali juos lengvai apdoroti:

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

Šis pavyzdys demonstruoja, kaip sukurti tiek didžiųjų raidžių (upper-roman), tiek mažųjų raidžių (lower-roman) romėniškų skaitmenų skaitiklių stilius. Tada galite taikyti šiuos stilius skirtingiems sąrašams naudodami CSS klases (.upper-roman ir .lower-roman). Pavyzdžiui:

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

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

3. Gruziniški skaitmenys

Gruziniški skaitmenys naudoja unikalią raidžių sistemą. Galime apibrėžti skaitiklio stilių, kad skaičiai būtų atvaizduojami gruziniškai:

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

Šiame pavyzdyje naudojama fixed sistema, nes gruziniškoje numeravimo sistemoje yra ribotas simbolių rinkinys pirmiesiems 33 skaičiams. Savybė range apriboja skaitiklio stilių reikšmėmis nuo 1 iki 33. Didesniems nei 33 skaičiams reikėtų įdiegti sudėtingesnę logiką arba kitą numeravimo sistemą.

4. Armėniški skaitmenys

Panašiai kaip gruzinų, armėnų skaitmenys taip pat naudoja raides skaičiams atvaizduoti:

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

Šis pavyzdys panašus į gruzinų pavyzdį, naudojant fixed sistemą ir apibrėžiant armėnų raides kaip simbolius. range nustatytas 1-39, apimant pagrindinį armėnų skaitmenų rinkinį.

5. CJK skaitmenys (kinų, japonų, korėjiečių)

CJK skaitmenys yra sudėtingesni, su skirtingomis formomis formaliam ir neformaliam kontekstui bei įvairiais detalumo lygiais. Panagrinėkime supaprastintą kinų kalbą:

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

Atkreipkite dėmesį, kad tai supaprastintas atvaizdavimas. Visapusiškam CJK skaitmenų palaikymui, ypač didesniems skaičiams, reikėtų sudėtingesnio įgyvendinimo, apimančio additive sistemą ir vietos verčių (dešimtys, šimtai, tūkstančiai ir kt.) apdorojimą. Šis kodas demonstruoja pagrindinį skaitmenų atvaizdavimą.

Pažangios technikos ir svarstymai

1. Skaitiklių stilių derinimas

Galite derinti kelis skaitiklių stilius, kad sukurtumėte sudėtingesnes numeravimo schemas. Pavyzdžiui, galite naudoti pirminį skaitiklį skyriams ir antrinį skaitiklį poskyriams kiekviename skyriuje.

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

Šis kodas sukuria hierarchinę numeravimo sistemą, kurioje skyriai numeruojami nuosekliai, o poskyriai numeruojami kiekviename skyriuje (pvz., 1.1, 1.2, 2.1, 2.2).

2. Prieinamumo aspektai

Užtikrinkite, kad jūsų skaitiklių stiliai būtų prieinami vartotojams su negalia. Naudokite speak-as savybę, kad valdytumėte, kaip skaitiklio vertę praneša ekrano skaitytuvai. Pavyzdžiui:

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

Savybė speak-as: numbers; nurodo ekrano skaitytuvui pranešti skaitiklio vertę kaip skaičių. Kitos parinktys apima spell-out (skaičiaus išvardijimui raidėmis) ir bullets (skaitiklio pranešimui kaip žymėtųjų punktų).

Be to, pateikite alternatyvų tekstą arba aprašymus bet kokiems pasirinktiniams simboliams, naudojamiems jūsų skaitiklių stiliuose, kad užtikrintumėte, jog vartotojai su regos sutrikimais galėtų suprasti numeruoto turinio prasmę.

3. Naršyklių suderinamumas

Nors CSS skaitiklių stiliai plačiai palaikomi šiuolaikinėse naršyklėse, svarbu atsižvelgti į senesnes naršyklių versijas. Naudokite fallback savybę, kad nurodytumėte atsarginį skaitiklio stilių, kuris bus naudojamas, jei naršyklė nepalaiko pagrindinio stiliaus. Pavyzdžiui:

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

Šiame pavyzdyje, jei naršyklė nepalaiko cyclic sistemos arba pasirinktinių simbolių, ji grįš prie disc sąrašo stiliaus.

4. Kultūrinis jautrumas

Įgyvendindami skaitiklių stilius skirtingoms kalboms ir kultūroms, atsižvelkite į kultūrinį jautrumą. Ištirkite atitinkamas numeravimo konvencijas ir simbolius, naudojamus kiekviename regione. Venkite naudoti simbolių ar formatų, kurie gali būti įžeidžiantys ar netinkami.

Pavyzdžiui, kai kurios kultūros gali norėti naudoti skirtingus skyrybos ženklus arba skirtukus savo numeravimo sistemose. Užtikrinkite, kad jūsų skaitiklių stiliai gerbtų šias preferencijas.

Praktinės programos ir naudojimo atvejai

CSS skaitiklių stiliai gali būti naudojami įvairiuose interneto kūrimo scenarijuose, įskaitant:

• Turinio rodyklės generavimas: Automatiškai numeruoti antraštes ir poskyrius turinio rodyklėje.
• Numeruotų sąrašų kūrimas: Formatuoti numeruotus sąrašus skirtingomis kalbomis ir stiliais.
• Veiksmų numeravimas pamokoje: Vadovauti vartotojams per veiksmų seriją su aiškiu ir vizualiai patraukliu numeravimu.
• Pasirinktinio puslapiavimo įgyvendinimas: Kurti pasirinktinius puslapiavimo valdiklius su unikaliomis numeravimo schemomis.
• Reitinguotų sąrašų rodymas: Rodyti reitingus vizualiai patraukliu būdu naudojant skirtingus skaitiklių stilius.
• Teisinių dokumentų generavimas: Formatuoti teisinius dokumentus su specifiniais numeravimo reikalavimais.
• Mokslinių straipsnių formatavimas: Rodyti lygtis, paveikslus ir lenteles su tinkamu numeravimu.

Geriausia praktika naudojant CSS skaitiklių stilius

Norėdami užtikrinti, kad jūsų CSS skaitiklių stiliai būtų efektyvūs ir lengvai prižiūrimi, laikykitės šių geriausios praktikos patarimų:

• Naudokite aprašomuosius pavadinimus savo skaitiklių stiliams: Pasirinkite pavadinimus, kurie aiškiai nurodo stiliaus paskirtį ir formatavimą (pvz., arabic-indic, upper-roman, georgian).
• Išlaikykite modulinius skaitiklių stilius: Apibrėžkite atskirus skaitiklių stilius skirtingoms kalboms ir numeravimo sistemoms.
• Naudokite CSS klases skaitiklių stiliams taikyti: Venkite taikyti skaitiklių stilius tiesiogiai elementams; vietoj to, naudokite CSS klases formatavimui valdyti.
• Kruopščiai išbandykite savo skaitiklių stilius: Išbandykite savo skaitiklių stilius skirtingose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog jie atvaizduojami teisingai.
• Dokumentuokite savo skaitiklių stilius: Pateikite aiškią dokumentaciją savo skaitiklių stiliams, įskaitant jų paskirtį, formatavimą ir naudojimą.
• Prioritetas – prieinamumas: Visada atsižvelkite į prieinamumą kurdami skaitiklių stilius ir naudokite speak-as savybę, kad užtikrintumėte, jog skaitiklio vertės būtų teisingai pranešamos ekrano skaitytuvų.

Išvada

CSS skaitiklių stiliai suteikia galingą ir lanksčią mechanizmą, skirtą interneto numeruoto turinio formatavimo internacionalizavimui. Pasinaudodami @counter-style taisykle ir jos įvairiomis savybėmis, galite sukurti pasirinktines numeravimo sistemas, kurios atsižvelgia į skirtingų regionų kultūrines konvencijas ir kalbinius niuansus. Laikydamiesi šiame vadove aprašytų geriausios praktikos patarimų, galite užtikrinti, kad jūsų skaitiklių stiliai būtų efektyvūs, lengvai prižiūrimi ir prieinami pasaulinei auditorijai. Vystantis interneto kūrimui, CSS skaitiklių stilių supratimas ir naudojimas internacionalizavimui taps vis svarbesnis kuriant išties įtraukiančias ir patogias vartotojui interneto patirtis. Pasinaudokite CSS skaitiklių stilių galia ir kurkite svetaines, kurios rezonuoja su vartotojais iš visų pasaulio kampelių.

Tolimesnis skaitymas

• MDN Žiniatinklio dokumentai: @counter-style
• CSS skaitiklių stiliai 3 lygis
• Išsamus CSS skaitiklių stilių vadovas