Нумерованные кириллицей списки

Свойство list-style-type, отвечающее за вид маркеров элементов-списков в html, поддерживает различные виды нумерации — армянскую, греческую, римскую, арабскую — но нужной мне — русской — среди них не оказалось. То есть, получить простой список вида:

  1. Во-первых это обидно…
  2. Кроме того досадно!
  3. И в конце концов, просто возмутительно!!!

… стандартными средствами css нельзя. А т.к. именно сегодня мне пришлось верстать текст, в котором было несколько таких списков, то я придумал решение, которое, надеюсь, пригодиться и вам.

Вот небольшой и изящный файл-костыль, позволяющий нумеровать список буквами русского алфавита:

@charset "utf-8";
/* Данная таблица стилей обеспечивает нумерацию списков буквами кириллицы */
/* сбрасываем маркер по умолчанию */
ol.cirillic {list-style-type: none;}
.cirillic li:nth-child(1):before {content: 'a) ';}
.cirillic li:nth-child(2):before {content: 'б) ';}
.cirillic li:nth-child(3):before {content: 'в) ';}
.cirillic li:nth-child(4):before {content: 'г) ';}
.cirillic li:nth-child(5):before {content: 'д) ';}
.cirillic li:nth-child(6):before {content: 'е) ';}
.cirillic li:nth-child(7):before {content: 'ж) ';}
.cirillic li:nth-child(8):before {content: 'з) ';}
.cirillic li:nth-child(9):before {content: 'и) ';}
.cirillic li:nth-child(10):before {content: 'к) ';}
.cirillic li:nth-child(11):before {content: 'л) ';}
.cirillic li:nth-child(12):before {content: 'м) ';}
.cirillic li:nth-child(13):before {content: 'н) ';}
.cirillic li:nth-child(14):before {content: 'о) ';}
.cirillic li:nth-child(15):before {content: 'п) ';}
.cirillic li:nth-child(16):before {content: 'р) ';}
.cirillic li:nth-child(17):before {content: 'с) ';}
.cirillic li:nth-child(18):before {content: 'т) ';}
.cirillic li:nth-child(19):before {content: 'у) ';}
.cirillic li:nth-child(20):before {content: 'ф) ';}
.cirillic li:nth-child(21):before {content: 'х) ';}
.cirillic li:nth-child(22):before {content: 'ц) ';}
.cirillic li:nth-child(23):before {content: 'ч) ';}
.cirillic li:nth-child(24):before {content: 'ш) ';}
.cirillic li:nth-child(25):before {content: 'щ) ';}
.cirillic li:nth-child(26):before {content: 'э) ';}
.cirillic li:nth-child(27):before {content: 'ю) ';}
.cirillic li:nth-child(28):before {content: 'я) ';}

Логика его очень проста и очевидна, но, главное, это пока лучшее решение, которое мне удалось придумать для этой задачи. Критика и комментарии приветствуются!

Будьте внимательны с кодировкой. Надеюсь вы всегда и везде используете utf-8.

Эта запись была опубликована в рубрике Статьи-заметки и отмечена метками , , , . Добавить в закладки ссылку.

6 в ответ на Нумерованные кириллицей списки:

  1. v пишет:

    блин, это круто! :) а для IE пойдет и латиницей :)

  2. wstarcev пишет:

    Хм, а если в списке 150 итемов? их же нужно нумеровать аа) аб) ав) … вв)
    Думаю на чистом css так не сделать. Как добиться принятия стандарта в css для кириллицы? И последующей реализации в основных браузерах? Для армянского и грузинского есть.

    • samizdam пишет:

      Ну, если надо 150 итемов, то можно по аналогии продолжить стиль до 150 правил конечно… Суть костыля от этого не меняется. А по поводу стандарта, это надо на w3.org ломиться. Будет стандарт — будет и реализация. Не так давно кстати Яндекс вступил в W3C, так что есть там там люди, которые могут двигать кириллицу. В принципе организация открытая, есть там и обратная связь и группы обсуждения.

  3. Виктор пишет:

    циферку пропустили, 21

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>