HTML - How to handle arabic text inversion without duplicating code nor JS

Question

I want to achieve the following :

If not Arabic

+--------------------------------------+
| Price                            500 |
+---------------------------------------

If arabic

+--------------------------------------+
| 500                            Price |
+---------------------------------------

Currently "500" is in a div and "Price" is in a div.

• If not Arabic, I create the "Price" div first (align left) and then the "500" div (align right).
• If Arabic, I create the "500" div first (align left) and then the "Price" div (align right).

In conclusion, I either have to duplicate the code (to handle the fact that each div can be on the left or on the right) or to create it dynamically with JS (meh). I want a simpler solution because if I have a lot more properties than just "Price", the code will be fatuously complicated.

Answer 1

You need to change direction in style to rtl for Arabic. See this example:

 <table style="direction: ltr">
      <tr>
        <td>Price</td>
        <td>500</td>
    </tr>
  </table>