6

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

用西里尔字母设计有序列表的最佳方式是什么？

（我提供了一个我最终得到的解决方案，尽管我对它不是很满意。）

4

4 回答 4

7

I know nothing about Cyrillic list schemes so I’m at risk of a bit of cultural embarrassment here, but CSS3 Lists module (still in working draft) defines quite a few Cyrillic alphabetic list types: lower-belorussian, 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, upper-ukrainian-full. As expected, the state of support for these is deplorable currently (certainly nothing in Gecko or WebKit), but hopefully going forwards these will start to be implemented.

Update: some changes have been made – the definition of list types has been moved into the CSS3 Counter Styles module whose current draft (Feb 2015) has unfortunately lost all alphabetical Cyrillic types. This is in Candidate Recommendation stage so it’s unlikely that additions will be made at the point. Perhaps in CSS4 List Styles?

于 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 回答
3

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

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

  document.head.appendChild( style );

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

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

于 2018-04-02T18:10:19.803 回答
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 回答