Підтримка мов у стилях лічильників CSS: Форматування для інтернаціоналізації та глобальної аудиторії

У сучасному глобально пов'язаному світі веб-розробникам необхідно створювати сайти та додатки, що відповідають потребам різноманітних аудиторій. Це означає враховувати не лише мову, а й культурні звичаї та системи числення, що використовуються в різних регіонах. Стилі лічильників CSS надають потужний механізм для форматування списків та іншого нумерованого контенту таким чином, щоб поважати ці культурні нюанси. Цей вичерпний посібник дослідить можливості стилів лічильників CSS для інтернаціоналізації (i18n) та продемонструє, як їх ефективно використовувати.

Розуміння стилів лічильників CSS

Лічильники CSS — це змінні, які підтримуються правилами CSS для відстеження кількості їх використання. Вони переважно використовуються для нумерації списків, заголовків та інших елементів. Стилі лічильників CSS розширюють цю функціональність, дозволяючи визначати власні системи числення, крім стандартних арабських та римських цифр. Це надзвичайно важливо для підтримки різних мов та культурних уподобань.

Основні властивості CSS, що використовуються для роботи зі стилями лічильників:

• counter-reset: Ініціалізує або скидає лічильник до певного значення.
• counter-increment: Збільшує значення лічильника.
• content: Використовується з псевдоелементами ::before або ::after для відображення значення лічильника.
• counter() або counters(): Функції, що використовуються у властивості content для форматування значення лічильника.
• @counter-style: Визначає користувацький стиль лічильника з різними властивостями для керування форматуванням.

Сила @counter-style

Правило @counter-style є серцем інтернаціоналізації стилів лічильників CSS. Воно дозволяє визначати власну систему числення з різними властивостями, які контролюють відображення значення лічильника. Розглянемо ключові властивості правила @counter-style:

• system: Вказує алгоритм, який використовується для генерації представлення лічильника. Поширені значення включають cyclic, numeric, alphabetic, symbolic, fixed та additive.
• symbols: Визначає символи, що використовуються стилем лічильника, такі як цифри, літери або користувацькі символи.
• additive-symbols: Використовується з системою additive для визначення символів та їх відповідних числових значень.
• suffix: Вказує текст, що додається після кожного представлення лічильника (наприклад, крапка або закриваюча дужка).
• prefix: Вказує текст, що додається перед кожним представленням лічильника.
• range: Обмежує діапазон значень, для яких застосовується стиль лічильника.
• pad: Вказує мінімальну кількість цифр для використання, заповнюючи нулями на початку за потреби.
• speak-as: Контролює, як значення лічильника озвучується програмами зчитування з екрана для доступності.
• fallback: Вказує резервний стиль лічильника, який буде використовуватися, якщо поточний стиль не підтримується браузером.

Приклади інтернаціоналізації з @counter-style

Тепер розглянемо кілька практичних прикладів використання @counter-style для форматування лічильників для різних мов та культурних контекстів.

1. Арабські цифри з арабсько-індійськими символами

Хоча арабські цифри (0-9) широко використовуються, багато арабомовних регіонів надають перевагу арабсько-індійським цифрам (٠‎-٩‎). Ми можемо створити стиль лічильника для цього:

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

Цей код визначає стиль лічильника з назвою arabic-indic, який використовує арабсько-індійські цифри як символи. Властивість suffix додає крапку та пробіл після кожного числа. Потім CSS застосовує цей стиль до нумерованого списку (<ol>) для відображення чисел у арабсько-індійському форматі.

2. Римські цифри (великі та малі літери)

Римські цифри часто використовуються в різних контекстах, і стилі лічильників CSS можуть легко з ними впоратися:

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

Цей приклад демонструє, як створити стилі лічильників як для великих (upper-roman), так і для малих (lower-roman) римських цифр. Потім ви можете застосовувати ці стилі до різних списків, використовуючи класи CSS (.upper-roman та .lower-roman). Наприклад:

<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. Грузинські цифри

Грузинські цифри використовують унікальну систему літер. Ми можемо визначити стиль лічильника для представлення чисел грузинською:

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

Цей приклад використовує систему fixed, оскільки грузинська система числення має обмежений набір символів для перших 33 чисел. Властивість range обмежує стиль лічильника значеннями від 1 до 33. Для чисел, більших за 33, вам доведеться реалізувати складнішу логіку або іншу систему числення.

4. Вірменські цифри

Подібно до грузинських, вірменські цифри також використовують літери для представлення чисел:

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

Цей приклад схожий на грузинський, він використовує систему fixed та визначає вірменські літери як символи. Діапазон range встановлено на 1-39, що охоплює базовий набір вірменських цифр.

5. Цифри CJK (китайські, японські, корейські)

Цифри CJK є складнішими, з різними формами для офіційних та неофіційних контекстів та різним рівнем деталізації. Розглянемо спрощену китайську:

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

Зауважте, що це спрощене представлення. Повна підтримка цифр CJK, особливо для великих чисел, вимагатиме складнішої реалізації з використанням системи additive та обробки розрядів (десятки, сотні, тисячі тощо). Цей код демонструє базове представлення цифр.

Просунуті техніки та важливі аспекти

1. Комбінування стилів лічильників

Ви можете комбінувати кілька стилів лічильників для створення складніших схем нумерації. Наприклад, ви можете використовувати основний лічильник для розділів та вторинний лічильник для підрозділів у кожному розділі.

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

Цей код створює ієрархічну систему нумерації, де розділи нумеруються послідовно, а підрозділи нумеруються в межах кожного розділу (наприклад, 1.1, 1.2, 2.1, 2.2).

2. Аспекти доступності

Переконайтеся, що ваші стилі лічильників доступні для користувачів з обмеженими можливостями. Використовуйте властивість speak-as, щоб контролювати, як значення лічильника озвучується програмами зчитування з екрана. Наприклад:

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

Властивість speak-as: numbers; наказує програмі зчитування з екрана озвучувати значення лічильника як число. Інші варіанти включають spell-out (для озвучення числа по буквах) та bullets (для озвучення лічильника як маркерів списку).

Крім того, надавайте альтернативний текст або описи для будь-яких користувацьких символів, що використовуються у ваших стилях лічильників, щоб користувачі з вадами зору могли зрозуміти значення нумерованого контенту.

3. Сумісність з браузерами

Хоча стилі лічильників CSS широко підтримуються сучасними браузерами, важливо враховувати старіші версії браузерів. Використовуйте властивість fallback, щоб вказати резервний стиль лічильника, який буде використовуватися, якщо браузер не підтримує основний стиль. Наприклад:

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

У цьому прикладі, якщо браузер не підтримує систему cyclic або користувацькі символи, він повернеться до стилю списку disc.

4. Культурна чутливість

При впровадженні стилів лічильників для різних мов та культур, пам'ятайте про культурну чутливість. Дослідіть відповідні правила нумерації та символи, що використовуються в кожному регіоні. Уникайте використання символів або форматів, які можуть бути образливими чи недоречними.

Наприклад, деякі культури можуть надавати перевагу використанню різних розділових знаків або роздільників у своїх системах числення. Переконайтеся, що ваші стилі лічильників поважають ці уподобання.

Практичні застосування та варіанти використання

Стилі лічильників CSS можна використовувати в широкому спектрі сценаріїв веб-розробки, включаючи:

• Створення змісту: Автоматична нумерація заголовків та підзаголовків у змісті.
• Створення нумерованих списків: Форматування нумерованих списків різними мовами та стилями.
• Нумерація кроків у посібнику: Проведення користувачів через серію кроків з чіткою та візуально привабливою нумерацією.
• Реалізація користувацької пагінації: Створення користувацьких елементів керування пагінацією з унікальними схемами нумерації.
• Відображення рейтингових списків: Показ рейтингів у візуально привабливий спосіб за допомогою різних стилів лічильників.
• Створення юридичних документів: Форматування юридичних документів з певними вимогами до нумерації.
• Форматування наукових робіт: Відображення рівнянь, малюнків та таблиць з відповідною нумерацією.

Найкращі практики використання стилів лічильників CSS

Щоб забезпечити ефективність та легкість підтримки ваших стилів лічильників CSS, дотримуйтесь цих найкращих практик:

• Використовуйте описові назви для стилів лічильників: Обирайте назви, які чітко вказують на призначення та форматування стилю (наприклад, arabic-indic, upper-roman, georgian).
• Зберігайте модульність стилів лічильників: Визначайте окремі стилі лічильників для різних мов та систем числення.
• Використовуйте класи CSS для застосування стилів лічильників: Уникайте застосування стилів безпосередньо до елементів; натомість використовуйте класи CSS для керування форматуванням.
• Ретельно тестуйте свої стилі лічильників: Тестуйте стилі в різних браузерах та на різних пристроях, щоб переконатися, що вони відображаються правильно.
• Документуйте свої стилі лічильників: Надавайте чітку документацію для стилів лічильників, включаючи їхнє призначення, форматування та використання.
• Надавайте пріоритет доступності: Завжди враховуйте доступність при створенні стилів лічильників та використовуйте властивість speak-as, щоб переконатися, що значення лічильників правильно озвучуються програмами зчитування з екрана.

Висновок

Стилі лічильників CSS надають потужний та гнучкий механізм для інтернаціоналізації форматування нумерованого контенту в Інтернеті. Використовуючи правило @counter-style та його різноманітні властивості, ви можете створювати власні системи числення, які поважають культурні звичаї та лінгвістичні нюанси різних регіонів. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете забезпечити ефективність, легкість підтримки та доступність ваших стилів лічильників для глобальної аудиторії. Оскільки веб-розробка продовжує розвиватися, розуміння та використання стилів лічильників CSS для інтернаціоналізації ставатиме все більш важливим для створення справді інклюзивних та зручних для користувача веб-досвідів. Використовуйте силу стилів лічильників CSS та створюйте веб-сайти, які знаходять відгук у користувачів з усіх куточків світу.

Додаткові матеріали

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• Повний посібник зі стилів лічильників CSS