Bullet Points Positioning with Arabic RTL direction - html

Question

I am using custom bullet points on a website.
Now this site will also be available in Arabic.
.post ul li{
color: #555555;
background: url(images/ico-bullet_round.gif) no-repeat !important;
background-position: 300px 6px !important;
padding-right: 15px !important;
padding-left:0 !important;
direction:rtl;
}
However with direction:rtl; I am unable to have all the bullet points on the right side. Some are more indented than others.
Please see a screenshot showing the problem.
Any suggestions on how to simply align all bullet points on the right?
UPDATE: Please see this screenshot with background-position set to 0 6px. It has something to do with direction:rtl; but I can't figure it out.

Answer 1

Is there any reason why not simply list-style-image, which is designed specifically for custom bullets?
ul { margin: 0 20px; padding: 0; }
ul li {
margin: 0; padding: 0;
list-style: disc url(images/ico-bullet_round.gif);
direction:rtl;
}
works for me, assuming you do mean the right-hand side when you say “right side”. You could have them on the left as well if you wanted by putting the rtl on a child div inside the li, but that'd look a bit strange for Arabic, I think.

Answer 2

I had the same problem and got over it by using:
ul{direction:rtl;}
li{direction:rtl; margin-right:20px;}
The functioning attribute is using: margin-right:20px while using direction :rtl
Thanks

Answer 3

One solution could be to put background-position like this:
background-position: 100% 6px !important;
I supppose that the direction: rtl, does not influence in backgrounds.

Answer 4

Trying using • at the beginning of the sentence, while aligning everything to the right. That way you can get something like this:
مرحبا •

Answer 5

Try ::before and ::after in css styling and your rtl file and use JavaScript to release css effect.
Example:
this is (RTL list but bullets are not suitable
Here are you Css code for before RTL.
ul.points li:before{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
Then After i made RTL file i used this code :
ul.points li:after{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
but look for this image ( it has bullets before and after ( hence your turn to remover it using javascript (add class and remove class) to Css:
this is (after) rtl css style
I wish this helps noting that it's my first comment in stack ever!

Answer 6

Try background-position: right;
Worked for me.