Ich musste einige verweisende Links ausschneiden (kursiv), da ich noch nicht genug Reputation habe, sie aber vielleicht später ersetzen kann.

Ich habe ein jQuery-Plug-In erstellt, das inkrementelle Zeilennummern für Gedichte und Dramen anzeigt. Die Zeilen eines Gedichts werden als Kinder einer geordneten Liste (ol.verse) dargestellt. Wenn Javascript aktiviert ist, generiert das Plug-In alle n-ten Intervalle Zeilennummern auf der Grundlage eines Minimums an Inline-Listenwerten. Diese Nummern können dann über das DOM bearbeitet werden. Wenn JS deaktiviert ist, werden numerische Listenmarkierungen bei jeder fünften Zeile als Fallback-Zeilennummern eingefügt.

Ich frage mich jetzt, ob es möglich ist, das eingesteckte Gedicht als Liste mit CSS-Zählern zu degradieren. IE 6-7 erhalten übersichtliche Listen mit den folgenden Punkten der Ziffern, übergeordnete Browser sollten jedoch Zähler oder die vom Plugin generierten Zahlen erhalten. Hier ist der Haken. Die Regeln für CSS-Zähler sollten Situationen berücksichtigen können, in denenDie Zeilennummerierung und die untergeordnete Indexierung der Gedichtsliste werden nicht synchronisiert. Ich habe eine Reihe von Posts auf gesehenZähler formatieren undKinder überspringen, ebenso gut wiedie richtige und die falsche Art, Gedichte semantisch zu formatieren undtypografisch (dasVorschläge des W3C empfohlene Absatz- und Pre-Tags sind bestenfalls fragwürdig); Ich bin jedoch auf das Problem der Verwendung von Zählern für inkrementelle Zeilennummern leer gekommen, daher teile ich meine eigenen Bemühungen um eine Lösung und hoffe, dass ihr mir helfen könnt, eine bessere zu finden.

Die Grundregeln, mit denen ich mit begrenztem Erfolg experimentiert habe:

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

Wie siehst du ausdiese GeigeDiese Regeln zeigen Zahlen in jeder 5. Zeile an, SO LANG WIE jedes Listenkind als eine Zeile des Gedichts gezählt werden soll, und SO LANG WIE die Passage ab Zeile 1, 6, 11, 16 usw. beginnt (dh der Zähler wird zurückgesetzt) 0 oder ein Vielfaches von 5). Diese letzte Regel mag für diejenigen von Interesse sein, die für eine einfachere Aufgabe inkrementierte Zeilennummern erstellen möchten (z. B. ein einfaches Gedicht für einen Blogeintrag), aber diese Bedingungen sind für unsere Anforderungen zu restriktiv (ein TEI-strukturiertes Repository für wichtige Ausgaben von Poesie / Drama online).

Problem 1: Wenn ich mehrere Auszüge oder Teilungen von einem oder mehreren Werken habe, deren Zurücksetzen nicht ein Vielfaches des Standardinkrements ist, muss ich die Auszüge nach id referenzieren und die Ausblendungsregel für jede id'd ol.verse durch den Rest versetzen. Zum Beispiel muss für einen Auszug ab Zeile 43 der Zähler auf 42 zurückgesetzt und der n-te untergeordnete Parameter der Ausblendungsregel auf 5n + 3 eingestellt werden (da 42% 5 = 3). Plötzlich sind Zähler weniger ansprechend als Zahlenlistenwerte von Hand. Das ist zumindest besser als ...

Problem 2: Den Browser dazu bringen, bestimmte Zeilen wie Unterüberschriften oder Regieanweisungen, die in das Gedicht eingebettet sein können, zu entfernen. In diesen Zeilen habe ich versucht, eine Nocount-Klasse anzuhängen und die Anzeigeeigenschaft oder die Sichtbarkeitseigenschaft zu deaktivieren, z.

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

ODER

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

In Kombination mit der Regel zum Ausblenden von Linien, bei denen es sich nicht um Vielfache des Inkrements handelt, werden die gewünschten Ergebnisse nicht erzielt. Sehendiese Geige. Der erste löst eine falsche Zeilennummerierung bei den richtigen Nummern aus. Letzteres, korrekte Nummerierung auf den falschen. Gibt es eine Möglichkeit, CSS-Zählerregeln zu schreiben, die funktionieren, unabhängig davon, ob die automatisierten Zeilennummern den richtigen untergeordneten Indizes entsprechen oder nicht? Vielleicht gibt es eine andere Kombination von CSS-Selektoren, die die Arbeit erledigen wird?