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?

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