最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Custom <ol> numbering with Hebrew numerals - Stack Overflow

programmeradmin0浏览0评论

I'd like to have a numbered list using Hebrew alphabet numerals, as is common in books in Hebrew. Whereas Latin notation uses digits 0-9, Hebrew is numbered alphabetically, with a few exceptions here and there where the value is changed around. I have no idea if this is even possible in CSS, but perhaps it is in JavaScript.

I'd essentially like to have something like this:

<ol>
  <li>First Line</li>
  <li>Second Line</li>
  <li>Third Line</li>
</ol>

I'd like to have a numbered list using Hebrew alphabet numerals, as is common in books in Hebrew. Whereas Latin notation uses digits 0-9, Hebrew is numbered alphabetically, with a few exceptions here and there where the value is changed around. I have no idea if this is even possible in CSS, but perhaps it is in JavaScript.

I'd essentially like to have something like this:

<ol>
  <li>First Line</li>
  <li>Second Line</li>
  <li>Third Line</li>
</ol>

turn into something like this:

.hebrew-numeral {
  padding-left: 10px;   
}
<table dir="rtl">
  <tbody>
    <tr>
      <td class="hebrew-numeral">א</td>
      <td>First Row</td>
    </tr>
    <tr>
      <td class="hebrew-numeral">ב</td>
      <td>Second Row</td>
    </tr>
    <tr>
      <td class="hebrew-numeral">ג</td>
      <td>Third Row</td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/rfkrocktk/pFkd7/:

Is there a way to do this in CSS or in JavaScript? I could just use a table like in my example above, but is this really the best way of doing this?

Share Improve this question edited Dec 27, 2015 at 11:29 Mosh Feu 29.3k18 gold badges93 silver badges141 bronze badges asked Oct 24, 2011 at 5:05 Naftuli KayNaftuli Kay 91.7k105 gold badges286 silver badges428 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 17

You can do this easily with CSS's list-style-type: hebrew property

ol { list-style-type: hebrew; } 
<h1>Test</h1>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

See example here: http://jsbin.com/icehis/2

Also, you can use counter and before. see http://jsfiddle.net/Regisc/jxkqU/

ol {
    counter-reset: num;
    direction: rtl;
}
li {
    list-style-type: none;
    counter-increment: num;
    padding-bottom: 4px;
}
li:before {
    content: counter(num, hebrew);
    padding-left: 10px; 
}

Result:

tested on Chrome 16.0.912.4 dev

发布评论

评论列表(0)

  1. 暂无评论