Podpora jazyků pro CSS Counter Style: Formátování pro internacionalizaci pro globální publikum

V dnešním globálně propojeném světě potřebují weboví vývojáři vytvářet webové stránky a aplikace, které uspokojí různorodé publikum. To znamená zohlednit nejen jazyk, ale také kulturní konvence a číselné systémy používané v různých regionech. CSS counter styly poskytují výkonný mechanismus pro formátování seznamů a dalšího číslovaného obsahu způsobem, který respektuje tyto kulturní nuance. Tento obsáhlý průvodce prozkoumá možnosti CSS counter stylů pro internacionalizaci (i18n) a ukáže, jak je efektivně používat.

Porozumění CSS Counter Stylům

CSS countery jsou proměnné udržované CSS pravidly pro sledování, kolikrát jsou použity. Používají se především k číslování seznamů, nadpisů a dalších prvků. CSS counter styly rozšiřují tuto funkčnost tím, že vám umožňují definovat vlastní číselné systémy nad rámec standardních arabských a římských číslic. To je zásadní pro podporu různých jazyků a kulturních preferencí.

Klíčové CSS vlastnosti zapojené do používání counter stylů jsou:

• counter-reset: Inicializuje nebo resetuje counter na konkrétní hodnotu.
• counter-increment: Zvyšuje hodnotu counteru.
• content: Používá se s pseudo-elementy ::before nebo ::after k zobrazení hodnoty counteru.
• counter() nebo counters(): Funkce používané uvnitř vlastnosti content k formátování hodnoty counteru.
• @counter-style: Definuje vlastní counter styl s různými vlastnostmi pro ovládání formátování.

Síla @counter-style

Pravidlo @counter-style je srdcem internacionalizace CSS counter stylů. Umožňuje vám definovat vlastní číselný systém s různými vlastnostmi, které řídí, jak je hodnota counteru vykreslena. Prozkoumejme klíčové vlastnosti uvnitř pravidla @counter-style:

• system: Určuje algoritmus použitý k generování reprezentace counteru. Běžné hodnoty zahrnují cyclic, numeric, alphabetic, symbolic, fixed a additive.
• symbols: Definuje symboly používané counter stylem, jako jsou čísla, písmena nebo vlastní znaky.
• additive-symbols: Používá se se systémem additive k definování symbolů a jejich odpovídajících číselných hodnot.
• suffix: Určuje text připojený za každou reprezentaci counteru (např. tečka nebo uzavírací závorka).
• prefix: Určuje text vložený před každou reprezentaci counteru.
• range: Omezuje rozsah hodnot, pro které je counter styl použitelný.
• pad: Určuje minimální počet číslic, které se mají použít, v případě potřeby doplní úvodní nuly.
• speak-as: Řídí, jak je hodnota counteru oznamována čtečkami obrazovky pro usnadnění přístupu.
• fallback: Určuje náhradní counter styl, který se má použít, pokud aktuální styl není prohlížečem podporován.

Příklady internacionalizace s @counter-style

Nyní prozkoumejme několik praktických příkladů použití @counter-style k formátování counterů pro různé jazyky a kulturní kontexty.

1. Arabské číslice s arabsko-indickými číslicemi

Zatímco arabské číslice (0-9) jsou široce používány, mnoho arabsky mluvících regionů upřednostňuje používání arabsko-indických číslic (٠‎-٩‎). Můžeme vytvořit counter styl, abychom toho dosáhli:

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

Tento kód definuje counter styl s názvem arabic-indic, který používá arabsko-indické číslice jako symboly. Vlastnost suffix přidává tečku a mezeru za každé číslo. CSS pak použije tento styl na seřazený seznam (<ol>) pro zobrazení čísel v arabsko-indickém formátu.

2. Římské číslice (velké a malé)

Římské číslice se běžně používají v různých kontextech a CSS counter styly je mohou snadno zvládnout:

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

Tento příklad ukazuje, jak vytvořit jak velké (upper-roman), tak malé (lower-roman) římské číselné counter styly. Poté můžete tyto styly použít na různé seznamy pomocí CSS tříd (.upper-roman a .lower-roman). Například:

<ol class="upper-roman">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

<ol class="lower-roman">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

3. Gruzínské číslice

Gruzínské číslice používají jedinečný systém písmen. Můžeme definovat counter styl pro reprezentaci čísel v gruzínštině:

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

Tento příklad používá systém fixed, protože gruzínský číselný systém má omezenou sadu symbolů pro prvních 33 čísel. Vlastnost range omezuje counter styl na hodnoty mezi 1 a 33. Pro čísla větší než 33 byste museli implementovat složitější logiku nebo jiný číselný systém.

4. Arménské číslice

Podobně jako gruzínské, i arménské číslice používají k reprezentaci čísel písmena:

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

Tento příklad je podobný gruzínskému příkladu, používá systém fixed a definuje arménská písmena jako symboly. range je nastavena na 1-39, což pokrývá základní arménskou číselnou sadu.

5. CJK číslice (čínské, japonské, korejské)

CJK číslice nabízejí větší složitost, s různými formami pro formální a neformální kontexty a různou úrovní granularity. Podívejme se na zjednodušenou čínštinu:

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

Všimněte si, že toto je zjednodušená reprezentace. Plná podpora CJK číslic, zejména pro větší čísla, by vyžadovala složitější implementaci zahrnující systém additive a zpracování místních hodnot (desítky, stovky, tisíce atd.). Tento kód demonstruje základní číselnou reprezentaci.

Pokročilé techniky a úvahy

1. Kombinování Counter Stylů

Můžete kombinovat více counter stylů a vytvořit tak složitější schémata číslování. Například můžete použít primární counter pro kapitoly a sekundární counter pro sekce v každé kapitole.

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

Tento kód vytváří hierarchický systém číslování, kde jsou kapitoly číslovány postupně a sekce jsou číslovány v rámci každé kapitoly (např. 1.1, 1.2, 2.1, 2.2).

2. Zohlednění přístupnosti

Zajistěte, aby byly vaše counter styly přístupné pro uživatele s postižením. Použijte vlastnost speak-as k řízení, jak je hodnota counteru oznamována čtečkami obrazovky. Například:

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

Vlastnost speak-as: numbers; říká čtečce obrazovky, aby oznámila hodnotu counteru jako číslo. Mezi další možnosti patří spell-out (pro hláskování čísla) a bullets (pro oznámení counteru jako odrážky).

Kromě toho poskytněte alternativní text nebo popisy pro všechny vlastní symboly použité ve vašich counter stylech, abyste zajistili, že uživatelé se zrakovým postižením budou rozumět významu číslovaného obsahu.

3. Kompatibilita prohlížečů

Zatímco CSS counter styly jsou široce podporovány moderními prohlížeči, je nezbytné zvážit starší verze prohlížečů. Použijte vlastnost fallback k určení náhradního counter stylu, který bude použit, pokud prohlížeč primární styl nepodporuje. Například:

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

V tomto příkladu, pokud prohlížeč nepodporuje systém cyclic nebo vlastní symboly, vrátí se k stylu seznamu disc.

4. Kulturní citlivost

Při implementaci counter stylů pro různé jazyky a kultury dbejte na kulturní citlivost. Prozkoumejte příslušné číselné konvence a symboly používané v každém regionu. Vyhněte se používání symbolů nebo formátů, které mohou být urážlivé nebo nevhodné.

Například některé kultury mohou preferovat používání různých interpunkčních znamének nebo oddělovačů ve svých číselných systémech. Zajistěte, aby vaše counter styly respektovaly tyto preference.

Praktické aplikace a případy použití

CSS counter styly lze použít v široké škále scénářů webového vývoje, včetně:

• Generování obsahu: Automaticky číslujte nadpisy a podnadpisy v obsahu.
• Vytváření číslovaných seznamů: Formátujte číslované seznamy v různých jazycích a stylech.
• Číslování kroků v tutoriálu: Proveďte uživatele sérií kroků s jasným a vizuálně přitažlivým číslováním.
• Implementace vlastního stránkování: Vytvořte vlastní ovládací prvky stránkování s jedinečnými schématy číslování.
• Zobrazení hodnocených seznamů: Zobrazte hodnocení vizuálně poutavým způsobem pomocí různých counter stylů.
• Generování právních dokumentů: Formátujte právní dokumenty se specifickými požadavky na číslování.
• Formátování vědeckých článků: Zobrazte rovnice, obrázky a tabulky s příslušným číslováním.

Doporučené postupy pro používání CSS Counter Stylů

Chcete-li zajistit, aby byly vaše CSS counter styly efektivní a udržovatelné, postupujte podle těchto doporučených postupů:

• Používejte popisné názvy pro vaše counter styly: Zvolte názvy, které jasně označují účel a formátování stylu (např. arabic-indic, upper-roman, georgian).
• Udržujte své counter styly modulární: Definujte samostatné counter styly pro různé jazyky a číselné systémy.
• Používejte CSS třídy k aplikaci counter stylů: Vyhněte se přímé aplikaci counter stylů na prvky; místo toho použijte CSS třídy k řízení formátování.
• Důkladně otestujte své counter styly: Otestujte své counter styly v různých prohlížečích a zařízeních, abyste zajistili, že se vykreslují správně.
• Dokumentujte své counter styly: Poskytněte jasnou dokumentaci pro své counter styly, včetně jejich účelu, formátování a použití.
• Prioritizujte přístupnost: Při vytváření counter stylů vždy zvažte přístupnost a použijte vlastnost speak-as, abyste zajistili, že hodnoty counteru budou správně oznamovány čtečkami obrazovky.

Závěr

CSS counter styly poskytují výkonný a flexibilní mechanismus pro internacionalizaci formátování číslovaného obsahu na webu. Využitím pravidla @counter-style a jeho různých vlastností můžete vytvářet vlastní číselné systémy, které respektují kulturní konvence a jazykové nuance různých regionů. Dodržováním doporučených postupů uvedených v tomto průvodci můžete zajistit, aby byly vaše counter styly efektivní, udržovatelné a přístupné globálnímu publiku. Jak se webový vývoj neustále vyvíjí, porozumění a využití CSS counter stylů pro internacionalizaci bude stále důležitější pro vytváření skutečně inkluzivních a uživatelsky přívětivých webových zážitků. Osvojte si sílu CSS counter stylů a vytvářejte webové stránky, které rezonují s uživateli ze všech koutů světa.

Další četba

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