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

11

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

Я создал плагин 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   ответа
2

counter-increment: line 0;if they apply on the same element as the +1 increment!important.

:beforelicounter-increment:line -1;

nth-childif it finds a child it gets counted for its purposes..)

Update

nth-of-typenth-child

menuliolyou could ofcourse use entirely different elements .. just make sure that the counting elements are different that the non-counting ones)

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

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

the <ol><li> could just become a div with appropriate styling..)

Demo at

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded jeffclef
Упс я имел ввидуdisplay: none на самом номере строки (правило, которое закомментировано в оригинальной скрипке).jsfiddle.net/BoltClock/qpsGv/5Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededdisplay: noneError: User Rate Limit Exceeded
@BoltClock, действительно, но OP (код в скрипке) применяет.nocountError: User Rate Limit Exceeded
0

class="fallback"

.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded jeffclef
Error: User Rate Limit Exceeded

Похожие вопросы