Custom <ol> numbering with Hebrew numerals

Question

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?

Newspaperwoman

Answer 1

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

Timi

Answer 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

Stunk

This is a brilliant answer (+1). It's answer for this question too (in case of more than 10 items in the list). #28831890 – Constrained