How does one "mirror" the bullets of an unordered list?

It was hard to phrase this question.

I'll assume most of you are aware that a normal unordered list has the bullets on the left side. I'd like to know if it's possible to get these bullets on the right side (jquery solutions are fine).

To go into detail a bit, assume that:

1. There are 2 lists I want to display side-by-side : foo and bar开发者_如何学运维.
2. The text alignment of the bar list should to the right.
3. The bullets of the bar list should be on the opposing side.

P.S. Since I think someone will utter, "Why? Why in the name of all that is logical would you want to do such a thing?" My humble but illogical code-monkeying self must confess that it's a bit bored of the "norm". ;)

Edit:

The use of dir='rtl' will not work for my case as it results in undesired effects due to me only wanting the bullet reversed, not the sentence as well.

If you can't use dir='rtl', I think there's no good solution really. You could use CSS to disable the default list bullets and position a background image instead as a workaround. Alternatively, you could do something like this:

<table>
    <tr><td>First point. </td><td> <li> </li></td></tr>
    <tr><td>Second point. </td><td> <li> </li></td></tr>
</table>

Which is a nasty looking workaround, but does do what you want. Tables for layout is obviously undesirable, but here I think a CSS equivalent in terms of positioning and variable-height alignment would be quite a lot more complex.

Try <ul dir='rtl'>...</ul>.

The dir='rtf' snippet tells the browser that the text should be read right-to-left ("direction: right-to-left").

Edit: See comments! This shouldn't be used for left-to-right languages!

It can be done with css using the direction attribute. Just do direction:rtl.

The complete picture:

<ul style="float:left">
    <li>Foo</li>
    <li>Bar</li>
</ul>
<ul style="direction:rtl;float:right;">
    <li>Foo</li>
    <li>Bar</li>
</ul>

http://startwithabreak.com/misc/test.html