468,247 Members | 1,454 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,247 developers. It's quick & easy.

<UL> in right-to-left languages

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.

Aug 17 '06 #1
19 9313
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.com wrote:
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
Aug 17 '06 #2
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.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 <lior on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

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

--
buy, bought, bye
Aug 17 '06 #3

Nije Nego wrote:
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.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 <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.

Aug 17 '06 #4
On 17 Aug 2006 11:35:24 -0700, as*******@hotmail.com wrote:
Nije Nego wrote:
>On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.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 <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
Aug 17 '06 #5
On 17 Aug 2006 11:35:24 -0700, as*******@hotmail.com wrote:
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
Aug 17 '06 #6
as*******@hotmail.com <as*******@hotmail.comscripsit:
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.
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 <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/

Aug 17 '06 #7

Jukka K. Korpela wrote:
as*******@hotmail.com <as*******@hotmail.comscripsit:
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.
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 <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.

Aug 17 '06 #8
as*******@hotmail.com <as*******@hotmail.comscripsit:
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 <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/

Aug 17 '06 #9

Jukka K. Korpela wrote:
as*******@hotmail.com <as*******@hotmail.comscripsit:
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 <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.

Aug 17 '06 #10
Rik
as*******@hotmail.com wrote:
Jukka K. Korpela wrote:
>as*******@hotmail.com <as*******@hotmail.comscripsit:
>>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 <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
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
Aug 17 '06 #11

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?

Aug 17 '06 #12
as*******@hotmail.com wrote:
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>
______
Aug 18 '06 #13
boclair wrote:
as*******@hotmail.com wrote:
>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
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
Aug 18 '06 #14
Rik
boclair wrote:
as*******@hotmail.com wrote:
>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.
>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?
>
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
Aug 18 '06 #15
as*******@hotmail.com schrieb:
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.)
Aug 18 '06 #16
Johannes Koch <ko**@w3development.descripsit:
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/

Aug 18 '06 #17
Rik wrote:
boclair wrote:
>as*******@hotmail.com wrote:
>>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.
>>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?
>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
Aug 18 '06 #18
Rik
Jukka K. Korpela wrote:
Johannes Koch <ko**@w3development.descripsit:
>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
Aug 18 '06 #19
On 17 Aug 2006 as*******@hotmail.com wrote:
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.
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

Aug 18 '06 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Akseli Mäki | last post: by
5 posts views Thread by Timo Nentwig | last post: by
4 posts views Thread by opt_inf_env | last post: by
2 posts views Thread by Andrew Donaldson | last post: by
4 posts views Thread by Viken Karaguesian | last post: by
6 posts views Thread by ashkaan57 | last post: by
13 posts views Thread by pipehappy | last post: by
4 posts views Thread by Winston | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.