11

まだ十分な評判が得られていないため、特定の参照リンク (イタリック体) を切り取る必要がありましたが、後で置き換えることができるかもしれません。

詩やドラマの行番号をインクリメントして表示する jQuery プラグインを作成しました。詩の行は、順序付きリスト (ol.verse) の子として表されます。JavaScript が有効な場合、プラグインは、最小のインライン リスト値に基づいて、n 番目の間隔ごとに行番号を生成します。これらの数値は、DOM を介して操作できます。JS が無効になっている場合、5 行ごとに数値リスト マーカーがフォールバック行番号として使用されます。

プラグインされた詩を、CSS カウンターを利用したリストとして劣化させることができるかどうか疑問に思っています。IE 6-7 では、数字の末尾にピリオドが付いた単純な順序付きリストが提供されますが、上位のブラウザーでは、カウンターまたはプラグインによって生成された数字が表示されます。これがキャッチです。CSS カウンター ルールは、行番号付けと詩リストの子インデックス付けが同期しない状況に対応できる必要があります。私は、カウンタの書式設定とchildren のスキップに関する多くの投稿を見てきました。また、詩を意味論的および印刷的に書式設定する正しい方法と間違った方法( 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;
}

この fiddleからわかるように、これらのルールでは、すべてのリストの子が詩の行として数えられる限り、5 行ごとに数字が表示され、パッセージが 1、6、11、16 などの行から始まる限り、数字が表示されます。 (つまり、カウンターリセットは 0 または 5 の倍数です)。この最後のルールは、単純なタスク (ブログ エントリの単純な詩など) のために行番号を増やしたい人にとっては興味深いかもしれませんが、これらの条件は私たちのニーズ (重要なエディションの TEI 構造のリポジトリ) には制限が多すぎます。詩/ドラマオンライン）。

問題 1:カウンター リセットがデフォルトのインクリメントの倍数でない 1 つ以上の作品のいくつかの抜粋または分割がある場合、id で抜粋を参照し、各 id の ol.verse の非表示ルールをオフセットする必要があります。残り。たとえば、43 行目から始まる抜粋では、counter-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;
}

インクリメントの倍数ではない行を非表示にするルールと組み合わせても、どちらも望ましい結果をもたらしません。このフィドルを参照してください。1 つ目は、正しい番号で間違った行番号をトリガーします。後者、間違った番号の正しい番号付け。自動化された行番号が正しい子インデックスに対応しているかどうかに関係なく機能する CSS カウンター ルールを作成する方法はありますか? おそらく、仕事をするCSSセレクターの他の組み合わせがありますか?

4

2 に答える 2

2

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許可する唯一の要素です.. (もちろん、まったく異なる要素を使用することもできます..カウント要素が数えないもの）liol

だからただ頼りに

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/のデモ

于 2012-06-01T19:28:44.203 に答える
0

問題2の場合、class="fallback"問題の説明の一部だけでなく、フィドルに残っている場合は、それを解決策として使用できます。n番目の子（5n）を省略し、フォールバックをインジケーターとして使用します。行数が表示されるかどうか。

更新されたjsFiddleを参照してください。
詩の一部ではない行をそこに挿入して、それが機能するかどうかを確認しました。機能するかどうかを確認します。行を削除すると、残りは同期されたままになります。

于 2012-06-01T19:44:34.667 に答える