Geek Answers Handbook

Ordered List Style with Cyrillic Letters

There are many possible values ​​for the CSS list-style-type property (e.g. decimal , lower-latin , upper-greek , etc.). However, there is no Cyrillic alphabet (which, incidentally, has different options for different languages).

What is the best way to arrange an ordered list with cyrillic letters?

(I provide the solution I ended up in, even though I'm not very happy with it.)

+4
source share
4 answers

I don't know anything about cyrillic list schemes, so I risk having a bit of cultural embarrassment here, but the CSS3 Lists module (still in a working draft) defines quite a few types of Cyrillic alphabetical list : 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 support status for them is currently deplorable (of course, nothing happens in Gecko or WebKit), but, hopefully, they will move forward, they will begin to be implemented.

Update: some changes have been made - the definition of list types has been moved to the CSS3 Counter Styles module , whose current project (February 2015)), unfortunately, has lost all the alphabetical Cyrillic types. This is at the stage of the candidate’s recommendation, therefore it is unlikely that additions will be made at this point. Perhaps in CSS4 list styles?

+5
source

In this method, I use CSS-generated content in front of each list item.

 .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 */

disadvantages

  • Hardcoded, limit the list to a specific maximum length.
  • Not perfect pixel compared to regular order list
+2
source

I am surprised that there is no numbering in Cyrillic. Here's a quick JS solution:

 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)-([az]+)/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); }); });​

My written Russian is admittedly bad, as you can see from my inability to read letters, so change the letters object accordingly.

Demo: http://jsfiddle.net/JFFqn/14/

+2
source

Here is another solution for cyrillic letters with fairly clear code: 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. You can convert this next generation code to old with Babel: babeljs.io

+1
source

More articles:


All Articles