8. september 2025Eesti

Avastage CSS-i loenduristiile rahvusvahelistumiseks (i18n) ja õppige, kuidas vormindada numbreid ja loendeid erinevates keeltes ja kultuurilistes kontekstides globaalsele publikule.

CSS-i loenduristiili keel toetus: rahvusvahelistumisvorming globaalsele publikule

Tänapäeva globaalselt ühendatud maailmas peavad veebiarendajad looma veebisaite ja rakendusi, mis vastavad mitmekesisele publikule. See tähendab, et tuleb arvestada mitte ainult keele, vaid ka erinevates piirkondades kasutatavate kultuuriliste konventsioonide ja numeratsioonisüsteemidega. CSS-i loenduristiilid pakuvad võimsat mehhanismi loendite ja muu nummerdatud sisu vormindamiseks viisil, mis austab neid kultuurilisi nüansse. See põhjalik juhend uurib CSS-i loenduristiilide võimalusi rahvusvahelistumiseks (i18n) ja näitab, kuidas neid tõhusalt kasutada.

CSS-i loenduristiilide mõistmine

CSS-i loendurid on muutujad, mida CSS-i reeglid hoiavad, et jälgida, mitu korda neid kasutatakse. Neid kasutatakse peamiselt loendite, päiste ja muude elementide nummerdamiseks. CSS-i loenduristiilid laiendavad seda funktsionaalsust, võimaldades määratleda kohandatud nummerdamissüsteeme väljaspool standardseid araabia ja rooma numbreid. See on ülioluline erinevate keelte ja kultuuriliste eelistuste toetamiseks.

Loenduristiilide kasutamisega seotud peamised CSS-i omadused on:

counter-reset: lähtestab loenduri konkreetsele väärtusele.
counter-increment: suurendab loenduri väärtust.
content: kasutatakse koos ::before või ::after pseudo-elementidega, et kuvada loenduri väärtust.
counter() või counters(): funktsioonid, mida kasutatakse omaduses content loenduri väärtuse vormindamiseks.
@counter-style: määratleb kohandatud loenduristiili erinevate omadustega vormingu juhtimiseks.

@counter-style'i jõud

Reegel @counter-style on CSS-i loenduristiili rahvusvahelistumise keskmes. See võimaldab teil määratleda kohandatud nummerdamissüsteemi erinevate omadustega, mis juhivad loenduri väärtuse renderdamist. Vaatame reegli @counter-style peamisi omadusi:

system: määrab algoritmi, mida kasutatakse loenduri esituse genereerimiseks. Levinud väärtused hõlmavad cyclic, numeric, alphabetic, symbolic, fixed ja additive.
symbols: määratleb loenduristiili kasutatavad sümbolid, näiteks numbrid, tähed või kohandatud märgid.
additive-symbols: kasutatakse koos süsteemiga additive sümbolite ja nende vastavate numbriliste väärtuste määratlemiseks.
suffix: määrab teksti, mis lisatakse iga loenduri esituse järele (nt punkt või sulgev sulg).
prefix: määrab teksti, mis lisatakse iga loenduri esituse ette.
range: piirab loenduristiili kohaldatavate väärtuste vahemikku.
pad: määrab kasutatavate numbrite miinimumarvu, vajadusel täidetakse juhtivate nullidega.
speak-as: juhib seda, kuidas ekraanilugejad loenduri väärtust ligipääsetavuse huvides teatavad.
fallback: määrab varuloenduristiili, mida kasutada, kui praegust stiili brauser ei toeta.

Rahvusvahelistumise näited koos @counter-style'iga

Vaatame nüüd mõnda praktilist näidet @counter-style'i kasutamisest loendurite vormindamiseks erinevate keelte ja kultuuriliste kontekstide jaoks.

1. Araabia numbrid araabia-india numbritega

Kuigi araabia numbreid (0-9) kasutatakse laialdaselt, eelistavad paljud araabia keelt kõnelevad piirkonnad kasutada araabia-india numbreid (٠‎-٩‎). Saame luua loenduristiili selle saavutamiseks:


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

See kood määratleb loenduristiili nimega arabic-indic, mis kasutab sümbolitena araabia-india numbreid. Omadus suffix lisab iga numbri järele punkti ja tühiku. Seejärel rakendab CSS selle stiili järjestatud loendile (<ol>), et kuvada numbreid araabia-india formaadis.

2. Rooma numbrid (suured ja väikesed tähed)

Rooma numbreid kasutatakse sageli erinevates kontekstides ja CSS-i loenduristiilid saavad nendega hõlpsasti hakkama:


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

See näide näitab, kuidas luua nii suuri (upper-roman) kui ka väikeseid (lower-roman) rooma numbrite loenduristiile. Seejärel saate neid stiile CSS-i klasside abil (.upper-roman ja .lower-roman) rakendada erinevatele loenditele. Näiteks:


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

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

3. Gruusia numbrid

Gruusia numbrid kasutavad ainulaadset tähtede süsteemi. Saame määratleda loenduristiili numbrite esitamiseks gruusia keeles:


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

See näide kasutab süsteemi fixed, kuna Gruusia nummerdamissüsteemil on piiratud hulk sümboleid esimese 33 numbri jaoks. Omadus range piirab loenduristiili väärtustega vahemikus 1 kuni 33. Rohkem kui 33 numbri puhul peaksite rakendama keerukamat loogikat või erinevat nummerdamissüsteemi.

4. Armeenia numbrid

Sarnaselt Gruusia keelega kasutavad ka armeenia numbrid numbrite tähistamiseks tähti:


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

See näide on sarnane Gruusia näitele, kasutades süsteemi fixed ja määratledes armeenia tähed sümbolitena. range on seatud väärtusele 1-39, mis hõlmab põhilist armeenia numbrimärki.

5. CJK numbrid (hiina, jaapani, korea)

CJK-numbrid pakuvad suuremat keerukust, erinevate vormidega ametlikuks ja mitteametlikuks kontekstiks ning erineva detailsusega. Vaatame lihtsustatud hiina keelt:


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

Pange tähele, et see on lihtsustatud esitus. Täielik CJK-numbrite tugi, eriti suuremate numbrite puhul, nõuaks keerulisemat rakendamist, mis hõlmab süsteemi additive ja kohtväärtuste (kümned, sajad, tuhanded jne) käsitlemist. See kood demonstreerib põhilist numbrilist esitust.

Täpsemad tehnikad ja kaalutlused

1. Loenduristiilide kombineerimine

Keerulisemate nummerdamisskeemide loomiseks saate kombineerida mitut loenduristiili. Näiteks võiksite kasutada esmast loendurit peatükkide jaoks ja teist loendurit iga peatüki sees olevate jaotiste jaoks.


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

See kood loob hierarhilise nummerdamissüsteemi, kus peatükid on nummerdatud järjestikku ja jaotised on nummerdatud iga peatüki sees (nt 1.1, 1.2, 2.1, 2.2).

2. Ligipääsetavuse kaalutlused

Veenduge, et teie loenduristiilid on puuetega kasutajatele ligipääsetavad. Kasutage omadust speak-as, et juhtida seda, kuidas ekraanilugejad loenduri väärtust teatavad. Näiteks:


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

Omadus speak-as: numbers; ütleb ekraanilugejale, et ta teataks loenduri väärtusest numbrina. Muud valikud hõlmavad spell-out (numbri väljaütlemiseks) ja bullets (loenduri teatamiseks kui punktid).

Lisaks esitage alternatiivne tekst või kirjeldused kõigi teie loenduristiilides kasutatud kohandatud sümbolite kohta, et tagada visuaalse puudega kasutajate võime nummerdatud sisu tähendust mõista.

3. Brauseri ühilduvus

Kuigi CSS-i loenduristiilid on kaasaegsete brauserite poolt laialdaselt toetatud, on oluline arvestada vanemate brauseriversioonidega. Kasutage omadust fallback, et määrata varuloenduristiil, mida kasutatakse siis, kui brauser ei toeta esmast stiili. Näiteks:


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

Selles näites, kui brauser ei toeta süsteemi cyclic või kohandatud sümboleid, naaseb see loenduristiili disc.

4. Kultuuriline tundlikkus

Loenduristiilide rakendamisel erinevate keelte ja kultuuride jaoks arvestage kultuuritundlikkusega. Uurige igas piirkonnas kasutatavaid asjakohaseid numeratsioonisüsteeme ja sümboleid. Vältige sümbolite või vormingute kasutamist, mis võivad olla solvavad või sobimatud.

Näiteks võivad mõned kultuurid eelistada kasutada oma nummerdamissüsteemides erinevaid kirjavahemärke või eraldajaid. Veenduge, et teie loenduristiilid austavad neid eelistusi.

Praktilised rakendused ja kasutusjuhud

CSS-i loenduristiile saab kasutada paljudes veebiarenduse stsenaariumides, sealhulgas:

Sisukordade genereerimine: nummerdage automaatselt päised ja alapealkirjad sisukorras.
Nummerdatud loendite loomine: vormindage nummerdatud loendeid erinevates keeltes ja stiilides.
Õpetuses sammude nummerdamine: juhendage kasutajaid läbi rea sammude selge ja visuaalselt atraktiivse nummerdamisega.
Kohandatud lehekülgede genereerimine: looge kohandatud lehekülgede juhtnupud ainulaadsete nummerdamisskeemidega.
Reastatud loendite kuvamine: näidake reitinguid visuaalselt kaasahaaraval viisil, kasutades erinevaid loenduristiile.
Õigusdokumentide genereerimine: vormindage õigusdokumente konkreetsete nummerdamisnõuetega.
Teadusartiklite vormindamine: kuvage võrrandeid, jooniseid ja tabeleid asjakohase nummerdamisega.

Parimad tavad CSS-i loenduristiilide kasutamisel

Veendumaks, et teie CSS-i loenduristiilid on tõhusad ja hooldatavad, järgige neid parimaid tavasid:

Kasutage oma loenduristiilide jaoks kirjeldavaid nimesid: valige nimed, mis selgelt näitavad stiili eesmärki ja vormingut (nt arabic-indic, upper-roman, georgian).
Hoidke oma loenduristiilid moodulsed: määratlege eraldi loenduristiilid erinevate keelte ja nummerdamissüsteemide jaoks.
Kasutage CSS-i klasse loenduristiilide rakendamiseks: vältige loenduristiilide otse elementidele rakendamist; selle asemel kasutage vormingu juhtimiseks CSS-i klasse.
Testige oma loenduristiile põhjalikult: testige oma loenduristiile erinevates brauserites ja seadmetes, et veenduda nende õiges renderdamises.
Dokumenteerige oma loenduristiilid: esitage oma loenduristiilide kohta selge dokumentatsioon, sealhulgas nende eesmärk, vorming ja kasutamine.
Seadke esikohale ligipääsetavus: arvestage alati ligipääsetavusega loenduristiilide loomisel ja kasutage omadust speak-as, et tagada loenduri väärtuste õige teatamisega ekraanilugejatega.

Järeldus

CSS-i loenduristiilid pakuvad võimsat ja paindlikku mehhanismi veebis nummerdatud sisu vormindamise rahvusvahelistumiseks. Reegli @counter-style ja selle erinevate omaduste abil saate luua kohandatud nummerdamissüsteeme, mis austavad erinevate piirkondade kultuurikonventsioone ja keelelisi nüansse. Järgides selles juhendis kirjeldatud parimaid tavasid, saate tagada, et teie loenduristiilid on tõhusad, hooldatavad ja ligipääsetavad globaalsele publikule. Kuna veebiarendus areneb edasi, muutub CSS-i loenduristiilide mõistmine ja kasutamine rahvusvahelistumiseks üha olulisemaks tõeliselt kaasavate ja kasutajasõbralike veebikogemuste loomisel. Omaks CSS-i loenduristiilide jõud ja looge veebisaidid, mis kõlavad kasutajatega kogu maailmast.