Question

list-style-type CSS属性有许多可能的值（例如decimal，lower-latin，upper-greek等等。然而，西里尔字母表没有（对于不同的语言，它有不同的变体）。

使用西里尔字母为有序列表设置样式的最佳方法是什么？

（尽管我对此并不满意，但我提供的解决方案最终得到了解决方案。）

Answer 1

我对西里尔字母列表方案一无所知，所以我在这里面临一些文化尴尬的风险，但CSS3列表模块（仍处于工作草案中）defines quite a few Cyrillic alphabetic list types：lower-belorussian，{{1} }，lower-bulgarian，lower-macedonian，lower-russian，lower-russian-full，lower-serbo-croatian，lower-ukrainian，lower-ukrainian-full，upper-belorussian， upper-bulgarian，upper-macedonian，upper-russian，upper-russian-full，upper-serbo-croatian，upper-ukrainian。正如预期的那样，目前对它们的支持状态是令人遗憾的（当然Gecko或WebKit中没有任何内容），但希望这些将继续实施。

更新：已经进行了一些更改 - 列表类型的定义已移至CSS3 Counter Styles module，其当前草案（2015年2月）遗憾地丢失了所有按字母顺序排列的西里尔字母类型。这是在候选推荐阶段，因此不太可能在此时进行添加。也许在CSS4列表样式中？

Answer 2

在这个方法中，我在每个列表项之前使用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 */

缺点

硬编码，将列表限制为特定的最大长度。
与常规订单列表相比，不像素完美

Answer 3

我很惊讶没有西里尔字母编号。这是一个快速的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/

Answer 4

这是西里尔字母的另一种解决方案，代码非常清晰：jsfiddle.net

(() => {
  const classname = 'ol.cyrillic',
        style     = document.createElement('style');

  document.head.appendChild(style);

  'абвгдежзиклмнопрстуфхцчшщэюя'.split('').forEach((c, i) =>
    style.sheet.insertRule(
      `${classname} > li:nth-child(${i+1})::before { 
         content: "${c})"
       }`, 0)
  );
})();

PS。您可以使用Babel将此下一代代码转换为旧代码：babeljs.io

使用西里尔字母设置有序列表的样式

4 个答案:

缺点