CSS skaitītāju stilu atbalsts: Internacionalizācijas formatēšana globālai auditorijai

Mūsdienu globāli savienotajā pasaulē tīmekļa izstrādātājiem ir jāveido tīmekļa vietnes un lietojumprogrammas, kas atbilst dažādām auditorijām. Tas nozīmē ne tikai valodas, bet arī dažādos reģionos izmantoto kultūras konvenciju un numerācijas sistēmu apsvēršanu. CSS skaitītāju stili nodrošina jaudīgu mehānismu sarakstu un cita numurēta satura formatēšanai, ievērojot šīs kultūras nianses. Šī visaptverošā rokasgrāmata izpētīs CSS skaitītāju stilu iespējas internacionalizācijai (i18n) un parādīs, kā tos efektīvi izmantot.

CSS skaitītāju stilu izpratne

CSS skaitītāji ir mainīgie, ko uztur CSS noteikumi, lai sekotu to lietošanas reižu skaitam. Tos galvenokārt izmanto, lai numurētu sarakstus, virsrakstus un citus elementus. CSS skaitītāju stili paplašina šo funkcionalitāti, ļaujot definēt pielāgotas numerācijas sistēmas, kas pārsniedz standarta arābu un romiešu ciparus. Tas ir ļoti svarīgi dažādu valodu un kultūras preferenču atbalstam.

Galvenās CSS īpašības, kas saistītas ar skaitītāju stilu izmantošanu, ir:

• counter-reset: Inicializē vai atiestata skaitītāju uz noteiktu vērtību.
• counter-increment: Palielina skaitītāja vērtību.
• content: Tiek izmantota ar ::before vai ::after pseidoelementiem, lai parādītu skaitītāja vērtību.
• counter() vai counters(): Funkcijas, ko izmanto content īpašībā, lai formatētu skaitītāja vērtību.
• @counter-style: Definē pielāgotu skaitītāja stilu ar dažādām īpašībām, lai kontrolētu formatēšanu.

@counter-style spēks

@counter-style noteikums ir CSS skaitītāju stilu internacionalizācijas pamatā. Tas ļauj definēt pielāgotu numerācijas sistēmu ar dažādām īpašībām, kas kontrolē, kā tiek renderēta skaitītāja vērtība. Apskatīsim galvenās īpašības @counter-style noteikumā:

• system: Nosaka algoritmu, ko izmanto, lai ģenerētu skaitītāja attēlojumu. Bieži sastopamās vērtības ir cyclic, numeric, alphabetic, symbolic, fixed un additive.
• symbols: Definē simbolus, ko izmanto skaitītāja stils, piemēram, ciparus, burtus vai pielāgotus rakstzīmes.
• additive-symbols: Tiek izmantota ar additive sistēmu, lai definētu simbolus un to atbilstošās ciparu vērtības.
• suffix: Nosaka tekstu, kas tiek pievienots pēc katra skaitītāja attēlojuma (piemēram, punktu vai aizverošo iekavu).
• prefix: Nosaka tekstu, kas tiek pievienots pirms katra skaitītāja attēlojuma.
• range: Ierobežo vērtību diapazonu, kuram ir piemērojams skaitītāja stils.
• pad: Nosaka minimālo lietojamo ciparu skaitu, nepieciešamības gadījumā papildinot ar vadošajiem nullēm.
• speak-as: Kontrolē, kā ekrāna lasītāji paziņo skaitītāja vērtību pieejamībai.
• fallback: Nosaka rezerves skaitītāja stilu, ko izmantot, ja pašreizējo stilu pārlūkprogramma neatbalsta.

Internacionalizācijas piemēri ar @counter-style

Tagad izpētīsim dažus praktiskus @counter-style izmantošanas piemērus, lai formatētu skaitītājus dažādām valodām un kultūras kontekstiem.

1. Arābu cipari ar arābu-indiešu cipariem

Lai gan plaši tiek izmantoti arābu cipari (0-9), daudzi arābu valodā runājoši reģioni dod priekšroku arābu-indiešu cipariem (٠‎-٩‎). Mēs varam izveidot skaitītāja stilu, lai to sasniegtu:

@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 kods definē skaitītāja stilu ar nosaukumu arabic-indic, kas izmanto arābu-indiešu ciparus kā simbolus. suffix īpašība pievieno punktu un atstarpi pēc katra skaitļa. Pēc tam CSS attiecina šo stilu uz sakārtotu sarakstu (<ol>), lai skaitļus parādītu arābu-indiešu formātā.

2. Romiešu cipari (lielie un mazie burti)

Romiešu cipari tiek plaši izmantoti dažādos kontekstos, un CSS skaitītāju stili tos var viegli apstrādāt:

@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 piemērs parāda, kā izveidot gan lielos (upper-roman), gan mazos (lower-roman) romiešu ciparu skaitītāju stilus. Pēc tam jūs varat attiecināt šos stilus uz dažādiem sarakstiem, izmantojot CSS klases (.upper-roman un .lower-roman). Piemēram:

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

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

3. Gruzīnu cipari

Gruzīnu cipari izmanto unikālu burtu sistēmu. Mēs varam definēt skaitītāja stilu, lai attēlotu skaitļus gruzīnu valodā:

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

Šis piemērs izmanto fixed sistēmu, jo gruzīnu numerācijas sistēmai ir ierobežots simbolu kopums pirmajiem 33 skaitļiem. range īpašība ierobežo skaitītāja stilu līdz vērtībām no 1 līdz 33. Skaitļiem, kas lielāki par 33, būtu nepieciešama sarežģītāka loģika vai cita numerācijas sistēma.

4. Armēņu cipari

Līdzīgi kā gruzīnu, arī armēņu cipari izmanto burtus, lai attēlotu skaitļus:

@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 piemērs ir līdzīgs gruzīnu piemēram, izmantojot fixed sistēmu un definējot armēņu burtus kā simbolus. range ir iestatīts uz 1-39, aptverot pamata armēņu ciparu kopu.

5. CJK cipari (ķīniešu, japāņu, korejiešu)

CJK cipari piedāvā lielāku sarežģītību, ar dažādām formām formāliem un neformāliem kontekstiem, kā arī mainīgu detalizācijas pakāpi. Apskatīsim vienkāršotos ķīniešu valodu:

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

Ņemiet vērā, ka šī ir vienkāršota attēlošana. Pilnīgs CJK ciparu atbalsts, īpaši lielākiem skaitļiem, prasītu sarežģītāku ieviešanu, izmantojot additive sistēmu un apstrādājot vietu vērtības (desmiti, simti, tūkstoši utt.). Šis kods demonstrē pamata ciparu attēlojumu.

Papildu metodes un apsvērumi

1. Skaitītāju stilu kombinēšana

Varat kombinēt vairākus skaitītāju stilus, lai izveidotu sarežģītākas numurēšanas shēmas. Piemēram, varat izmantot primāro skaitītāju nodaļām un sekundāro skaitītāju sadaļām katras nodaļas ietvaros.

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 kods izveido hierarhisku numurēšanas sistēmu, kur nodaļas tiek numurētas secīgi, un sadaļas tiek numurētas katras nodaļas ietvaros (piemēram, 1.1, 1.2, 2.1, 2.2).

2. Pieejamības apsvērumi

Pārliecinieties, ka jūsu skaitītāju stili ir pieejami personām ar invaliditāti. Izmantojiet speak-as īpašību, lai kontrolētu, kā ekrāna lasītāji paziņo skaitītāja vērtību. Piemēram:

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

speak-as: numbers; īpašība norāda ekrāna lasītājam paziņot skaitītāja vērtību kā skaitli. Citas opcijas ietver spell-out (skaitļa izrunāšanai) un bullets (skaitītāja paziņošanai kā vienumu sarakstiem).

Turklāt sniedziet alternatīvu tekstu vai aprakstus jebkuriem pielāgotiem simboliem, ko izmantojat savos skaitītāju stilos, lai nodrošinātu, ka lietotāji ar redzes traucējumiem var saprast numurētā satura nozīmi.

3. Pārlūkprogrammu savietojamība

Lai gan mūsdienu pārlūkprogrammas plaši atbalsta CSS skaitītāju stilus, ir svarīgi ņemt vērā vecākas pārlūkprogrammu versijas. Izmantojiet fallback īpašību, lai norādītu rezerves skaitītāja stilu, kas tiks izmantots, ja pārlūkprogramma neatbalsta primāro stilu. Piemēram:

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

Šajā piemērā, ja pārlūkprogramma neatbalsta cyclic sistēmu vai pielāgotos simbolus, tā atgriezīsies pie disc saraksta stila.

4. Kultūras jutīgums

Ieviešot skaitītāju stilus dažādām valodām un kultūrām, ievērojiet kultūras jutīgumu. Izpētiet piemērotās numerācijas konvencijas un simbolus, ko izmanto katrā reģionā. Izvairieties izmantot simbolus vai formātus, kas var būt aizskaroši vai nepiemēroti.

Piemēram, dažas kultūras var dot priekšroku dažādu punktu vai atdalītāju izmantošanai savās numerācijas sistēmās. Pārliecinieties, ka jūsu skaitītāju stili ievēro šīs preferences.

Praktiski pielietojumi un lietošanas gadījumi

CSS skaitītāju stilus var izmantot dažādos tīmekļa izstrādes scenārijos, tostarp:

• Satura rādītāja ģenerēšana: Automātiski numurēt virsrakstus un apakšvirsrakstus satura rādītājā.
• Numurētu sarakstu izveide: Formatēt numurētus sarakstus dažādās valodās un stilos.
• Pamācību soļu numurēšana: Vadīt lietotājus caur soļu sēriju ar skaidru un vizuāli pievilcīgu numurēšanu.
• Pielāgotas lapināšanas ieviešana: Izveidot pielāgotas lapināšanas vadīklas ar unikālām numurēšanas shēmām.
• Rangotu sarakstu parādīšana: Parādīt rangus vizuāli saistošā veidā, izmantojot dažādus skaitītāju stilus.
• Juridisko dokumentu ģenerēšana: Formatēt juridiskos dokumentus ar noteiktām numurēšanas prasībām.
• Zinātnisko darbu formatēšana: Parādīt vienādojumus, attēlus un tabulas ar atbilstošu numurēšanu.

Labākā prakse CSS skaitītāju stilu izmantošanai

Lai nodrošinātu, ka jūsu CSS skaitītāju stili ir efektīvi un viegli uzturami, ievērojiet šo labāko praksi:

• Izmantojiet aprakstošus nosaukumus saviem skaitītāju stiliem: Izvēlieties nosaukumus, kas skaidri norāda stila mērķi un formatēšanu (piemēram, arabic-indic, upper-roman, georgian).
• Saglabājiet savus skaitītāju stilus modulārus: Definējiet atsevišķus skaitītāju stilus dažādām valodām un numerācijas sistēmām.
• Izmantojiet CSS klases, lai attiecinātu skaitītāju stilus: Izvairieties no skaitītāju stilu tiešas piemērošanas elementiem; tā vietā izmantojiet CSS klases, lai kontrolētu formatēšanu.
• Pārbaudiet savus skaitītāju stilus rūpīgi: Pārbaudiet savus skaitītāju stilus dažādās pārlūkprogrammās un ierīcēs, lai pārliecinātos, ka tie tiek pareizi renderēti.
• Dokumentējiet savus skaitītāju stilus: Nodrošiniet skaidru dokumentāciju saviem skaitītāju stiliem, tostarp to mērķi, formatēšanu un lietošanu.
• Prioritizējiet pieejamību: Vienmēr ņemiet vērā pieejamību, veidojot skaitītāju stilus, un izmantojiet speak-as īpašību, lai nodrošinātu, ka skaitītāja vērtības tiek pareizi paziņotas ekrāna lasītājiem.

Secinājums

CSS skaitītāju stili nodrošina jaudīgu un elastīgu mehānismu numurēta satura formatēšanas internacionalizācijai tīmeklī. Izmantojot @counter-style noteikumu un tā dažādās īpašības, varat izveidot pielāgotas numerācijas sistēmas, kas ievēro dažādu reģionu kultūras konvencijas un lingvistiskās nianses. Ievērojot šajā rokasgrāmatā izklāstīto labāko praksi, varat nodrošināt, ka jūsu skaitītāju stili ir efektīvi, viegli uzturami un pieejami globālai auditorijai. Tā kā tīmekļa izstrāde turpina attīstīties, izpratne un CSS skaitītāju stilu izmantošana internacionalizācijai kļūs arvien svarīgāka, lai izveidotu patiesi iekļaujošas un lietotājam draudzīgas tīmekļa pieredzes. Aptveriet CSS skaitītāju stilu spēku un izveidojiet tīmekļa vietnes, kas rezonē ar lietotājiem no visiem pasaules nostūriem.

Tālāk lasīšanai

• <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style" target="_blank">MDN Web Docs: @counter-style</a>
• <a href="https://www.w3.org/TR/css-counter-styles-3/" target="_blank">CSS Counter Styles Level 3</a>
• <a href="https://ishadeed.com/article/css-counter-styles/" target="_blank">Pilnīga CSS skaitītāju stilu rokasgrāmata</a>