CSS faking comma into Arabic decimal separator

by Manuel Souto Pico

HTML

<h1>Commas with Hindu-Arabic numerals (CSS)</h1>
<table>
<tr>
  <th>Figure</th>
  <th>Description</th>
</tr>
<tr>
  <td class="figure">3,230</td>
  <td>Latin figure with regular comma (not altered)</td>
</tr>
<tr>
  <td class="figure">٣,٢٣٠</td>
  <td>Arabic figure originally with regular comma (updated on rendering)</td>
</tr>
<tr>
  <td class="figure">٣٫٢٣٠</td>
  <td>Arabic figure originally with Arabic decimal separator (not altered)</td>
</tr>
</table>
<p> The figures in the second and third rows should be identical.</p>

CSS

@font-face {font-family: "Arabic Typesetting"; src: url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.eot"); src: url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.woff") format("woff"), url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/280e0867d189623928fcc0d7cfdaaa47.svg#Arabic Typesetting") format("svg"); }

.figure {
  font-size: 4em;
  font-weight: bold;
  font-family: "Arabic Typesetting";
}
table, table td, table th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
}

JavaScript

// document.body.innerHTML = document.body.innerHTML.replace(/([٠-٩]),([٠-٩])/g,"$1٫$2");