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 badges2 Answers
Reset to default 17You 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