Номера строк в каждой n-й строке со счетчиками CSS?

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

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

Теперь мне интересно, можно ли заставить подключенное стихотворение деградировать как список, работающий от счетчиков CSS. IE 6-7 получают обычные упорядоченные списки с конечными периодами чисел, но в браузерах высшего уровня должны быть счетчики или числа, сгенерированные плагином. Здесь подвох. Правила счетчика CSS должны быть в состоянии приспособиться к ситуациям, когдаthe line numbering and the child-indexing of the poem list do not sync, Я видел несколько сообщений наformatting counters а такжепропускать детей, так же какthe right and wrong ways of formatting poems semantically and типографским (Предложения 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;
}

Как вы можете видеть изэта скрипкаэти правила отображают числа в каждой 5-й строке ТАК ДОЛГО КАК каждый дочерний элемент списка считается строкой стиха, ТАК ДОЛГО КАК переход начинается со строк 1, 6, 11, 16 и т. д. (т. е. сброс счетчика 0 или кратное 5). Это последнее правило может представлять интерес для тех, кто хочет увеличить число строк для какой-то более простой задачи (например, простой поэмы для записи в блоге), но эти условия слишком ограничивают наши потребности (хранилище критических выпусков со структурой TEI). поэзия / драма онлайн).

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

Problem 2: Заставить браузер отключить определенные строки, такие как подзаголовки или указания сцены, которые могут быть встроены в стихотворение. К этим строкам я пытался присоединить класс nocount и отключить свойство display или свойство видимости, например,

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

ИЛИ ЖЕ

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

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

Ответы на вопрос(2)

counter-increment: line 0; для правил, которые вы хотите исключить если они применяются к тому же элементу, что и приращение ) с более высокой специфичностью или!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>

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

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

class="fallback" в вашей скрипке есть, и это не просто объяснение проблемы, вы можете использовать это в качестве решения: обойтись без nth-child (5n) и использовать запасной вариант в качестве индикатора, если счетчик строк должен показывать или не

Видеть обновлено jsFiddle.
Я вставил туда строку, которая не является частью стихотворения, чтобы посмотреть, работает ли она, и она работает: вы можете удалить строку, а остальная часть останется синхронизированной.

ВАШ ОТВЕТ НА ВОПРОС