CODEWITHSUNDEEP
htmlright-to-left
eagerMoose
eagerMoose

Reputation: 1133

HTML list content direction in rtl

I have a simple HTML unordered list

<ul>
    <li><a href="#">link1</a> <a href="#">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>

Upvotes: 11

Views: 37949

Answers (3)

balexandre
balexandre

Reputation: 75073

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

Upvotes: 26

ali nada
ali nada

Reputation: 101

you could this Html/CSS styling for Arabic Language

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

Upvotes: 10

محسن عباسی
محسن عباسی

Reputation: 2424

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>

Upvotes: 0

Related Questions