Why direction doesn't work correctly?

Question

I have two rows like these:

 td{direction: rtl;} 

 <table> <tr> <td>این یک متن تست است – <span>username</span> – <span>timestamp</span></td> </tr> <tr> <td>It is a test – <span>username</span> – <span>timestamp</span></td> </tr> </table> 

این یک متن تست است and It is a test are exactly the same thing and I want an identical position for both of them, but I don't know their position will be change after executing ..! How can I fix it?

I want this structure:

 tr{direction: rtl;} 

  <table> <tr> <td>این یک متن تست است – <span>username</span> – <span>timestamp</span></td> </tr> <tr> <td>It is a test س– <span>username</span> – <span>timestamp</span></td> </tr> </table> 

Note: I don't want to add any new HTML tag. I want to solve it using CSS.

Answer 1

I think what you're trying to say is that they're not aligned together. This is happening because persian is a RTL language while English is a LTR language as obvious so you're trying to contradict them.

Try using the tag on the table. If you don't like the result, then align the persian to the right and align the english to the left. Hope I helped. Good luck.

Answer 2

As Golden Eagle said, its a language issue...

Just try this, please:

td{direction: rtl; text-align: left;}