6

list-style-typeCSS プロパティには多くの可能な値があります (例: decimal、lower-latinなどupper-greek)。ただし、キリル文字には何もありません（ところで、言語ごとに異なるバリエーションがあります）。

キリル文字で順序付きリストをスタイルする最良の方法は何ですか?

（私はあまり満足していませんが、私が最終的に得た解決策を提供しています。）

4

4 に答える 4

7

私はキリル文字のリストスキームについて何も知らないので、ここで少し文化的な困惑のリスクがありますが、CSS3リストモジュール（まだドラフトで作業中）はかなりの数のキリル文字のアルファベットリストタイプを定義しlower-belorussianます：、、、、、、、、、、、、、、、、、、。_ _ _ _ 予想通り、これらのサポートの状態は現在嘆かわしいものです（GeckoやWebKitでは確かに何もありません）が、うまくいけば、これらは実装され始めるでしょう。lower-bulgarianlower-macedonianlower-russianlower-russian-fulllower-serbo-croatianlower-ukrainianlower-ukrainian-fullupper-belorussianupper-bulgarianupper-macedonianupper-russianupper-russian-fullupper-serbo-croatianupper-ukrainianupper-ukrainian-full

更新：いくつかの変更が行われました–リストタイプの定義がCSS3カウンタースタイルモジュールに移動されました。現在のドラフト（2015年2月）では、残念ながらすべてのアルファベットのキリル文字タイプが失われています。これは候補者の推奨段階にあるため、その時点で追加が行われる可能性はほとんどありません。おそらくCSS4リストスタイルで？

于 2012-08-23T08:18:48.437 に答える
3

この方法では、各リスト項目の前に CSS で生成されたコンテンツを使用しています。

.lower-ukrainian {
  list-style-type: none;
}

.lower-ukrainian li:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .55em;
  text-align: right;
  width: .95em;
}

.lower-ukrainian li:first-child:before {
  content: "а.";
}

.lower-ukrainian li:nth-child(2):before {
  content: "б.";
}

/* and so on */

短所

  1. ハードコーディングされ、リストを特定の最大長に制限します。
  2. 通常の注文リストと比較してピクセルパーフェクトではない
于 2012-08-22T21:02:50.050 に答える
2

キリル文字の番号がないことに驚いています。これがあなたのための簡単なJSソリューションです：

function base_convert(n, base) {
    var dictionary = '0123456789abcdefghijklmnopqrstuvwxyz';
    var m = n.toString(base);
    var digits = [];

    for (var i = 0; i < m.length; i++) {
        digits.push(dictionary.indexOf(m.charAt(i)) - 1);
    }

    return digits;
}

var letters = {
    'russian': {
        'lower': 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя',
        'upper': 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ'
    }
}

$('ul, ol').each(function() {
    if (!(results = $(this).prop('class').match(/(upper|lower)-([a-z]+)/i))) return;

    var characters = letters[results[2]][results[1]];

    $('> li', this).each(function(index, element) {
        var number = '', converted = base_convert(++index, characters.length);

        for (var i = 0; i < converted.length; i++) {
            number += characters.charAt(converted[i]);
        }

        $(this).attr('data-letter', number);
    });
});​

私の書いたロシア語は、文字で数えることができないことからわかるように、確かに悪いので、lettersオブジェクトを適切に変更してください。

デモ： http： //jsfiddle.net/JFFqn/14/

于 2012-08-22T22:05:25.337 に答える