<UL> in right-to-left languages

#1 August 17th, 2006, 06:35 PM

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 August 17th, 2006, 06:55 PM

On 17 Aug 2006 10:39:23 -0700, ashkaan57@hotmail.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 August 17th, 2006, 06:55 PM

On 17 Aug 2006 10:39:23 -0700, ashkaan57@hotmail.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 <lior on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

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

--
buy, bought, bye

#4 August 17th, 2006, 07:25 PM

Nije Nego wrote:

Quote:

On 17 Aug 2006 10:39:23 -0700, ashkaan57@hotmail.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 <lior 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 <uland </ulor <li>
and </li>.
I tried the float:right and added "right" to the "list-style", but
didn't work.

#5 August 17th, 2006, 07:35 PM

On 17 Aug 2006 11:35:24 -0700, ashkaan57@hotmail.com wrote:

Quote:

Nije Nego wrote:

Quote:

>On 17 Aug 2006 10:39:23 -0700, ashkaan57@hotmail.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 <lior 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 <uland </ulor <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 August 17th, 2006, 07:45 PM

On 17 Aug 2006 11:35:24 -0700, ashkaan57@hotmail.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 August 17th, 2006, 07:55 PM

ashkaan57@hotmail.com <ashkaan57@hotmail.comscripsit:

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 <bodyelement 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 <ulshould 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 August 17th, 2006, 08:55 PM

Jukka K. Korpela wrote:

Quote:

ashkaan57@hotmail.com <ashkaan57@hotmail.comscripsit:
>

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 <bodyelement 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 <ulshould 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 <uland 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 August 17th, 2006, 09:25 PM

ashkaan57@hotmail.com <ashkaan57@hotmail.comscripsit:

Quote:

Jukka K. Korpela wrote:

- -

Quote:

>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>.

Quote:

What I wanted was a two
level <uland 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 August 17th, 2006, 11:35 PM

Jukka K. Korpela wrote:

Quote:

ashkaan57@hotmail.com <ashkaan57@hotmail.comscripsit:
>

Quote:

Jukka K. Korpela wrote:

- -

Quote:

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>.

>

Quote:

What I wanted was a two
level <uland 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 <uland style
<liwith 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.

#11 August 17th, 2006, 11:45 PM

ashkaan57@hotmail.com wrote:

Quote:

Jukka K. Korpela wrote:

Quote:

>ashkaan57@hotmail.com <ashkaan57@hotmail.comscripsit:
>>

Quote:

>>Jukka K. Korpela wrote:

>- -

Quote:

>>>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>.

>>

Quote:

>>What I wanted was a two
>>level <uland 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.

>
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 <uland style
<liwith using a background and right-alignment (in my previous
post).

Have you checked his earlier suggestion: use dir="rtl" on the body tag? This
works fine in Opera, MSIE & Firefox as far as I checked. Read op on it:
http://www.w3.org/TR/html401/struct/dirlang.html#h-8.2

Quote:

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.

Well, first try the dir="rtl", if that doesn't suit you: give the background
vertical position: either top or some em value I'd think.

Grtz,
--
Rik Wasmus

#12 August 18th, 2006, 12:15 AM

Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?

#13 August 18th, 2006, 02:05 AM

ashkaan57@hotmail.com wrote:

Quote:

Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.
>
But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}
>
and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?
>

What about something like this

Louise

_______

body { direction: rtl; }

ul li {
background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
list-style-type: none;
margin-top: Hpx; /* image Height dependent */
}
ul li span {
padding-right: Wpx; /* background image Width dependent */
}
______

then
______

<ul>
<li><span>content</span></li>
<li><span>etc</span></li>
</ul>
______

#14 August 18th, 2006, 02:35 AM

boclair wrote:

Quote:

ashkaan57@hotmail.com wrote:

Quote:

>Thanks Rik,
>I would have used dir=rtl except that I have already modified the css
>files to be used with the right-to-left orientation. When I tried
>"dir=rtl" it switched everything around. I know now that I should use
>this directive for right-to-left languages.
>>
>But as for you suggestion to set vertical align for background, I
>tried:
>li {
> background: url(blue_arrow_left.gif) no-repeat right top;
> padding-right: 10px;
> list-style: none;
>}
>>
>and it pushes the arrow way up. It seems other vertical alignment
>values, such as middle or baseline, have no effect. Am I setting the
>vertical alignment correctly?
>>

>
What about something like this

Quote:

ul li span {
padding-right: Wpx; /* background image Width dependent */
}

Oops. On testing, I realise the span selector rules should of course read
____
ul li span {
display:block;
margin-right:Wpx; /* background image Width dependent */
}
_____
Sorry

Louise

#15 August 18th, 2006, 09:55 AM

boclair wrote:

Quote:

ashkaan57@hotmail.com wrote:

Quote:

>Thanks Rik,
>I would have used dir=rtl except that I have already modified the css
>files to be used with the right-to-left orientation. When I tried
>"dir=rtl" it switched everything around. I know now that I should use
>this directive for right-to-left languages.

I sincerely urge to rethink wether or not you could rewrite (a small part of)
your css to account for this, and use it anyway, it's the preferred way.

Quote:

>But as for you suggestion to set vertical align for background, I
>tried:
>li {
> background: url(blue_arrow_left.gif) no-repeat right top;
> padding-right: 10px;
> list-style: none;
>}
>>
>and it pushes the arrow way up. It seems other vertical alignment
>values, such as middle or baseline, have no effect. Am I setting the
>vertical alignment correctly?

Well, I said: "or an em value". It top doesn't work, why not do that?

Quote:

>
ul li {
background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
list-style-type: none;
margin-top: Hpx; /* image Height dependent */
}
ul li span {
padding-right: Wpx; /* background image Width dependent */
}
>
<ul>
<li><span>content</span></li>
<li><span>etc</span></li>
</ul>

A semantically useless span, to be avoided IMHO. Any padding/margin can be taken
care of in the <li>.

ul li {
background-image: url(blue_arrow_left.gif);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: right 0.2em;/* change the value of 0.2em untill you get
it right */
list-style-type: none;
padding-right: 10px;
}

Grtz,
--
Rik Wasmus

#16 August 18th, 2006, 10:25 AM

ashkaan57@hotmail.com schrieb:

Quote:

When I tried
"dir=rtl" it switched everything around.

You can use the dir attribute on quite a lot of elements. So try it on
the ul element or whatever you like.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

#17 August 18th, 2006, 10:55 AM

Johannes Koch <koch@w3development.descripsit:

Quote:

You can use the dir attribute on quite a lot of elements.

Surely. But if the page content, or most of it, is written in a
right-to-left script (writing system), then the only logical move is to use
it on the <bodyelement (or the <htmlelement). Then deal with the
implications as needed.

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

#18 August 18th, 2006, 11:55 AM

Rik wrote:

Quote:

boclair wrote:

Quote:

>ashkaan57@hotmail.com wrote:

Quote:

>>Thanks Rik,
>>I would have used dir=rtl except that I have already modified the css
>>files to be used with the right-to-left orientation. When I tried
>>"dir=rtl" it switched everything around. I know now that I should use
>>this directive for right-to-left languages.

>
I sincerely urge to rethink wether or not you could rewrite (a small part of)
your css to account for this, and use it anyway, it's the preferred way.
>

Quote:

>>But as for you suggestion to set vertical align for background, I
>>tried:
>>li {
>> background: url(blue_arrow_left.gif) no-repeat right top;
>> padding-right: 10px;
>> list-style: none;
>>}
>>>
>>and it pushes the arrow way up. It seems other vertical alignment
>>values, such as middle or baseline, have no effect. Am I setting the
>>vertical alignment correctly?

>
Well, I said: "or an em value". It top doesn't work, why not do that?
>

Quote:

>ul li {
>background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
>list-style-type: none;
> margin-top: Hpx; /* image Height dependent */
>}
>ul li span {
>padding-right: Wpx; /* background image Width dependent */
>}
>>
><ul>
><li><span>content</span></li>
><li><span>etc</span></li>
></ul>

>
A semantically useless span, to be avoided IMHO. Any padding/margin can be taken
care of in the <li>.
>
ul li {
background-image: url(blue_arrow_left.gif);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: right 0.2em;/* change the value of 0.2em untill you get
it right */
list-style-type: none;
padding-right: 10px;
}

Touche; point taken on the span. Taking the above I would now modify
the li selector by

1.. adding min-height rule with a value equivalent to the height of the
background image.

2.. write the position rule as background-position: right top; and
position the text in relation to it by adding top padding rule of
suitable value.

Louise

#19 August 18th, 2006, 02:35 PM

Jukka K. Korpela wrote:

Quote:

Johannes Koch <koch@w3development.descripsit:
>

Quote:

>You can use the dir attribute on quite a lot of elements.

>
Surely. But if the page content, or most of it, is written in a
right-to-left script (writing system), then the only logical move is
to use it on the <bodyelement (or the <htmlelement). Then deal
with the implications as needed.

Indeed, if that's not how one started out it may be some work to
change it, but overall this is by far the better solution (if it is
indeed most of the page content which is rtl, and not a small
snippet).

Grtz,
--
Rik Wasmus

#20 August 18th, 2006, 02:55 PM

On 17 Aug 2006 ashkaan57@hotmail.com wrote:

Quote:

I have a page in a right-to-left language

Languages are neither "right-to-left" nor "left-to-right" -
only writing systems (scripts) are.

Quote:

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:

<ul dir="rtl">
It's a good idea to define the DIR attribute for *everything*.
Start with <body dir="ltr"or <body dir="rtl"and then add
a DIR attribute to *every* element with opposite direction.
http://ppewww.ph.gla.ac.uk/~flavell/...direction.html
http://www.unics.uni-hannover.de/nht...onal-text.html

What is Bytes?

Popular Articles