CSS-laskurityylien kielituki: Kansainvälistämisen muotoilu globaalille yleisölle

Nykypäivän globaalisti yhdistetyssä maailmassa web-kehittäjien on luotava verkkosivustoja ja sovelluksia, jotka palvelevat monipuolista yleisöä. Tämä tarkoittaa, että on otettava huomioon kielen lisäksi myös eri alueilla käytetyt kulttuuriset käytännöt ja numerointijärjestelmät. CSS-laskurityylit tarjoavat tehokkaan mekanismin listojen ja muun numeroidun sisällön muotoiluun tavalla, joka kunnioittaa näitä kulttuurisia vivahteita. Tämä kattava opas tutkii CSS-laskurityylien ominaisuuksia kansainvälistämistä (i18n) varten ja näyttää, kuinka niitä käytetään tehokkaasti.

CSS-laskurityylien ymmärtäminen

CSS-laskurit ovat CSS-sääntöjen ylläpitämiä muuttujia, jotka seuraavat, kuinka monta kertaa niitä käytetään. Niitä käytetään pääasiassa listojen, otsikoiden ja muiden elementtien numeroimiseen. CSS-laskurityylit laajentavat tätä toiminnallisuutta antamalla sinun määrittää mukautettuja numerointijärjestelmiä tavallisten arabialaisten ja roomalaisten numeroiden lisäksi. Tämä on ratkaisevan tärkeää eri kielten ja kulttuuristen mieltymysten tukemiseksi.

Ydin-CSS-ominaisuudet, joita käytetään laskurityyleissä, ovat:

• counter-reset: Alustaa tai nollaa laskurin tiettyyn arvoon.
• counter-increment: Lisää laskurin arvoa.
• content: Käytetään ::before- tai ::after-pseudoelementtien kanssa laskurin arvon näyttämiseen.
• counter() tai counters(): Funktiot, joita käytetään content-ominaisuudessa laskurin arvon muotoiluun.
• @counter-style: Määrittää mukautetun laskurityylin erilaisilla ominaisuuksilla muotoilun hallitsemiseksi.

@counter-style-ominaisuuden teho

@counter-style-sääntö on CSS-laskurityylien kansainvälistämisen ydin. Sen avulla voit määrittää mukautetun numerointijärjestelmän erilaisilla ominaisuuksilla, jotka hallitsevat laskurin arvon esittämistä. Tarkastellaan @counter-style-säännön keskeisiä ominaisuuksia:

• system: Määrittää algoritmin, jota käytetään laskurin esityksen luomiseen. Yleisiä arvoja ovat cyclic, numeric, alphabetic, symbolic, fixed ja additive.
• symbols: Määrittää laskurityylin käyttämät symbolit, kuten numerot, kirjaimet tai mukautetut merkit.
• additive-symbols: Käytetään additive-järjestelmän kanssa symbolien ja niitä vastaavien numeeristen arvojen määrittämiseen.
• suffix: Määrittää tekstin, joka lisätään jokaisen laskurin esityksen jälkeen (esim. piste tai sulkeva sulku).
• prefix: Määrittää tekstin, joka lisätään ennen jokaista laskurin esitystä.
• range: Rajoittaa arvoalueen, jolle laskurityyliä voidaan soveltaa.
• pad: Määrittää käytettävien numeroiden vähimmäismäärän, täyttämällä tarvittaessa etunollilla.
• speak-as: Hallitsee, kuinka näytönlukijat ilmoittavat laskurin arvon saavutettavuuden varmistamiseksi.
• fallback: Määrittää varalaskurityylin, jota käytetään, jos selain ei tue nykyistä tyyliä.

Kansainvälistämisesimerkkejä @counter-style-ominaisuudella

Tutkitaan nyt joitain käytännön esimerkkejä @counter-style-ominaisuuden käytöstä laskurien muotoiluun eri kielille ja kulttuurisiin konteksteihin.

1. Arabialaiset numerot arabialais-intialaisilla numeroilla

Vaikka arabialaisia numeroita (0–9) käytetään laajalti, monet arabiankieliset alueet käyttävät mieluummin arabialais-intialaisia numeroita (٠‎–٩‎). Voimme luoda laskurityylin tämän saavuttamiseksi:

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

Tämä koodi määrittää laskurityylin nimeltä arabic-indic, joka käyttää arabialais-intialaisia numeroita symboleina. suffix-ominaisuus lisää pisteen ja välilyönnin jokaisen numeron jälkeen. CSS soveltaa sitten tätä tyyliä järjestettyyn luetteloon (<ol>) näyttääkseen numerot arabialais-intialaisessa muodossa.

2. Roomalaiset numerot (isoja ja pieniä kirjaimia)

Roomalaisia numeroita käytetään yleisesti eri yhteyksissä, ja CSS-laskurityylit voivat helposti käsitellä niitä:

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

Tämä esimerkki näyttää, kuinka luodaan sekä isoja (upper-roman) että pieniä (lower-roman) roomalaisia numerolaskurityylejä. Voit sitten soveltaa näitä tyylejä eri luetteloihin CSS-luokkien (.upper-roman ja .lower-roman) avulla. Esimerkiksi:

<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. Georgialaiset numerot

Georgialaiset numerot käyttävät ainutlaatuista kirjainjärjestelmää. Voimme määrittää laskurityylin edustamaan numeroita georgiaksi:

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

Tämä esimerkki käyttää fixed-järjestelmää, koska georgialaisessa numerointijärjestelmässä on rajoitettu määrä symboleja 33 ensimmäiselle numerolle. range-ominaisuus rajoittaa laskurityylin arvoihin 1 ja 33 välillä. Jos numerot ovat suurempia kuin 33, sinun on toteutettava monimutkaisempi logiikka tai erilainen numerointijärjestelmä.

4. Armenialaiset numerot

Samaan tapaan kuin georgialaiset, myös armenialaiset numerot käyttävät kirjaimia numeroiden esittämiseen:

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

Tämä esimerkki on samanlainen kuin georgialainen esimerkki, jossa käytetään fixed-järjestelmää ja määritetään armenialaiset kirjaimet symboleina. range on asetettu arvoon 1–39, mikä kattaa armenialaisen perusnumerosjoukon.

5. CJK-numerot (kiina, japani, korea)

CJK-numerot tarjoavat enemmän monimutkaisuutta, ja niissä on erilaisia muotoja virallisiin ja epävirallisiin yhteyksiin sekä vaihtelevia rakeisuustasoja. Tarkastellaan yksinkertaistettua kiinaa:

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

Huomaa, että tämä on yksinkertaistettu esitys. Täysi CJK-numerotuki, erityisesti suuremmille numeroille, vaatisi monimutkaisemman toteutuksen, johon liittyy additive-järjestelmä ja paikka-arvojen (kymmenet, sadat, tuhannet jne.) käsittely. Tämä koodi esittelee numeerisen perusesityksen.

Edistyneet tekniikat ja huomioitavat asiat

1. Laskurityylien yhdistäminen

Voit yhdistää useita laskurityylejä luodaksesi monimutkaisempia numerointijärjestelmiä. Voit esimerkiksi käyttää pääkerrointa luvuille ja toissijaista laskuria kunkin luvun osioille.

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

Tämä koodi luo hierarkkisen numerointijärjestelmän, jossa luvut numeroidaan peräkkäin ja osiot numeroidaan kunkin luvun sisällä (esim. 1.1, 1.2, 2.1, 2.2).

2. Saavutettavuuteen liittyvät näkökohdat

Varmista, että laskurityylisi ovat vammaisten käyttäjien käytettävissä. Käytä speak-as-ominaisuutta hallitaksesi, kuinka näytönlukijat ilmoittavat laskurin arvon. Esimerkiksi:

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

speak-as: numbers; -ominaisuus kertoo näytönlukijalle, että se ilmoittaa laskurin arvon numerona. Muita vaihtoehtoja ovat spell-out (numeron kirjoittamiseen) ja bullets (laskurin ilmoittamiseen luettelomerkkeinä).

Lisäksi anna vaihtoehtoista tekstiä tai kuvauksia kaikille laskurityyleissäsi käytetyille mukautetuille symboleille varmistaaksesi, että näkövammaiset käyttäjät voivat ymmärtää numeroidun sisällön merkityksen.

3. Selaimen yhteensopivuus

Vaikka modernit selaimet tukevat laajalti CSS-laskurityylejä, on tärkeää ottaa huomioon vanhemmat selainversiot. Käytä fallback-ominaisuutta määrittääksesi varalaskurityylin, jota käytetään, jos selain ei tue ensisijaista tyyliä. Esimerkiksi:

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

Tässä esimerkissä, jos selain ei tue cyclic-järjestelmää tai mukautettuja symboleja, se palaa disc-luettelotyyliin.

4. Kulttuurinen herkkyys

Kun toteutat laskurityylejä eri kielille ja kulttuureille, ole tietoinen kulttuurisesta herkkyydestä. Tutki kussakin alueessa käytettyjä asianmukaisia numerointikäytäntöjä ja symboleja. Vältä sellaisten symbolien tai muotojen käyttöä, jotka voivat olla loukkaavia tai sopimattomia.

Esimerkiksi jotkin kulttuurit saattavat haluta käyttää erilaisia välimerkkejä tai erottimia numerointijärjestelmissään. Varmista, että laskurityylisi kunnioittavat näitä mieltymyksiä.

Käytännön sovellukset ja käyttötapaukset

CSS-laskurityylejä voidaan käyttää monissa verkkokehitystilanteissa, mukaan lukien:

• Sisällysluettelon luominen: Numeroi automaattisesti otsikot ja alaotsikot sisällysluettelossa.
• Numeroitujen luetteloiden luominen: Muotoile numeroidut luettelot eri kielillä ja tyyleillä.
• Vaiheiden numerointi opetusohjelmassa: Ohjaa käyttäjiä läpi vaiheiden sarjan selkeällä ja visuaalisesti houkuttelevalla numeroinnilla.
• Mukautetun sivutuksen toteuttaminen: Luo mukautettuja sivutuksen ohjaimia yksilöllisillä numerointijärjestelmillä.
• Sijoitettujen luetteloiden näyttäminen: Näytä sijoitukset visuaalisesti kiinnostavalla tavalla käyttämällä erilaisia laskurityylejä.
• Oikeudellisten asiakirjojen luominen: Muotoile oikeudelliset asiakirjat tietyillä numerointivaatimuksilla.
• Tieteellisten julkaisujen muotoilu: Näytä yhtälöt, kuvat ja taulukot asianmukaisella numeroinnilla.

Parhaat käytännöt CSS-laskurityylien käytössä

Varmistaaksesi, että CSS-laskurityylisi ovat tehokkaita ja ylläpidettäviä, noudata näitä parhaita käytäntöjä:

• Käytä kuvaavia nimiä laskurityyleillesi: Valitse nimiä, jotka osoittavat selkeästi tyylin tarkoituksen ja muotoilun (esim. arabic-indic, upper-roman, georgian).
• Pidä laskurityylisi modulaarisina: Määritä erilliset laskurityylit eri kielille ja numerointijärjestelmille.
• Käytä CSS-luokkia laskurityylien soveltamiseen: Vältä laskurityylien soveltamista suoraan elementteihin; käytä sen sijaan CSS-luokkia muotoilun hallintaan.
• Testaa laskurityylisi perusteellisesti: Testaa laskurityylisi eri selaimissa ja laitteissa varmistaaksesi, että ne renderöityvät oikein.
• Dokumentoi laskurityylisi: Anna selkeät ohjeet laskurityyleillesi, mukaan lukien niiden tarkoitus, muotoilu ja käyttö.
• Priorisoi saavutettavuus: Ota saavutettavuus aina huomioon, kun luot laskurityylejä, ja varmista speak-as-ominaisuuden avulla, että näytönlukijat ilmoittavat laskurin arvot oikein.

Johtopäätös

CSS-laskurityylit tarjoavat tehokkaan ja joustavan mekanismin numeroidun sisällön muotoilun kansainvälistämiseen verkossa. Hyödyntämällä @counter-style-sääntöä ja sen erilaisia ominaisuuksia voit luoda mukautettuja numerointijärjestelmiä, jotka kunnioittavat eri alueiden kulttuurisia käytäntöjä ja kielellisiä vivahteita. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit varmistaa, että laskurityylisi ovat tehokkaita, ylläpidettäviä ja kaikkien globaalin yleisön käytettävissä. Verkkokehityksen jatkuessa kehittymistään CSS-laskurityylien ymmärtäminen ja hyödyntäminen kansainvälistämistä varten on yhä tärkeämpää todella osallistavien ja käyttäjäystävällisten verkkokokemusten luomisessa. Ota CSS-laskurityylien teho käyttöön ja luo verkkosivustoja, jotka resonoivat käyttäjien kanssa kaikista maailman kolkista.

Lisälukemista

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles