HTML list content direction in rtl

I have a simple HTML unordered list

<ul>
    <li><a href="#">link1</a> <a hr开发者_运维技巧ef="#">link2</a> text1</li>
    <li>text1 <a href="#">link</a></li>
    <li>text1 text2</li>
</ul>

If I have normaln ltr layout, final content looks like this

link1 link2 text1

text1 link

text1 text2

However, if the content inside a list item is mixed, and direction is set to rtl, I get a complete mess

link2 text1 link1

text1 link

text2 text1

which means only the list element containing text only gets reversed properly. Any ideas on how to get this working correctly?

edit: It seems that the content flow depends on the actual content. A simple example like this doesn't work

<ul dir="rtl">
  <li>
    <a href="#">12:30 - 13:30</a>
    some text
    <a href="#">link text</a>
  </li>
</ul>
<ul dir="ltr">
  <li>
    <a href="#">12:30 - 13:30</a>
    some text
    <a href="#">link text</a>
  </li>
</ul>

---

It works out of the box

The attribute dir="RTL"

using your markup only position the content at the right side

  <div dir="RTL">
    <ul>
      <li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
      <li>My First Text <a href="#">My First Link</a></li>
      <li>My First Text, My Second text</li>
    </ul>
  </div>
  
  <hr/>
  
  <div dir="LTR">
    <ul>
      <li><a href="#">My Web Home Site</a> <a href="#">My Other Web Site</a> My First Text</li>
      <li>My First Text <a href="#">My First Link</a></li>
      <li>My First Text, My Second text</li>
    </ul>
  </div>
  

It's all a matter of how you write your content, more information here

---

you could this Html/CSS styling for Arabic Language

"<ol style="list-style-type:arabic-indic ;direction:RTL; text-align: right"><li>مرحبا بك و اهلا و سهلا </li></ol>"

---

If "dir" does not work on the page, just use this:

style="text-align: right;

For a sample "li" tag:

<ul>
<li style="text-align: right;">
blah blah....
</li>
...
</ul>