Tuve que recortar ciertos enlaces de referencia (en cursiva) ya que todavía no tengo suficiente reputación, pero quizás pueda reemplazarlos más tarde.

He creado un complemento jQuery que muestra números de línea incrementados para poesía y drama; Las líneas de un poema se representan como los hijos de una lista ordenada (ol.verse). Cuando javascript está habilitado, el complemento genera números de línea cada n º intervalo en función de un mínimo de valores de lista en línea. Estos números pueden ser manipulados a través del DOM. Cuando JS está deshabilitado, los marcadores de lista numérica cada quinta línea se activan como números de línea de retroceso.

Ahora me pregunto si es posible que el poema conectado se degrade como una lista alimentada por contadores de CSS. IE 6-7 se sirve listas ordenadas simples con los períodos finales de los números, pero los navegadores superiores deben obtener contadores o los números generados por el complemento. Aquí está la trampa. Las reglas de contador de CSS deben poder acomodar situaciones dondela numeración de líneas y la indexación de niños de la lista de poemas no se sincronizan. He visto una serie de publicaciones encontadores de formato ysaltando niños, tanto comoLas formas correctas e incorrectas de formatear poemas semánticamente ytipográficamente (laPropuestas del W3C recomendar párrafos y etiquetas pre son cuestionables en el mejor de los casos); Sin embargo, me he quedado vacío, sobre el problema de usar contadores para hacer números de línea incrementados, por lo que estoy compartiendo mis propios esfuerzos hacia una solución y espero que puedan ayudarme a encontrar una mejor.

Las reglas básicas que he estado experimentando con éxito limitado:

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

Como puedes ver desdeeste violín, estas reglas muestran números cada 5ª línea TANTO COMO TODOS los niños de la lista deben contarse como una línea del poema y TANTO CUANDO EL pasaje comience desde la línea 1, 6, 11, 16, etc. (es decir, el reinicio del contador es 0 o un múltiplo de 5). La última regla puede ser de interés para aquellos que desean hacer números de línea incrementados para una tarea más simple (un poema simple para una entrada de blog, por ejemplo), pero estas condiciones son demasiado restrictivas para nuestras necesidades (un repositorio TEE de ediciones críticas de poesía / drama en línea).

Problema 1: Cuando tengo varios extractos o divisiones de una o más obras cuyos reseteos no son múltiplos del incremento predeterminado, tengo que hacer referencia a los extractos por id y compensar la regla de ocultación para cada id o viceversa por el resto. Por ejemplo, un extracto que comienza desde la línea 43 requiere ajustar el contador de reinicio a 42, y ajustar el parámetro nth-child de la regla de ocultamiento a 5n + 3 (ya que 42% 5 = 3). De repente, los contadores se vuelven menos atractivos que los valores de la lista de numeración a mano. Esto al menos es mejor que ...

Problema 2: Lograr que el navegador desapruebe ciertas líneas, como subtítulos o direcciones escénicas que pueden estar incrustadas dentro del poema. En estas líneas, he intentado adjuntar una clase nocount y desactivar la propiedad de visualización o la propiedad de visibilidad, por ejemplo.

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

O

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

En combinación con la regla que oculta las líneas que no son múltiplos del incremento, ninguno da los resultados deseados. Vereste violín. El primero activa una numeración de línea incorrecta en los números correctos; este último, numeración correcta sobre los incorrectos. ¿Hay alguna forma de escribir reglas de contador de CSS que funcionen si los números de línea automatizados se corresponden o no con los índices secundarios correctos? Tal vez hay alguna otra combinación de selectores de CSS que hará el trabajo?