Линейные номера каждой n-й линии с помощью счетчиков CSS?

Мне пришлось вырезать определенные ссылки (выделенные курсивом), поскольку у меня пока нет достаточной репутации, но они могут быть позже заменены.

Я создал плагин jQuery, который отображает увеличенные номера строк для поэзии и драмы; Линии стихотворения представлены в виде дочерних элементов упорядоченного списка (ol.verse). Когда javascript включен, подключаемый модуль генерирует номера строк каждый n-й интервал, основываясь на минимуме встроенных значений списка. Эти числа затем могут управляться через DOM. Когда JS отключен, числовые маркеры списка каждой пятой строки пинают как резервные номера строк.

Теперь я задаюсь вопросом, можно ли заставить подключенное стихотворение деградировать как список, основанный на CSS-счетчиках. IE 6-7 получают обслуживаемые простые упорядоченные списки с периодами ожидания цифр, но превосходные браузеры должны получать счетчики или числа, генерируемые плагином. Вот улов. Правила счетчика CSS должны быть способны учитывать ситуации, когда нумерация строк и индексация списка стихотворений не синхронизируются. Я видел несколько сообщений по счетчикам форматирования и пропускать детей, а также правильные и неправильные способы форматирования стихов семантически и типографически (Предложения W3C, рекомендующие абзацы и предварительные теги в лучшем случае сомнительны); Однако я придумал пустую проблему с использованием счетчиков для увеличения числа строк, поэтому я делюсь своими силами на решение и надеюсь, что вы, ребята, можете помочь мне в выборе лучшего.

Основные правила, с которыми я экспериментировал с ограниченным успехом:

ol.verse { counter-reset: line 0;
ol.verse li {
   display: block;       
}

ol.verse li:before {
   counter-increment: line;
   content: counter(line) " ";
}

/* hide lines, or more precisely, children, that are not a multiple of 5 */

ol.verse li:not(:nth-child(5n)):before {
   visibility: hidden;
}

Как вы можете видеть из эта скрипта, эти правила отображают числа каждую пятую строку SO LONG AS, каждый из которых должен считаться как строка стихотворения и SO LONG AS проход начинается с строк 1, 6, 11, 16 и т.д. (т.е. счетчик reset равен 0 или кратно 5). Это последнее правило может представлять интерес для тех, кто хочет увеличить число строк для какой-либо более простой задачи (например, простое стихотворение для записи в блоге), но эти условия слишком ограничивают наши потребности (структурный репозиторий критических выпусков TEI поэзия/драма онлайн).

Проблема 1: Если у меня есть несколько выдержек или делений одной или нескольких работ, чьи встречные сбрасывания не являются кратными значениям по умолчанию, я должен ссылаться на выдержки по id и смещать скрытие правило для каждого идентификатора остатка. Например, выдержка, начинающаяся с строки 43, требует корректировки счетчика reset до 42 и корректировки параметра nth-child правила скрытия на 5n + 3 (с 42% 5 = 3). Внезапно счетчики становятся менее привлекательными, чем значения списка нумерации вручную. Это по крайней мере лучше, чем....

Проблема 2: Получение браузера для определения определенных строк, таких как подзаголовки или направления шагов, которые могут быть встроены в стихотворение. В этих строках я попытался добавить класс nocount и отключить свойство отображения или свойство видимости, например

ol.verse li.nocount:before {
   display: none;     
}

ИЛИ

ol.verse li.nocount:before {
   visibility: hidden;
}

В сочетании с правилом, скрывающим линии, которые не являются кратными приращению, ни один из них не дает желаемых результатов. См. эту скрипту. Первый вызывает неправильную нумерацию строк на нужных числах; последнее, правильная нумерация на неправильных. Есть ли способ написать правила счетчика CSS, которые будут работать независимо от того, соответствуют ли автоматические номера строк правильным дочерним индексам? Может быть, есть и другая комбинация селекторов CSS, которые будут выполнять эту работу?

Ответ 1

Исправление подсчета не является проблемой, поскольку вы можете использовать counter-increment: line 0; для правил, которые вы хотите исключить (если они применяются к тому же элементу, что и приращение +1) с более высокой спецификой или !important.

(если в вашем случае, когда вы применяете правило к псевдоэлементу :before, но хотите исключить на основе li, вы можете применить counter-increment:line -1;

Демо на http://jsfiddle.net/gaby/qpsGv/3/

Чтобы отобразить его на правой строке, хотя это еще одна проблема, так как это связано с селектором nth-child, который не допускает изменений... (если он находит ребенка, он подсчитывается для его целей..)

Обновление

Я не знаю, какая гибкость у вас есть, изменяя фактический html, но единственное решение, которое я вижу, - это обернуть элементы, которые вы хотите не считать в другом элементе.

Таким образом, вы можете использовать nth-of-type вместо nth-child, чтобы вы действительно могли показывать только по кратным 5.

Чтобы сохранить html действительным, вам нужно будет использовать элемент menu, поскольку это единственный, который позволяет как li, так и ol как дети.. (вы могли бы использовать совершенно разные элементы. просто убедитесь, что элементы подсчета отличаются от нечетных)

Итак, просто рассчитывая на

menu.verse > li { counter-increment: line 1;}

и отображение на

menu.verse > li:nth-of-type(5n):before {
    content: counter(line);
    width: 2em;
    display: block;
    float: left;
    margin-left: -2em;  
}

когда html

<menu class="verse">
 <li>countable</li>
 <ol><li>non countable</li></ol>
 <li> countable</li>
</menu>

должен работать.. (<ol><li> может просто стать div с соответствующим стилем..)

Демо на http://jsfiddle.net/gaby/qpsGv/7/

Ответ 1

Ответ 2