<UL> in right-to-left languages

#1

Hi,
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left. Is
there any way I can set the bullets to be on the right:

..lists {
margin:2em 0 0 2em;
}

..lists ul {
margin:0;
padding:0;
}

..lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

TIA.

#2

On 17 Aug 2006 10:39:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Quote:

lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

Just ad this to your css:
ul {
float: right;
}
--
buy, bought, bye

#3

On 17 Aug 2006 10:39:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Quote:

Hi,
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left. Is
there any way I can set the bullets to be on the right:

Sorry, did not read it properly, I think you would have to use backroung
images on <li> or on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye

#4

Nije Nego wrote:

Quote:

On 17 Aug 2006 10:39:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left. Is
there any way I can set the bullets to be on the right:

Sorry, did not read it properly, I think you would have to use backroung
images on <li> or on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye

Thanks Nije. If I use the style you provided, it puts the bullet's
image as the background of everything between <ul> and </ul> or <li>
and </li>.
I tried the float:right and added "right" to the "list-style", but
didn't work.

#5

On 17 Aug 2006 11:35:24 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Quote:

Nije Nego wrote:
On 17 Aug 2006 10:39:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left. Is
there any way I can set the bullets to be on the right:

Sorry, did not read it properly, I think you would have to use backroung
images on <li> or on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye

Thanks Nije. If I use the style you provided, it puts the bullet's
image as the background of everything between <ul> and </ul> or <li
and </li>.
I tried the float:right and added "right" to the "list-style", but
didn't work.

You have to style your tags to suite your needs, probably this would help
ul
{ float: right; }
li
{ background: url(bullet.png) no-repeat right; padding-right: 10px; }

Padding right - little bit wider than the width of bullet image
(bullet.png).

Of course you can play a bit arround.

--
buy, bought, bye

#6

On 17 Aug 2006 11:35:24 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Quote:

I tried the float:right and added "right" to the "list-style", but
didn't work.

Or with your bullet:
ul {
float: right;
}
li {
background: url(assets/images/19dot1a.gif) no-repeat right;
padding-right: 10px;
list-style: none;
}
--
buy, bought, bye

#7

ashkaan57 (AT) hotmail (DOT) com <ashkaan57 (AT) hotmail (DOT) com> scripsit:

Quote:

I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left.

Bullets are on the left by default. The inherent directionality of text
characters does not change that.

You should have specified the URL so that we could see what you have
actually done. It seems that you have not specified the writing direction,
so using dir="rtl" in the <body> element is advisable. You could use CSS
too,
body { direction: rtl; }
but the writing direction is too important to be handled in CSS; it's part
of the writing system, not a casual rendering suggestion.

Quote:

Is there any way I can set the bullets to be on the right:

<body dir="rtl"> will do that.

Quote:

.lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

What is "lists"? CSS code snippets are rather meaningless without a document
they relate to. If you have wrapped your lists inside <div
class="lists">...</div>, the margin settings are not adequate for
right-to-left writing. The right margin or padding of a <ul> should be
positive (and about 1.5em or larger) so that there is room for the bullets.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#8

Jukka K. Korpela wrote:

Quote:

ashkaan57 (AT) hotmail (DOT) com <ashkaan57 (AT) hotmail (DOT) com> scripsit:

I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left.

Bullets are on the left by default. The inherent directionality of text
characters does not change that.

You should have specified the URL so that we could see what you have
actually done. It seems that you have not specified the writing direction,
so using dir="rtl" in the <body> element is advisable. You could use CSS
too,
body { direction: rtl; }
but the writing direction is too important to be handled in CSS; it's part
of the writing system, not a casual rendering suggestion.

Is there any way I can set the bullets to be on the right:

body dir="rtl"> will do that.

.lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

What is "lists"? CSS code snippets are rather meaningless without a document
they relate to. If you have wrapped your lists inside <div
class="lists">...</div>, the margin settings are not adequate for
right-to-left writing. The right margin or padding of a <ul> should be
positive (and about 1.5em or larger) so that there is room for the bullets.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Thank you for the info.
No, I don;t use <div>, I use to style <ul>. What I wanted was a two
level <ul> and in works in ENglish version. I tried to use it in the
right-to-left version of the pages by changing the align:left to
align:right and left-margin values to right-margin values:

..lists {
margin:2em 2em 0 0;
}

..lists ul {
float: right;
margin:0;
padding:0;
}

..lists li {
padding: 0 1em 0.5em 0;
list-style: url(assets/images/19dot1a.gif) outside right;
}

..lists2 {
margin:0.5em 2 0 0;
}

..lists2 ul {
float:right;
margin:0;
padding:0;
}

..lists2 li {
padding: 0 2em 0.5em 0;
list-style: url(assets/images/2dot6a.gif) outside right;
}

the in html:

<ul class="lists">
<li>first-level list item:
<ul class="lists2">
<li>second-level list item</li>
<li>second-level list item</li>
<li>second-level list item</li>
</ul>
</li>
</ul>

I used the suggestion, in previous response, to use:
ul {
float: right;
}

li {
background: url(assets/images/blue_arrow_left.gif) no-repeat
right;
padding-right: 10px;
list-style: none;
}
and it works, except that if the list item continues on the next line,
the arrow (image) is displayed between the two lines.

Thanks.

#9

ashkaan57 (AT) hotmail (DOT) com <ashkaan57 (AT) hotmail (DOT) com> scripsit:

Quote:

Jukka K. Korpela wrote:
- -
You should have specified the URL so that we could see what you have
actually done.

You seem to have missed that sentence, despite quoting it. Comprehensive
quoting often indicates lack of comprehensive reading.

Quote:

No, I don;t use <div>, I use to style <ul>.

What I wanted was a two
level <ul> and in works in ENglish version.

But fails to work in an unspecified way in an unspecified version. Well, you
have probably made some mistake, either in coding or interpreting things.

Did you even try my suggestion? The one you quoted, I mean.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#10

Jukka K. Korpela wrote:

Quote:

ashkaan57 (AT) hotmail (DOT) com <ashkaan57 (AT) hotmail (DOT) com> scripsit:

Jukka K. Korpela wrote:
- -
You should have specified the URL so that we could see what you have
actually done.

You seem to have missed that sentence, despite quoting it. Comprehensive
quoting often indicates lack of comprehensive reading.

No, I don;t use <div>, I use to style <ul>.

What I wanted was a two
level <ul> and in works in ENglish version.

But fails to work in an unspecified way in an unspecified version. Well, you
have probably made some mistake, either in coding or interpreting things.

Did you even try my suggestion? The one you quoted, I mean.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

It is not uploaded to any site, it is on my PC otherwise I would have
posted the url to be viewed. Sorry to not have mentioned this.
I tried dir=rtl and it shifted everything, my menu which was inside a
div moved from right to left, along with everyhting else that got
reversed. I didn't know about the "dir" directive before I manually
moved everything from left to right.
I am new to CSS and trying to get away from tables to layout the page.

The "failed to work" meant that the bullet was on the left and text in
Farsi (written from right to left) started on the right. So, the bullet
was displayed at the end of the sentence.

I used a previous suggestion to use float:right for the <ul> and style
<li> with using a background and right-alignment (in my previous post).
This works fine except for multi-line list items, where the bullet is
not aligned with first line, it is between first and second line.